Typescript基础|青训营笔记

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

一、Typescript特征

1. 静态类型

• 可读性增强：基于语法解析TSDoc,ide增强
• 可维护性增强：编译阶段暴露大部分错误

2. JS的超集

• 兼容所有JS特效
• 支持渐进式引入与升级

二、数据类型

1. 基础数据类型

const q: string = 'string'

2. 对象类型

const bytedancer: IBytedancer = {
    jobId:93033,
    name:'Lin',
    hobby: 'swimming',
}

interface IBytedancer {
    //只读属性：约束属性不可在对象初始化外赋值
    readonly jobId: number;
    name: string;
    //可选属性：定义该属性可以不存在
    hobby?: string;
    //任意属性：约束所有对象属性都必须是该属性的子类型
    [key: string]: any;
}

//成功:任意属性标注下可以添加任意属性
bytedancer.plateform = 'data'

3. 函数类型

function add(x:number, y:number):number{
    return x+y;
}

4. 数组类型

//类型＋方括号
type IArr1 = number[];
//泛型表示
type IArr2 = Array<string|number|Record<string,number>>
//元组表示
type IArr3 = [number, number, string, string];
//接口表示
interface IArr4 {
    [key:number]: any;
}

三、高级类型

1. 联合/交叉类型

• 联合类型：IA|IB; 表示一个值可以是几种类型之一
• 交叉类型：IA&IB; 包含所需的所有类型的特性

2. 类型保护与类型守护
3. 函数的返回值类型

四、个人总结

ts相对于js来说更严谨，比如定义变量时需要对变量进行类型声明。同时它可以通过interface对对象进行定义，通过type对数组类型进行声明。对于进阶版的ts，它可以根据一些高级数据类型实现意想不到的效果。