typescript

官网：https://www.tslang.cn/

1.介绍

TypeScript是js的超集，由微软开发和开源的。

通俗的理解为js的一个特殊版本，其语法规范严谨，适用于开发大型项目。

2.搭建环境

(1)安装

npm i typescript -g

(2)验证是否安装成功

tsc -v

(3)编译

①手动编译

创建一个index.ts,并在其中写一行普通的js代码

在命令行中进入指定的目录，执行tsc index.ts进行编译，在同级目录下会生成一个同名的js文件

②自动编译vscode

生成ts的配置文件

tsc --init

此时就会在指定的目录下生成一个tsconfig.json文件

修改配置文件

“outDir”:’./'注释接口

编写index.ts

vscode->终端->运行生成任务->tsc:监视

这样在index.ts文件，编写了内容，就会自动生成对应的ts文件

在根目录下创建一个index.html并引入生成的好的js文件

3.声明变量和数据类型

ts最大的特点就是进行了严谨的数据类型验证，要求我们在声明一个变量的时候，就定义好该变量的数据类型，且赋值的内容，必须和对应的数据类型保持一致

(1)声明变量

格式：

let 变量名:数据类型 = 内容; let 变量名:数据类型;

错误用法：

let str:string; str = 123;//此时会报错，数据类型不致

(2)数据类型

①字符串

let str:string="初始ts";//值必须为字符串

②数值

let num:number = 100;//值必须为数值

③布尔值

let isbol :boolean = true;//值必须为布尔值

④数组

原生

let arr = []； let arr2 = new Array;

ts方式：ts定义数组，需要定义数组内元素数据类型

let arr3:string[] arr = ['12'] let arr4:Array<number>= [11,22,33];

新增类型

①元组类型

元组类型是数组类型的子类型，表示一个已知元素数量和类型的数组，各元素类型可以不一样

let 变量名:[数据类型1，数据类型2,...] = [值1，值2，...] let arr5:[string,number,boolean] = ['hello',1,true]

②any

any类型，表示任意类型，如果不确定我们的变量，就可以使用any类型

let obj:any = { 'name':'刘飞', age:20 } let arr6:any = []; arr6[1] = "111";

③枚举类型

表示值是某些固定值中的一些

比如：性别，男、女；订单状态：已下单，已发货，已收货

格式：

enum 变量名 { 值1, 值2 }

④void

一般应用于函数，表示函数无返回值

⑤never

表示那些永远不存在的数据类型

function error(msg:string):never{ throw new Error(msg) }

⑥object

object表示非原始类型，也就是除了number,string,boolean,array,null,undefined之外的类型

4.函数

ts中的函数知识和es6中的函数有很多相同之处

(1)函数定义

在ts中，定义一个函数需要定义函数的返回值类型，如果没有返回值则类型为void，如果有参数也要指定参数的数据类型

function 函数名([参数名:参数的数据类型])：函数返回值的数据类型

示例代码

