19. TypeScript 函数泛型(难点)
泛型我个人认为是 TypeScript 利的一个难点,我第一次学完后根本不能完全理解,所以从这节开始,我们应该算是一个进阶教程了,难度也开始上来了,如果你一遍看不太明白,可以反复看几次,然后多做练习。
编写一个联合类型 Demo
现在跟着我做一个简单的join
方法,方法接受两个参数first
和second
,参数有可能是字符串类型,也有可能是数字类型。方法里为了保证都可以使用,所以我们只作了字符串的基本拼接。
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");
但个人不建议去大量使用类型推断,这会让你的代码易读和健壮性都会下降,所以这个知识点,大家做一个了解就可以了。
好了,这就是本文的内容了,希望小伙伴们下去一定要练习一下,加深理解。
码云笔记 » 19. TypeScript 函数泛型(难点)