从上面的信息概括为泛型是支持多种类型的变量,根据用户需求灵活的变动,达到复用的效果。 在实际开发中,函数是同样的逻辑,只是因为类型的不同,可能要再写一个函数,这样的问题很糟糕。正好泛型就可以用来解决这种问题。
举例
现在有一个处理数组的函数,这里只是简单的返回,当做进行处理
代码语言:javascript复制function formatArr(arr:Array<string>):Array<string>{
return arr.map(item=>item)
}
如果这时候有其他类型的数组需要同样的操作,而 formatArr
只接受字符串数组,我们有什么方法来解决呢?
第一种:any
函数接受一个任意类型的数组,这确实能够解决问题,但是也失去了类型检查的意义
代码语言:javascript复制function formatArr(arr:Array<any>):Array<any>{
return arr.map(item=>item)
}
第二种:重新定义函数
再写一个同样逻辑的函数,这看起来就不妥。如果还要接受更多的类型,而函数内部的逻辑复杂,这样重复定义多个同样逻辑的函数,会显得代码的冗余
代码语言:javascript复制function formatArr2(arr:Array<number>):Array<number>{
return arr.map(item=>item)
}
正解:泛型
泛型函数的类型与非泛型函数的类型没什么不同,只是声明一个类型参数在最前面。因为类型参数相当于变量,我们不必在函数定义时就定义类型,而是执行时由使用者规定类型。
代码语言:javascript复制function formatArr<T>(arr:Array<T>):Array<T>{
return arr.map(item=>item)
}
formatArr<string>(['1', '2', '3'])
formatArr<number>([1, 2, 3])
定义函数 formatArr
时,在函数名后定义一个类型参数 <T>
,同时参数数组项也接受 T
类型的值。
在使用函数时,使用者传入的类型即为 T
的类型。
尖括号内的变量名并不是固定的,可以自定义,一般都是大写
泛型类
泛型类实例化传入的泛型类型,可以在整个作用域中使用该泛型类型,但要注意的是类的静态属性无法使用泛型类型
代码语言:javascript复制class Handsome<T>{
static myname:T = 'Jack' // 静态成员不能引用类类型参数
girlfriend: Array<T>
constructor(){
this.girlfriend = []
}
addGirlfriend(name:T){
this.girlfriend.push(name)
}
getAllGirlfriend():Array<T>{
return this.girlfriend
}
}
代码语言:javascript复制let handsome = new Handsome<string>()
handsome.addGirlfriend('Julia')
handsome.addGirlfriend('Vivian')
//handsome.addGirlfriend({name:'Ellie'}) 类型“{ name: string; }”的参数不能赋给类型“string”的参数
handsome.getAllGirlfriend() // ['Julia', 'Vivian']
泛型接口
使用含有泛型的接口来定义函数
代码语言:javascript复制interface CreateArrayFunc {
<T>(length: number, value: T): Array<T>;
}
let createArray: CreateArrayFunc;
createArray = function<T>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i ) {
result[i] = value;
}
return result;
}
createArray(3, 'x'); // ['x', 'x', 'x']
泛型参数提前到接口名
代码语言:javascript复制interface CreateArrayFunc<T> {
(length: number, value: T): Array<T>;
}
let createArray: CreateArrayFunc<string>;
createArray = function<T>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i ) {
result[i] = value;
}
return result;
}
createArray(3, 'x'); // ['x', 'x', 'x']
这种方式使用泛型接口的时候,需要定义泛型的类型
接口范围内的泛型
看到上面这两种方式定义函数,使用起来差不多,可能你会有个疑问,它们有什么区别,哪种更好?(我第一次看到的时候也会有这个疑问) 接下来,我用第二种方式再写一个例子,看看它们的区别在哪里。
代码语言:javascript复制interface People<T>{
name: T;
friends: Array<T>;
say: (msg:T)=>T
}
let student:People<string> = {
name: 'Joe',
friends: ['Mike','James','LuLu'],
say: function(msg){
return this.name ':' msg
}
}
就像泛型类一样,当你需要在接口范围内多次用到泛型参数时,可以将它提前到接口名。
总的来说,以这种方式定义接口,可以统一接口内的类型,控制内部多个属性的参数类型。是不是这种就更好?不一定,如果你的需求只会用到一次泛型参数时,那就不必把泛型参数提前到接口名,因为在多人协同合作中,可能会引起其他使用者的误会。
泛型约束
泛型约束提供更智能的类型推导,为类型提供扩展。有时候我们希望泛型参数符合某些规则时,你应该想到使用泛型约束来解决问题。
基于接口约束
使用泛型约束来对 formatArr
做一些改造,改造后的函数功能为对传入的参数进行切片,返回除第一项的数据。但并不是每个类型都有 slice
方法,这时候就需要对泛型进行约束,规定只有 slice
方法的参数才可以传入。为此,定义一个含有 slice
方法的接口,使用这个接口和 extends
关键词实现约束。
interface Slice{
slice:Function;
}
function formatArr<T extends Slice>(arg:T):T{
return arg.slice(1)
}
formatArr([1,2,3])
formatArr('hello')
keyof约束
再来看一个泛型约束的例子,为函数定义两个泛型类型,T
类型为对象,keyof定义U
类型为T
类型上的一个key值。在使用该函数,ts会进行类型推导,提示你第二个参数应该为第一个参数上的key值。
function getValue<T extends object, U extends keyof T>(obj:T, key:U){
return obj[key]
}
let obj = {
color: 'white',
size: 'big'
}
getValue(obj, "color") //ok
getValue(obj, "name") //error 类型“"name"”的参数不能赋给类型“"color" | "size"”的参数
上面的例子可能你会想到接口继承,因为接口继承也使用了 extends
关键词,要注意在泛型约束里extends
并不是表示继承关系。
泛型参数的默认类型
在 TypeScript 2.3 以后,我们可以为泛型中的类型参数指定默认类型。当使用泛型时没有在代码中直接指定类型参数,从实际值参数中也无法推测出时,这个默认类型就会起作用。就像 ES6 中的函数默认参数一样,为代码增加健壮性。
代码语言:javascript复制function createArray<T = string>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i ) {
result[i] = value;
}
return result;
}
写在最后
通过以上使用泛型的几个例子,不难发现泛型的强大,可变的类型变量和泛型约束为 TypeScript 的类型推导都提供了很大的贡献。开发者根据类型提示能轻松知道怎么调用其他开发者封装的方法,像是基于文档编程的感觉,这也是为什么我们说在多人开发中,TypeScript 可以提高开发效率。类型是 TypeScript 的核心,也是它的魅力所在。理解并应用泛型,可以使我们的 TypeScript 水平更上一层楼。