TypeScript泛型
- 2019 年 10 月 3 日
- 筆記
泛型的概念
指不预先确定的数据类型，具体的类型要在使用的时候才能确定。咋一听，是不是觉得JavaScript本身就是这样？这是由于理解有误。前面说“在使用的时候确定”，而非在程序执行的时候确定。
泛型函数
现在有个需求：一个被定义的函数原本输入字符串输出字符串，现在想让它同时支持输入输出字符串数组，如何实现？
1.通过函数重载
// 函数调用时依照声明的顺序进行匹配 function log(value: string): string; function log(value: string[]): string[]; function log(value: any): any{ console.log(value); return value; } log("abc"); log(["10","abc"]);
2.使用联合参数
function logs(value: string | string[]): string | string[]{ return value }
以上两种都OK，但是不够简洁，不够灵活。下面使用泛型。
function log1<T>(value: T): T{ return value } 等价于 let log1 = <T>(value: T) => { return value }; log1<string>("hello"); // 调用的时候指定类型 log1<string[]>(["hi","ha"]);
泛型接口
// 要注意<T>的位置，前者在使用时必须指定类型，后者在使用时无须指定类型 interface Log<T> { (value: T): T; } let log3: Log<number> = (v) => { console.log("必须指定类型",v);return v }; log3(12); interface Log{ <T>(value: T): T; } let log3: Log = (v) => { console.log("无须指定类型",v);return v}; log3<number>(10); // 无须指定类型，如果要指定类型，在调用的时候指定 log3(5);
泛型类
对类的成员进行约束，注意不能约束静态成员。
class Log<T> { run(value: T) { console.log(value); return value } } let log1 = new Log<number>(); // 可以进行约束 log1.run(1); let log2 = new Log(); // 也可以不进行约束 log2.run("2");
泛型约束
泛型约束是指，传入的参数必须符合约束，不符合约束的参数无法传入。
function log<T>(value: T):T{ console.log(value.length); // 如果访问.length属性，TS编译器会报错，因为不知道value有没有这个属性 return value } 此时使用泛型约束 interface Length { length: number; type?: string; } // extends Length表示允许value参数通过.操作符访问Length中定义的属性 function log<T extends Length>(value: T): T{ console.log(value, value.length,value.type); return value } // 所有具有length属性的值，都可以被当做参数传入log函数 log([1,2,3]); log("123"); log({length: 1});
在这个例子中，约束传入的参数必须具有length属性
使用泛型有什么好处？
- 函数和类可以支持多种类型，增强程序的扩展性。
- 不必写多条函数重载、冗长的联合类型声明，增强代码可读性。
- 灵活控制类型之间的约束
