1.1 Typescript 介绍
1.TypeScript 是由微软开发的一款开源的编程语言,像后端 java、C#这样的面向对象语言可以让 js 开发大型企业项目。
2.TypeScript 是 Javascript的超级,遵循最新的 ES6、Es5 规范(相当于包含了es6、es5的语法)。TypeScript扩展了JavaScript的语法。
3.最新的 Vue 、React 也可以集成 TypeScript。
1.2 Typescript 安装 编译
安装nodejs环境,用npm全局安装typescript
npm install -g typescript
Typescript文件后缀名为.ts,最后将编译成js文件
Typescript手动编译 => tsc + 文件名
// 将index.ts编译成index.js
tsc index.ts
1.3 Typescript开发工具Vscode自动编译.ts 文件
1.3.1 tsc --init 生成配置文件tsconfig.json
1.3.2 点击菜单栏任务-运行任务(遇到错误使用快捷键ctrl + shift + b),点击 tsc:监视-tsconfig.json 然后就可以自动生成代码 了
typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验
2.1 基础类型
在typescript中主要给我们提供了以下数据类型:
布尔类型(boolean) 数字类型(number) 字符串类型(string) 数组类型(array) 元组类型(tuple) 枚举类型(enum) 任意类型(any) null和undefined void类型 never类型
相比于js,typescript中多了枚举类型、任意类型、void类型和never类型
2.2 变量定义
写ts代码变量必须指定类型,指定类型后赋值必须为指定的类型,否则报错
var flag:boolean = true
flag = 123
2.3 数据类型
布尔类型(boolean)
var flag:boolean = true
flag = false
数字类型(number)
var num:number = 123;
num = 456;
字符串类型(string)
var str:string = 'this is ts';
str='haha';
数组类型(array) ts中定义数组有两种方式
元组类型(tuple)元素的类型不必相同,写法和数组一样
let arr:[number,string] = [123,'this is ts']
枚举类型(enum)
用法:
enum 枚举名{
标识符[=整型常数],
标识符[=整型常数],
...
标识符[=整型常数],
}
enum Flag {success = 1,error = 2};
let s:Flag = Flag.success
任意类型(any)
为那些在编程阶段还不清楚类型的变量指定一个类型
var number:any = 123
number = 'str'
number = true
2.9 null 和 undefined
undefined:
{
null:
void类型
typescript中的void表示没有任何类型,一般用于定义方法的时候方法没有返回值。
never类型
表示的是那些永不存在的值的类型,例如异常
var a:never
三、Typescript函数
内容概述: 函数的定义、可选参数、默认参数、剩余参数、函数重载、箭头函数。
3.1.1 函数的定义
3.1.2 ts中定义方法传参
function paramFuc(name:string, age:number):string{
return `${name} --- ${age}`
}
console.log('函数传参', paramFuc('dz', 20))
3.1.3 函数没有返回值的方法用void
function voidFnc():void{
console.log('没有返回值的方法用void')
}
voidFnc();
3.2 可选参数
- es5里面方法的实参和行参可以不一样,但是ts中必须一样,如果不一样就需要在可选参数后加?,这就是可选参数。
function electParam(name:string, age?:number):string {
3.3 默认参数
- es5里面没法设置默认参数,es6和ts中都可以设置默认参数
3.4 剩余参数
- 当有很多参数时候或参数个数不确定,可以用三点运算符
3.5 ts函数重载
同样的函数,传入不同的参数,实现不同的功能
- java中方法的重载:重载指的是两个或者两个以上同名函数,但它们的参数不一样,这时会出现函数重载的情况。
- typescript中的重载:通过为同一个函数提供多个函数类型定义来实现多种功能的目的。
- ts为了兼容es5 以及 es6 重载的写法和java中有区别。
3.6 箭头函数
箭头函数和es6中一样
setTimeout(() => {
console.log('箭头函数')
}, 1000);
四、Typescript中的类
4.1 es5中的类
内容概述:类的创建、静态方法、继承(对象冒充继承,原型链继承,对象冒充 + 原型链组合继承)
es5中的面向对象、构造函数、原型与原型链本质可以看这个文档http://caibaojian.com/javascr... , 个人觉得写得很清晰。
4.1.1 类的创建
es5类在构造函数和原型链里都可以添加属性和方法,原型链上的属性会被多个实例所共享,而构造函数则不会。
function Person() {
this.name = 'Ming'
this.run = function() {
console.log(this.name + '在运动')
}
}
Person.prototype.sex = '男'
4.1.2 静态方法
调用静态方法不需要实例化
Person.getInfo=function(){
console.log('我是静态方法');
}
Person.getInfo();
4.1.3 实现继承
对象冒充(或者叫构造函数继承)继承:可以继承构造函数里面的属性和方法,但是没法继承原型链上面的属性和方法
原型继承:可以继承构造函数里面的属性和方法,也可以继承原型链上面的属性和方法,但是实例化子类的时候没法给父类传参
下面是通过对象冒充 + 原型链组合继承,解决了上面两种继承方式存在的问题
function Worker(name,age){
this.name=name;
从上面可以看出,对象冒充继承是在子类Web构造函数里面通过call方法继承父类Worker的构造函数的属性和方法;原型链继承通过子类Web的原型对象等于父类Worker的原型对象来实现继承;最后这两种继承的组合方式实现了完美继承。
4.2 typescript中的类
内容概述: ts中类的定义、继承、类修饰符、静态属性和静态方法、多态、抽象类和抽象方法
4.2.1 ts中类的定义
ts中类的定义和es6类的定义一样
class PersonDefine {
name: string
4.2.2 继承
ts中继承比es5简单很多,用extends super实现继承
class WebExtend extends PersonDefine {
constructor(name:string) {
super(name)
4.2.3 ts类里面的修饰符
修饰符:typescript里面定义属性的时候给我们提供了三种修饰符
- public: 公有修饰符,在当前类里面、子类、类外面都可以访问
- protected:保护类型,在当前类里面、子类里面可以访问,在类外部没法访问
- private :私有修饰符,在当前类里面可以访问,子类、类外部都没法访问
注意:属性如果不加修饰符,默认就是公有修饰符
4.2.4 静态属性和静态方法
为什么要用静态属性和静态方法?jq里面的$.ajax就是用的静态方法
function $(element) {
return new Base(element)
}
function Base(element) {
this.element = document.getElementById(element)
this.css = function(arr, value) {
this.element.style[arr] = value
}
}
$('box').css('color','red')
$.ajax = function() {}
ts中实现静态属性和静态方法用static
class PersonStatic{
4.2.5 多态
父类定义一个方法不去实现,让继承它的子类去实现,每一个子类的该方法有不同的表现
比如定义一个父类Animal,里面的eat方法不去实现,让子类Dog和Cat分别实现自己的eat方法
class Animal {
name:string;
constructor(name:string) {
this.name=name;
}
eat(){
4.2.6 抽象类和抽象方法
定义:用abstract关键字定义抽象类和抽象方法,抽象类中的抽象方法不包含具体实现并且必须在派生类(抽象类的子类)中实现
- 抽象类:它是提供其他类继承的基类,不能直接被实例化,子类继承可以被实例化
- abstract修饰的方法(抽象方法)只能放在抽象类里面
- 抽象类和抽象方法用来定义标准(比如定义标准为:抽象类Animal有抽象方法eat,要求它的子类必须包含eat方法)
abstract class AnimalAbst{
public name:string;
constructor(name:string){
this.name=name;
}
abstract eat():any;
五、TypesSript接口
接口定义:接口是对传入参数进行约束;或者对类里面的属性和方法进行声明和约束,实现这个接口的类必须实现该接口里面属性和方法;typescript中的接口用interface关键字定义。
接口作用:接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现细节,它只规定这批类里必须提供某些方法,提供这些方法的类就可以满足实际需要。typescrip中的接口类似于java,同时还增加了更灵活的接口类型,包括属性、函数、可索引和类等。
内容概述:接口分类:(属性接口、函数类型接口、可索引接口、类类型接口),接口的继承
5.1 接口分类
5.1.1 属性接口
对传入对象的约束(也就是对json的约束)
在了解接口之前,我们来看看函数传入obj参数
function printLabel(labelInfo: {label:string}){
return labelInfo
}
和上面类似,由此引入属性接口 => 对方法传入参数进行约束
下面为属性接口的例子,方法printFullName对传入参数FullName(为对象)进行约束
interface FullName{
firstName: string;
属性接口应用:原生js封装ajax
interface Config{
type: string;
url: string;
data?: string;
dataType: string;
}
function ajax(config: Config) {
var xhr = new XMLHttpRequest
xhr.open(config.type, config.url, true)
xhr.send(config.data)
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
if(config.dataType == 'json'){
console.log(JSON.parse(xhr.responseText))
}else{
console.log(xhr.responseText)
}
}
}
}
ajax({
type: 'get',
data: 'name=xiaoming',
url: 'http://a.itying.com/api/productlist',
dataType: 'json'
})
5.1.2 函数类型接口
对方法传入的参数以及返回值进行约束
interface encrypt{
(key: string, value: string): string;
5.1.3 可索引接口
对索引和传入参数的约束(一般用于对数组、对象的约束)
ts中定义数组:
var arr1:number[] = [1,2]
var arr2:Array<string> = ['1', '2']
现在用接口来实现:
5.1.4 类类型接口
对类的约束,和抽象类抽象有点相似
interface Animal{
5.2 接口的继承
和类的继承一样,用extends实现接口继承
下面同时实现类的继承和接口的继承
interface Animal {
eat(): void;
}
六、TypesSript泛型
泛型定义:泛型定义:泛型就是解决类、接口、方法的复用性,以及对不特定数据类型的支持(类型校验)。ts中用T表示泛型。
泛型公式: <T>表示泛型,调用的时候指定T的数据类型
软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。
在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。
内容概述:内容概述:函数的泛型、类的泛型、泛型接口
6.1 函数的泛型
传入的参数类型和返回的参数类型可以指定
我们来看看函数用ts数据类型,想要同时返回string类型和number类型
function getData1(value:string):string{
return value;
}
function getData2(value:number):number{
return value;
}
这样要写不同的函数,不能按照需求返回不同类型数据,造成代码冗余 => 由此引入泛型
<T>表示泛型,调用的时候指定T的数据类型
function dataT<T>(value:T):T{
6.2 类的泛型
也是用<T>来实现类的泛型,new的时候指定T的数据类型
有个最小堆算法,需要同时支持返回数字和字符串两种类型
使用泛型之前:只能在类的类部指定数据类型,实现需求还要写一套string类型的类
class MinClass{
public list:number[]=[];
add(num:number){
this.list.push(num)
}
min():number{
var minNum=this.list[0];
for(var i=0;i<this.list.length;i++){
if(minNum>this.list[i]){
minNum=this.list[i];
}
}
return minNum;
}
}
var m=new MinClass();
m.add(1);
m.add(2);
alert(m.min());
使用泛型之后:只用一套类来实现
class MinClassT<T>{
public list:T[]=[];
add(value:T):void{
this.list.push(value);
}
min():T{
var minNum=this.list[0];
for(var i=0;i<this.list.length;i++){
if(minNum>this.list[i]){
minNum=this.list[i];
}
}
return minNum;
}
}
var m1=new MinClassT<number>();
6.3 泛型接口
有一个函数类型接口
interface ConfigFn{
(value:string):string;
}
var setData:ConfigFn = function(value:string):string{
return value
}
setData('name');
setData(20);写法错误,想要传入number类型的参数又要写一个函数类型接口 => 用泛型接口
泛型接口有两种写法:
示例代码请查看github,欢迎start https://github.com/dzfrontend...
|
请发表评论