19. TypeScript 函数泛型(难点)

泛型我个人认为是 TypeScript 利的一个难点,我第一次学完后根本不能完全理解,所以从这节开始,我们应该算是一个进阶教程了,难度也开始上来了,如果你一遍看不太明白,可以反复看几次,然后多做练习。

编写一个联合类型 Demo

现在跟着我做一个简单的join方法,方法接受两个参数firstsecond,参数有可能是字符串类型,也有可能是数字类型。方法里为了保证都可以使用,所以我们只作了字符串的基本拼接。

function join(first: string | number, second: string | number) {
  return `${first}${second}`;
}
join("mybj123", ".com");

这个方法现在没有任何问题,但现在有这样一个需求,就是first参数如果传的是字符串类型,要求second也传字符串类型。同理,如果是number类型,就都是number类型。

那现在所学的知识就完成不了啦,所以需要学习泛型来解决这个问题。

初始泛型概念-generic

泛型:[generic – 通用、泛指的意思],那最简单的理解,泛型就是泛指的类型。

泛型的定义使用<>(尖角号)进行定义的,比如现在给join方法一个泛型,名字就叫做Mybj(演示你可以随便起一个名字,但工作中要进行语义化。),后边的参数,这时候他也使用刚定义的泛型名称。然后在正式调用这个方法时,就需要具体指明泛型的类型啦。

function join<Mybj>(first: Mybj, second: Mybj) {
  return `${first}${second}`;
}
join < string > ("mybj123", ".com");

如果要是number类型,就直接在调用方法的时候进行更改就可以了。

join < number > (1, 2);

这就是最简单的泛型理解,因为在实际开发中,有很多对象和类的情况,里边的具体类型我们没办法了解,所以提供了这种泛型的概念。

泛型中数组的使用

如果传递过来的值要求是数字,如何用泛型进行定义呢?两种方法,第一种是直接使用[],第二种是使用Array<泛型>。形式不一样,其他的都一样。

第一种写法:

function myFun<ANY>(params: ANY[]) {
  return params;
}
myFun < string > ["123", "456"];

第二种写法:

function myFun<ANY>(params: Array<ANY>) {
  return params;
}
myFun < string > ["123", "456"];

在工作中,我们经常使用<T>来作泛型的表示,当然这不是硬性的规定,只是大部分程序员的习惯性写法。

多个泛型的定义

一个函数只能定义一个泛型吗?当然不是,是可以定义多个的,这里还是拿join方法举例,定义多个泛型,比如第一个泛型用T,第二个用P代表。

function join<T, P>(first: T, second: P) {
  return `${first}${second}`;
}
join < number, string > (1, "2");

会了两种,你也就会了三种以上,泛型在造轮子的时候经常使用,因为造轮子很多东西都需要灵活性。泛型给了我们很好的灵活性。需要注意的是,如果函数定义了多个泛型,使用时要对应的定义出具体的类型。

泛型的类型推断

泛型也是支持类型推断的,比如下面的代码并没有报错,这就是类型推断的功劳。

function join<T, P>(first: T, second: P) {
  return `${first}${second}`;
}
join(1, "2");

但个人不建议去大量使用类型推断,这会让你的代码易读和健壮性都会下降,所以这个知识点,大家做一个了解就可以了。

好了,这就是本文的内容了,希望小伙伴们下去一定要练习一下,加深理解。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 19. TypeScript 函数泛型(难点)

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们