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

TypeScript的发展与基本语法

01.为什么是TyepScript

历史发展：
2016-05，TypeScript可开发React
2020-09，Vue发布了3.0版本，官方支持TypeScript

TS是静态类型语言、弱类型语言
静态类型：提前进行类型的匹配
动态类型：执行阶段确定类型的匹配，JS是动态类型
弱类型语言：隐式类型转换

静态类型的特点：

可读性增强：基于语法解析TSDoc，ide增强
可维护性增强：在编译阶段暴露大部分错误
多人合作的大型项目中，获得更好的稳定性和开发效率

JS的超集

包含于兼容所有JS特性，支持共存
支持渐进引入与升级

02.基本语法

基本数据类型

字符串
const q: string = 'stirng';
数字
const w: number = 1;
布尔值
const e: boolean = true;
null
const r: null = null;
undefined
const t: undefined = undefined;

对象类型

自定义类型：interface 类型名称
any：所有类型

const bytedancer: Ibytedancer = {
    jobId: 123123,
    name: 'Ling',
    sex: 'man',
    age: 28,
    hobby: 'swimming'
}

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

函数类型

写法一：

interface IMult {
    (x: number, y: number): number;
}
const mult: IMult = (x,y) => x * y;

写法二：

function add(x: number, y: number): number{
    return x + y;
}
const mult: (x: number, y: number) => number = (x,y) => x * y;

数组类型

//type + 方括号 表示
type IArr1 = number[];
//泛型类型
tpe 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,5,6];
const arr2: IArr2 = [1,2,'3','4',{a: 1}];
const arr3: IArr3 = [1,2,'3','4']'
const arr4: IArr4 = ['string', () => null, {}, []];

TypeScript高级数据类型

03.高级类型

联合/交叉类型

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

type IBookList = ARray<{
    author: string;
} & ({
    type: 'history';
    range: string;
} | {
    type: 'story';
    theme: string'
})>

高级类型

interface IMerge{
    <T extends Record<string, any>>(sourceObj: Partial<T>, targetObj: T): T;
}
type IPartial<T extends Record<string, any>> = {
    [P in keyof T]?: T[P];
}
//索引类型：关键字【keyof】，其相当于取值对象中的所有key组成的字符串字面量，如
type IKeys = keyof {a: sring; b: number};   // ==> type IKeys = "a" | "b"
//关键字【in】，其相当于取址 字符串字面量中的一种可能，配合泛型P，即表示每个key
//关键字【？】，通过设定对象可选选项，即可自动推导出子集类型

[ React | 青训营笔记 ]