最近在跟着黄轶老师学习Vue3.0框架的源码,遇到了难啃的点就是typeScript的泛型反向推论。所以停下脚步找找资料加强学习typeScript的泛型模块。
基础部分
首先简单创建第一个使用泛型的例子:test
函数,这个函数会返回任何传入它的值。
// 不用泛型的情况function test(arg: number): number { return arg
}// 用泛型的情况function test<T>(arg: T): T { return arg
}
T是一种特殊的变量,只用于表示类型而不是值,即类型变量
。
定义了泛型函数后,可以用两种方法使用。
// 第一种传入所有的参数,包含类型参数let output = test<string>('myString')// 第二种使用普遍,利用了类型推论 -- 即编译器会根据传入的参数自动地帮助我们确定 T 的类型let output = test('myString')
泛型约束
我们有时候想操作某类型的一组值,并且我们知道这组值具有什么样的属性。在 下面的例子中,我们想访问 arg 的 length 属性,但是编译器并不能证明每种类型都有 length 属性,所以就报错了。
function test<T>(arg: T): T { console.log(arg.length) // Error
return arg
}
想要不报错,需要用到length属性,可以定义一个接口来描述约束条件,创建一个包含 .length
属性的接口,使用这个接口和 extends
关键字来实现约束:
interface LengthProp {
length: number}function test<T extends LengthProp>(arg: T): T { console.log(arg.length) // OK
return arg
}
现在这个test
泛型函数被定义了约束,因此它不再是适用于任意类型:
test(3); // Errortest({length: 1, value: 'demo'}) // OK
在泛型约束中使用类型参数
你可以声明一个类型参数,且它被另一个类型参数所约束。 比如,现在我们想要用属性名从对象里获取这个属性。 并且我们想要确保这个属性存在于对象 obj 上,因此我们需要在这两个类型之间使用约束。
function getProperty<T, K extends keyof T> (obj: T, key: K ) { return obj[key]
}let x = {a: 1, b: 2, c: 3, d: 4}
getProperty(x, 'a') // okaygetProperty(x, 'm') // error
小结
对于ts
依旧停留在学习的路上,没有在工作中项目上使用。个人觉得除非是工具库或者框架或大型项目才需要typescript的加持,不然我们就要衡量使用后的成本效率比了。当然这也是个人观点了,虽然我工作上还没用到,但也要去熟悉如何使用,密切关注日新月异前端动向。