摘要：往期第一课体验第二课基础类型和入门高级类型第三课泛型第四课解读高级类型插一课本来打算接着上节课把高级类型都讲完但是写着写着我发现高级类型中有很多地方都需要泛型的知识那么先插一节泛型什么是类型变量和泛型变量的概念我们都知道可以表示任意数据类型
往期
第一课, 体验typescript
第二课, 基础类型和入门高级类型
第三课, 泛型
第四课, 解读高级类型
插一课本来打算接着上节课, 把高级类型都讲完, 但是写着写着我发现高级类型中, 有很多地方都需要泛型的知识, 那么先插一节泛型.
什么是"类型变量"和"泛型"变量的概念我们都知道, 可以表示任意数据, 类型变量也一样, 可以表示任意类型:
// 在函数名后面用"<>"声明一个类型变量 function convert(input:T):T{ return input; }
convert中参数我们标记为类型T, 返回值也标记为T, 从而表示了: 函数的输入和输出的类型一致. 这样使用了"类型变量"的函数叫做泛型函数, 那有"泛型类"吗?
注意: T是我随便定义的, 就和变量一样, 名字你可以随便起, 只是建议都是大写字母,比如U / RESULT.
class Person {
who: U;
constructor(who: U) {
this.who = who;
}
say(code:U): string {
return this.who + " :i am " + code;
}
}
在类名后面通过"<>"声明一个类型变量U, 类的方法和属性都可以用这个U, 接下来我们使用下泛型类:
let a = new Person("詹姆斯邦德"); a.say(007) // 错误, 会提示参数应该是个string a.say("007") // 正确
我们传入了类型变量(string),告诉ts这个类的U是string类型, 通过Person的定义, 我们知道say方法的参数也是string类型, 所以a.say(007)会报错, 因为007是number. 多以我们可以通过传入类型变量来约束泛型.
其实我们也可以不指定类型变量为string, 因为ts可以根据实例化时传入的参数的类型推断出U为string类型:
let a = new Person("詹姆斯邦德");
// 等价 let a = new Person("詹姆斯邦德");
a.say(007) // 错误, 会提示参数应该是个string
a.say("007") // 正确
其实方法和函数的定义方式一样:
class ABC{
// 输入T[], 返回T
getFirst(data:T[]):T{
return data[0];
}
}
说实话ts的文档我找了好几遍, 也没看到他给泛型正式做定义, 只是表达他是一种描述多种类型(类型范围)的格式, 我觉得有点抽象, 我用自己的理解具象下: 用动态的类型(类型变量)描述函数和类的方式.
泛型类型我们可以用类型变量去描述一个类型(类型范围), ts的数组类型Array本身就是一个泛型类型, 他需要传递具体的类型才能变的精准:
let arr : Array; arr = ["123"]; // 错误, 提示数组中只可以有number类型 arr = [123];
下面我们自己定义一个泛型类型, 就对开头的convert函数定义:
function convert泛型接口(input:T):T{ return input; } // 定义泛型类型 interface Convert { (input:T):T } // 验证下 let convert2:Convert = convert // 正确不报错
通过传入不同的类型参数, 让属性更灵活:
interface Goods扩展类型变量(泛型约束){ id:number; title: string; size: T; } let apple:Goods = {id:1,title: "苹果", size: "large"}; let shoes:Goods = {id:1,title: "苹果", size: 43};
function echo(input: T): T { console.log(input.name); // 报错, T上不确定是否由name属性 return input; }
前面说过T可以代表任意类型, 但对应的都是基础类型, 所以当我们操作input.name的时候就需要标记input上有name属性, 这样就相当于我们缩小了类型变量的范围, 对泛型进行了约束:
// 现在T是个有name属性的类型 function echo一个泛型的应用, 工厂函数(input: T extends {name:string}): T { console.log(input.name); // 正确 return input; }
