正确认识typescript中的泛型

泛型介绍

软件工程中，我们不仅要创建一致的定义良好的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