TypeScript 泛型(Generic)

本节开始介绍 TypeScript 一些进阶知识点,第一个要介绍的泛型是 TypeScript 中非常重要的一个概念,它是一种用以增强函数、类和接口能力的非常可靠的手段。

使用泛型,我们可以轻松地将那些输入重复的代码,构建为可复用的组件,这给予了开发者创造灵活、可重用代码的能力。

1. 慕课解释

泛型在传统的面向对象语言中极为常见,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。

通俗来讲:泛型是指在定义函数、接口或者类时,未指定其参数类型,只有在运行时传入才能确定。那么此时的参数类型就是一个变量,通常用大写字母 T 来表示,当然你也可以使用其他字符,如:UK等。

语法:在函数名、接口名或者类名添加后缀 <T>

function generic<T>() {}
interface Generic<T> {}
class Generic<T> {}

2. 初识泛型

之所以使用泛型,是因为它帮助我们为不同类型的输入,复用相同的代码。

比如写一个最简单的函数,这个函数会返回任何传入它的值。如果传入的是 number 类型:

function identity(arg: number): number {
    return arg
}

如果传入的是 string 类型:

function identity(arg: string): string {
    return arg
}

通过泛型,可以把两个函数统一起来:

function identity<T>(arg: T): T {
  return arg
}

需要注意的是,泛型函数的返回值类型是根据你的业务需求决定,并非一定要返回泛型类型 T:

function identity<T>(arg: T): string {
  return String(arg)
}

代码解释: 入参的类型是未知的,但是通过 String 转换,返回字符串类型。

3. 多个类型参数

泛型函数可以定义多个类型参数:

function extend<T, U>(first: T, second: U): T & U {
  for(const key in second) {
    (first as T & U)[key] = second[key] as any
  }
  return first as T & U
}

代码解释: 这个函数用来合并两个对象,具体实现暂且不去管它,这里只需要关注泛型多个类型参数的使用方式,其语法为通过逗号分隔 <T, U, K>

4. 泛型参数默认类型

函数参数可以定义默认值,泛型参数同样可以定义默认类型:

实例演示
预览 复制