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

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页

打赏作者

The härder

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值