TypeScript 了解

102 阅读2分钟

资料

文字版:ts.xcatliu.com/introductio…

视频版:www.bilibili.com/video/BV1wY…

总结

TypeScript 是完全兼容 JavaScript 的,它不会修改 JavaScript 运行时的特性,所以它们都是弱类型。 TypeScript 代码在编译阶段就会报错,提示我们代码错误,并且更易维护代码

初始TypeScript

image.png

编写TypeScript

image.png

基础

原始数据类型 boolean number string null undefined symbol(es6) BigInt(es10)

类型推论

image.png

联合类型

image.png

接口 interface

image.png

数组的类型

image.png

函数类型

函数声明,函数表达式

image.png

用接口定义函数的形状

interface SearchFunc { 
(source: string, subString: string): boolean;
} 
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) { 
return source.search(subString) !== -1; 
} 
采用函数表达式|接口定义函数的方式时,对等号左侧进行类型限制,可以保证以后对函数名赋值时保证参数个数、参数类型、返回值类型不变。

可选参数

image.png

参数默认值

image.png

剩余参数

image.png

重载

image.png

类型断言

类型断言不是类型转换,它不会真的影响到变量的类型

image.png

继承

image.png

image.png

image.png

TypeScript 进阶

image.png

进阶

类型别名 type

image.png

字符串字面量类型

image.png

元组

越界的元素

当添加越界的元素时,它的类型会被限制为元组中每个类型的联合类型:

let tom: [string, number];
tom = ['Tom', 25]; 
tom.push('male'); 
tom.push(true); // Argument of type 'true' is not assignable to parameter of type 'string | number'.

image.png

image.png

image.png

抽象类 abstract

image.png

image.png

泛型

泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性

我们在函数名后添加了 ,其中 T 用来指代任意输入的类型,在后面的输入 value: T 和输出 Array 中即可使用了

image.png

image.png

image.png

声明合并

如果定义了两个相同名字的函数、接口或类,那么它们会合并成一个类型

image.png

image.png

image.png