泛型介绍
软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。
在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。
设想这样一个场景,你想设计一个函数,函数有两个参数,并且这两个参数的类型是相同的,也就是说第一个参数如果传string类型,那么要求第二个参数也必须是string类型的,如果第一个参数是number类型的,那么第二个参数也必须是number类型的,那么怎么做到呢?我们不妨先使用JavaScript来声明此函数试一试:
// js声明函数
export function addUseJS(a, b) {
return [a, b]
}
// 使用
addUseJS(1, 'tom')
addUseJS('tom', 'jery')
如此做法,并不能达到我们的要求,你可能会想到在函数内部做一层参数的类型判断,如下:
// 加了参数类型判断的声明
export function addUseJS(a, b) {
const type = typeof a
if (typeof b === type && ['number', 'string'].includes(type)) {
return [a, b]
} else {
throw new Error('参数类型不符合要求')
}
}
// 使用
addUseJS(1, 'tom')
addUseJS('tom', 'jery')
如此做法不仅繁琐,而且在编码阶段,并不能提醒开发者应该提示的错误。如果我们需要在开发者编码阶段就提示相应的错误,那么就需要使用typescript隆重登场了。
我们先使用typescript来重构此函数,初学typescript的选手可能写出如下的代码:
function add(a: number | string, b: number | string): (number | string)[] {
return [a, b]
}
如此写不仅繁琐,而且可读性和优雅性也很差,那么我们怎样来限制两个参数的类型一致呢?这时候使用typescript中的泛型来解决这个问题是最合适不过的了。泛型顾名思义就是泛指的类型,那么我们使用泛型来重构这个函数如下:
export function add<T>(a: T, b: T): T[] {
return [a, b]
}
在函数名后面紧跟着一对尖括号<>
里面写上一个占位符 T(当然你写其他的命名也可以,比如你使用abc,ab123等等js中正确的命名方式都可以)。声明完成之后,就代表 add 这个函数在调用的时候,传入的两个参数类型必须一致,都是 T 类型,返回值为一个数组,数组中的成员都为 T 类型,否则 ts 编译器就会提示报错信息,这样就在开发者写代码的阶段直接的规避了一些错误。
使用泛型声明完成之后,这样我们在调用的时候就可以显式的传入泛型的类型,如下:
export function add<T>(a: T, b: T): T[] {
return [a, b]
}
// 调用add函数
add<number>(1, 2);
add<string>('tom', 'jerry');
add<object>({name: 'tom'}, {name: 'jerry'});
可以看到,我们想传入什么类型都可以,只要在函数名后面的尖括号<>
里面写上泛型 T 所代表的类型即可。
使用多个泛型类型
泛型不止可以传入一个,也可以传入多个泛型:
// 传入多个泛型
export function mutiple<T, U>(a: T, b: U): [U, T] {
// ...
return [b ,a]
}
// 使用
mutiple<string, number>('tom', 3);
mutiple<number, object>(123, {name: 'jerry'});
泛型不仅可以限制参数的类型,也可以用来限制返回结果的类型。
注:本文demo的github仓库地址:泛型介绍
文件:src/generic/function-generic.ts