TypeScript泛型学习

最近在跟着黄轶老师学习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的加持，不然我们就要衡量使用后的成本效率比了。当然这也是个人观点了，虽然我工作上还没用到，但也要去熟悉如何使用，密切关注日新月异前端动向。