function add(num:number):void{//函数无返回值 console.log(num); } //函数的返回值类型是数字 function add(num:number):number{ return num+=10 }

②可选参数

可选参数如果没有传递，在函数中仍然用到了这个参数，则它的值为undefined

function hello(str:string,txt?:string):string{ return str+txt; } console.log(hello('你好','ts'))

③剩余参数

替代传统函数中的arguments的作用

剩余参数需要是所有参数中的最后一位，不然就做不到剩余

function family(main:string,...child:string[]):string{ return '户主:'+main+',家庭成员：'+child.join(' '); } console.log(family('小王','王一','王二','王三'))

4.类

ts中相关类的知识和ES6中非常相似

class Person{ name:string; constructor(username:string){ this.name = username; } speak(language:string,language2?:string):void{ console.log(`${this.name}会说${language}`) } }

(2)类的继承

使用extends关键词

class Chinese extends Person{ constructor(username:string){ super(username) } speak(language1:string,language2:string){ console.log(`${this.name}会说${language1},${language2}`) } } let p1 = new Chinese('张飞'); p1.speak('汉语','应语')

(3)类的修饰符

public,共有属性[默认],在当前类里面，子类、类的外部都可以访问

protected，受保护的，当前类里，子类可以访问，在类的外部无法访问

class Teacher{ protected name:string; constructor(name:string){ this.name=name; } teach():string{ return `${this.name}在讲课` } } let t1 = new Teacher('李老师'); console.log(t1.teach()); // console.log(t1.name);//在类的外部无法直接访问一个受保护的属性 class WebTeacher extends Teacher{ constructor(name:string){ super(name) } teach():string{ return `${this.name}在讲课---子类` } } let t2 = new WebTeacher('范老师'); console.log(t2.teach());

private,私有，只能在当前类里面访问，不能在子类、类外部访问

class Student{ private name:string; constructor(name:string){ this.name = name; } study():string{ return `${this.name}在学习`//可以在当前类中调用私有属性 } } class MidStudent extends Student{ constructor(name:string){ super(name) } homework():void{ console.log(this.name+'在写作业');//报错，只能在Student里访问 } }

(4)类的其他修饰符

①静态属性和方法

静态属性或静态方法，使用static修饰符，调用属性或方法时，不需要实例化类

通过类名.静态属性或者静态方法直接使用

// 静态属性和方法 class Util{ static desc:string = "工具类" static getTime(time:number):string{ let d = new Date(time); return d.toLocaleTimeString(); } } console.log(Util.desc) // 调用类中静态方法 console.log(Util.getTime(new Date().getTime()))

②抽象类

抽象类一般作为其派生类的基类使用，它们一般被直接实例化，一般用来定义标准

abstract关键词，抽象类中必须有抽象方法，抽象方法不实现具体功能，它只做约束。非抽象方法必须自己实现功能

在子类中一旦继承了抽象类，抽象类中的抽象方法，就必须在子类中实现具体的功能。

abstract class Car { abstract drive():any; abstract stop():any; run():void{ console.log('汽车在跑') } } class BMW extends Car { drive():void{ console.log('这辆宝马在路上驾驶') } stop():void{ console.log('这辆宝马在路上停止了') } } let c1 = new BMW(); c1.drive();

5.接口

function tt(str:string):void{ console.log(str) } tt('1111');

在上述代码中，只能校验一个变量的数据类型

如果传递的参数数量比较多或者是一个对象，那么这个函数的参数就无法实现校验

接口(Interface)是类中的一个很重要的概念，他是对行为的抽象,而具体如何实现需要由类(class)实现(implements)

(1)接口定义

interface Personal{ name:string, age:number } let pp1:Personal; pp1 = { name:'小芳', age:18 }

(2)类的接口

interface Animal{ name:string; eat(str:string):void; } class Horse implements Animal{ name:string; constructor(str:string){ this.name=str; } eat():void{ console.log(this.name+'在吃粮草'); } } let hxbm = new Horse('汗血宝马')

6.装饰器

装饰器是一种特殊的类型声明，他可以被附加到类、方法、属性、参数上面，可以改变类的行为。

装饰器就是一个方法或者说是一个特殊的函数，可以被注入到类、方法、属性、参数上。

装饰器分类：类装饰器、方法装饰器、属性装饰器、参数装饰器

装饰器也是ES7里面的标志特性之一。

(1)类装饰器

类装饰器实在声明类之前(紧靠类的声明处)，类装饰器应用于类的构造函数，可以用来监视、修改或替换类的定义

①普通装饰器

定义装饰器

//1.普通装饰器(无法传参数) function logClass(params:any){ params.prototype.url="请求的连接地址"; params.prototype.run=function(){ console.log('run') } }

使用装饰器

@logClass class HttpClient { name:string; constructor(n:string) { this.name=n; } } let http:any = new HttpClient('test'); console.log(http.url); http.run()

②装饰器工厂(可以传递参数)

定义装饰器

function logClass(params:string){ return function(target:any){ console.log(target,111) console.log(params,222) target.prototype.url = "接口地址是"+params; } }

使用装饰器

@logClass('www.ujiuye.com') class HttpClient { name:string; constructor(n:string) { this.name=n; } } let http:any = new HttpClient('test'); console.log(http.url);

(2)属性装饰器

定义属性装饰器

function logProperty(params: any) { return function (target: any, attr: any) { console.log(target, 3)//类对象 console.log(attr, 4)//属性装饰器修饰的属性名 console.log(params, 5)//调用属性装饰器时传递的参数 target[attr] = params } }

使用属性装饰器

class HttpClient { @logProperty('张辽')//调用属性装饰器并传递参数 name: string | undefined; } let http: any = new HttpClient();

(3)方法装饰器

可以被运用到方法的属性描述上，可以用来监视、修改、替换方法定义

运行时，需要传递三个参数

(1)对应静态类成员来说就是类的构造函数，对于实力成员来说就是类的原型对象

(2)成员(属性)的名字

(3)成员的属性描述

定义方法装饰器

function logMethod(params:any){ return function(target:any,methodName:any,desc:any){ console.log(target,6)//类的原型 console.log(methodName,7)//方法名称 console.log(desc.value,8)//方法的描述 target.run = function(){ console.log('run') } } }

使用方法装饰器

@logClass('www.ujiuye.com') class HttpClient { @logProperty('张辽') name: string | undefined; url:string | undefined; constructor() {} @logMethod('111') getData(){ console.log(this.url); } } let http: any = new HttpClient(); http.run()

(4)参数装饰器

运行时，会被当做函数调用，可以使用参数装饰器为类的原型增加一些元素数据，需要传递三个参数

(1)对应静态类成员来说就是类的构造函数，对于实力成员来说就是类的原型对象

(2)方法名称

(3)参数在函数列表中的索引

定义参数装饰器

function logParams(params:any){ return function(target:any,methodName:any,paramsId:any){ console.log(target,9)//类的原型 console.log(methodName,10)//方法名称 console.log(paramsId,11)//参数的索引位置 } }

使用参数装饰器

class HttpClient { @logProperty('张辽') name: string | undefined; url:string | undefined; constructor() {} @logMethod('111') getData(@logParams('1111') str:any){ console.log(this.url); } }