这是我参与「第五届青训营」伴学笔记创作活动的第 4 天

TypeScript入门

TypeScript是源于JS，传统的JS是动态类型的弱类型语言语言，而TS是静态类型的弱类型语言。

动态类型和静态类型的区别

动态类型在执行阶段才能确定一个变量的类型，静态类型在编译阶段就会查出数据的错误，和java和go类似在编码的时候就能找到类型的错误。

TS的优势：

可读性增强：基于语法解析TsDoc，ide增强
可维护性增强：在编译阶段暴露大部分错误
多人合作项目中，获得更好的稳定性和开发效率
包含于兼容所有Js特征，支持共存
支持渐进式引入与升级

下面是Ts的数组示例:

/* 类型 + 方括号 表示该类型数组 */
type IArr1=number[];

/*泛型表示*/
type IArr2=Array<string | number | Record<string,number>>;

/*元组表示*/
type IArr3=[number,number,string,string]

/*接口表示*/
interface IArr4{
    [key:number]:any;
}

const arr1:IArr1=[1,2,3,4]
const arr2:IArr2=[1,'2',{a:1}]
const arr3:IArr3=[1,2,'3','4']
const arr4:IArr4=['string',()=>null,{},[]]

Ts的数据的类型都需要进行声明，type就是对类型的别名，通过构建声明出更加复杂的数据类型。

Ts的枚举类型：

/*空类型，表示无赋值*/
type IEmptyFunction = () => viod;

/*任意类型，是所有类型的子类型*/
type IAnytype=any

/*枚举类型：支持枚举值到枚举名的正反映射*/
enum EnumExample {
    add='+';
    mult='*'
}
EnumExample['add']==='+'
EnumExample['mult']==='*'

enum EColor {Mon,Tue,Wed,Thu,Fri,Sat,Sun}
EColor['Mon']===0
EColor[0]==='Mon'

对于TS的枚举类型支持正向索引和反向索引，在使用enum类型如果不初始值，会自动为其索引赋值。

TS的泛型：

function getRepeatArr(target){
    return new Array(100).fill(target)
}

/*错误方式*/
type TGetRepeatArr = {target:ang}=>any[]

/*在不确定返回类型时，而在使用时需要指定确定类型*/
type TGetRepeatArrR= <T>(target:T)=>T[];

/*接口泛型 & 多泛型*/
interface IX<T,U>{
    key:T
    val:U
}
/*泛型类*/
class IMan<T> {
    instance:T
}

在使用的才知道具体返回哪种类型，这时就需要使用泛型。使用方式和Java中的泛型类似。通过传入类型指定泛型T返回类型也为泛型T会为其进行相应的封装和类型的返回。

在泛型的使用的时候可以使用泛型的约束，确保传入的泛型为所需要的类型，返回的类型也是指定的类型。例如：

type IGetReaptStringArr=<T extends string>(target:T)=>T[]

const getStrArr:IGetRepeatStringArr=target=>new Array(100).fill(target)
//会出现报错。
getStrArr(123)

TS中的字符串|字面量

/*IDom必须为html,body,div,span其中之一*/
type IDom='html'|'body'|'div'|'span';

/*IOadd必须为1，3，5其中之一*/
type IOdd=1 |3|5

会限制类型的取值。

TypeScript高级数据类型

联合交叉类型

为书籍列表编写类型,会发现声明繁琐，存在较多的重复。

联合类型：IA | IB 联合类表示一个值可以是几种类型之一
交叉类型：IA & IB 多种类型叠加到一起成为一种类型。它包含了所需的所有类型的特征。

类型保护与类型守卫

访问联合类型时，为了程序安全只能访问联合类型中的交集部分。否则进行报错。

关键词keyof相对于取值对象中的所有key组成的字符串字面量如 type Ikeys = keyof {a:string;b:number}; 关键词in其相对于取字符串字面量中的一种可能，配合泛型P，即表示每个key，关键词？通过设定对象的可选选项。即可自动推导出子集类型

函数返回值类型

在使用的时候不能确定返回的类型。

关键词extends跟随泛型出现时，表示类型推断。其表达式可类比三元表达式。如T===判断类型？类型A:类型B。关键词infer出现在类型推荐中，表示定义类型变量，可以用于指代类型。

TypeScript与JavaScript的差异与优点｜ 青训营笔记

TypeScript入门

TypeScript高级数据类型

TypeScript与JavaScript的差异与优点｜青训营笔记