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

本堂课重点内容

本节课对TS进行了简单入门

详细知识点介绍

TS的优势

静态类型：

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

JS的超集：

• 兼容所有JS特性，支持共存
• 支持渐进式引入与升级

基本语法

基础数据类型与对象类型

 const q: string = 'string';
 const w: number = 1;
 const e: boolean = false;
 const r: null = null;
 const t:undefined = undefined;
 interface IB{
     /* 只读属性：约束对象不可再对象初始化外进行赋值 */
     readonly jobId: number;
     name: string;
     sex: 'man' | 'woman';
     age:number;
     /* 可选属性 */
     hobby?: string;
     /* 任意属性：约束所有对象属性都必须是该属性的子类型 */
     [key : string]: any;
 }
 const bytedancer: IB ={
     jobId: 9999,
     name: 'Lin',
     sex:'man',
     age:28,
     hobby:'swimming'
 }
 /* 只读属性不能分配值 */
 bytedancer.jobId = 12345;
 bytedancer.plateform = 'data';

函数类型

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

函数重载

 interface IGetDate {
     (type: 'string', timestamp?: string): string;
     (type: 'date', timestamp?: string): Date;
     (type: 'string' | 'date', timestamp?: string): Date | string;
 }

• 不能将(any,any)=>string|Date这种类型分配给IGetDate
• 需要让IGetDate的表达范围更大

数组类型

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

<>表示数组元素类型

一般来说使用前两种类型进行数组定义。

TS补充类型

• void：空类型，表示无赋值
• any：任意类型，是所有类型的子类型
• enum：枚举类型，支持枚举值到枚举名的正反向映射

TS泛型

 type IGetRepeatArr = (target: any)=>any[];
 type ISetRepeatArr2 = <T>(target: T)=>T[];
 /* 泛型接口 & 多泛型 */
 interface IX<T,U>{
     key:T;
     value:U;
 }
 /* 泛型类 */
 class IMan<T>{
     instance:T;
 }
 /* 泛型别名 */
 type ITypeArr<T> = Array<T>;

对于不明确类型，注意区分泛型和any。

函数的<>在前，而类型和接口的则在后。

 /* 限制泛型必须符合字符串 */
 type IGetStringArr = <T extends string>(target:T) =>T[];
 /* 泛型参数默认类型 */
 type IGetRepeatArr<T=number> = (target:T) => T[];
 const getRepeatArr:IGetRepeatArr = target =>new Array(100).fill(target);
 /* 默认类型是number，报错 */
 getRepeatArr("123");

类型别名与断言

 /*通过type关键字定义了IObjArri的别名类型*/
 type IObjArr=Array<{key:string;[objKey:string]:any;}>
 function keyBy<T extends IObjArr>(objArr:Array<T>){
     /*未指定类型时，result类型为{}*/
     const result = objArr.reduce((res,val,key)=>{
         res [key] = val;
         return res;
     },{});
     /*通过as关键字，断言result类型为正确类型*/
     return result as Record<string,T>;
 }

这里的result类型并不符合预期，我们可以使用as关键字进行类型断言，断言其为正确类型。

高级类型

联合/交叉类型

一个包含了两种类型书目的数组

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