这是我参与「第四届青训营 」笔记创作活动的的第5天,今天的课程主要讲解的是TypeScript的有关知识,对于我这种之前只写过JS的开发者而言,今天算是打开了新世界的大门了。
TS介绍
TypeScript 是 JavaScript 的一个超集,它包含了JS的所有特征,支持 ES6 标准,并且它相对于JS,增强了可读性,并且可维护性更强,能在代码编写阶段就解决绝大多数问题,在多人开发中能获得更好的稳定性和开发效率。
基本语法
定义变量
TS可以在变量定义之初给变量定义类型,在之后的编码过程中,必须严格按照定义的类型进行操作,否则之后会报错。
例如:
const a:string = "string"
const b:number = 0
对象类型
对于对象,可以通过一个interface对整个对象内部的属性的类型进行定义:
除了?:定义的属性,其余的均不可少。
函数类型
对于函数类型,我们需要定义它的变量类型,以及函数返回值的类型。
数组类型
数组类型我们可以给数组内部里的所有元素类型,之后数组内部的所有变量都必须按照定义的来,例如,定义一个number类型的数组:
type IArray1 = number[]
也可以通过泛型的方式定义一系列类型,这些类型可以用于数组内部元素:
type IArray2 = Array<String|number|Record<string,number>>
还可以对每一个元素进行类型定义:
type IArray3 = [number,number,string,string];
最后也可以像上面一样,用接口的形式定义:
interface IArray4{
[key:number]:any
}
以上几种写法对应如下:
泛型
function identity<T>(arg: T): T {
return arg;
}
如上,我们给identity添加了类型变量T。 T帮助我们捕获用户传入的类型(比如:number),之后我们就可以使用这个类型。 之后我们再次使用了 T当做返回值类型。现在我们可以知道参数类型与返回值类型是相同的了。 这允许我们跟踪函数里使用的类型的信息。
我们定义了泛型函数后,可以用两种方法使用。
- 第一种是,传入所有的参数,包含类型参数:
let output = identity<string>("myString"); // type of output will be 'string'
- 第二种方法更普遍。利用了类型推论 -- 即编译器会根据传入的参数自动地帮助我们确定T的类型:
let output = identity("myString"); // type of output will be 'string'
我们也可以对泛型的类型进行约束或者默认: