TypeScript泛型参数默认值详解：从基础到函数重载简化

泛型简介

在软件工程实践中，构建一致且定义良好的 API 至关重要，同时必须兼顾代码的可重用性。组件设计不仅需支持当前使用的数据类型，还应具备扩展性以适配未来可能出现的数据类型，这为大型系统的开发提供了极大的灵活性。

在 C# 和 Java 等编程语言中，泛型技术被广泛用于创建可复用的组件库。这类组件能够处理多种数据类型，允许用户根据实际需求自定义传入的数据类型，从而实现组件的通用化使用。

举个🌰

为了直观理解泛型概念，我们来看一个最简单的示例👇

function getVal(val: string): string {
  return val
}

上述代码逻辑简单明了，主要约束 getVal 函数的入参类型为 string，并规定其返回值类型与入参类型保持一致，同样为 string 类型。

如上图所示，若传入数值 1，编译器会报错。而当传入符合类型的参数后，通过 IDE 的提示可以看出，变量 result2 可以调用字符串相关的属性和方法。这是因为 IDE 已经预先推断出 result2 的具体类型，从而提供了智能提示。

上述示例展示了 TypeScript 中最基础的应用场景。此时我们可以进一步思考：getVal 函数是否只能接收 string 类型的入参？如果希望实现传入任意类型的值，且函数返回值即为该任意类型，该如何实现？

举个🌰🌰

解决上述疑问的方法是使用泛型，具体代码如下👇

function getVal<T>(val: T): T {
  return val
}

在此基础上添加一些测试代码进行验证：

这一次，无论传入何种类型的值，代码均不会报错，并且依然能够享受 IDE 基于类型推断提供的智能提示。这正是 TypeScript 的核心魅力所在——类型推断与类型约束的结合。

我对泛型的理解可以概括为：

当程序员看到 '123'、true 等变量时，能够直观判断其类型，计算机同样能够识别。TypeScript 引擎通过解析抽象语法树（AST），推断出 getVal 函数的入参类型为 string，并将推断出的类型存储在一个变量 T 中。这样，我们就可以将 T 灵活地应用于各种场景。总之，可以将泛型视为一个变量或形参，区别在于 JavaScript 中变量存储的是值，而 TypeScript 中存储的是类型。

泛型参数的默认值——函数重载

前文提到，泛型可以看作是一个形参。在 JavaScript 中，形参可以设置默认值，那么在 TypeScript 中，泛型参数同样支持设置默认值。我们先来看官方提供的示例代码👇

declare function create(): Container<HTMLDivElement, HTMLDivElement[]>;
declare function create<T extends HTMLElement>(element: T): Container<T, T[]>;
declare function create<T extends HTMLElement, U extends HTMLElement>(
  element: T,
  children: U[]
): Container<T, U[]>;

示例代码中缺少 Container 类型的声明，且函数仅有类型声明而无具体执行代码块，直接复制到编辑器中会引发报错。这里我们尝试补充完整代码，如下所示：

type Container<T, U> = {element: T, children: U}

function create(): Container<HTMLDivElement, HTMLDivElement[]>;
function create<T extends HTMLElement>(element: T): Container<T, T[]>;
function create<T extends HTMLElement, U extends HTMLElement>(element: T, children: U[]): Container<T, U[]>;
function create<T extends HTMLElement, U extends T[]>(element?: T, children?: U): Container<T, U> {
  return {
    element: element as T,
    children: children as U
  }
}

以上代码展示了一个重载函数的声明。函数重载允许一个函数接受不同数量或不同类型的参数时，执行不同的处理逻辑（注：这里的处理差异体现在类型推断和约束的不同）。

我们先逐行解析其重载声明的具体含义👇

• function create(): Container<HTMLDivElement, HTMLDivElement[]> 声明了一个 create 函数，该函数无入参，返回值是一个包含 HTMLDivElement 类型的 Container 类型数据。
• function create<T extends HTMLElement>(element: T): Container<T, T[]> 声明了一个 create 函数，接收一个被约束为 HTMLElement 类型的 element 参数（通过下图可以看出，此类 DOM 类型满足 HTMLElement 类型约束），返回值是一个包含满足 HTMLElement 类型的 Container 类型数据。

• function create<T extends HTMLElement, U extends HTMLElement>(element: T, children: U[]): Container<T, U[]> 声明了一个 create 函数，接收两个被同样约束为 HTMLElement 类型的 element 和 children 参数。

接下来，我们通过一些测试函数来验证上述重载函数的类型推断结果：

const r1 = create() // Container<HTMLDivElement, HTMLDivElement[]>
const r2 = create(document.createElement('dialog')) // Container<HTMLDialogElement, HTMLDialogElement[]>
const children = [document.createElement('div')] // HTMLDivElement[]
const r3 = create(document.createElement('dialog'), children) // Container<HTMLDialogElement, HTMLDivElement[]>

根据图示，可以看出根据入参个数及类型的不同，推断出的函数返回值与上述重载声明一一对应。这就是 TypeScript 中最基础的函数重载理解。看到这里，许多人可能会疑惑：一个函数重载需要编写这么多行声明，是否过于繁琐？😰 TS……让人想放弃学习😡😡。

泛型参数的默认值——正文

经过前面的大量铺垫，本文的主题部分可以简要带过~

利用泛型参数默认类型，我们可以将上面复杂的重载声明简化为如下形式👇

function create<T extends HTMLElement = HTMLDivElement, U = T[]>(element?: T, children?: U): Container<T, U> {
  return {
    element: element as T,
    children: children as U
  }
}

没错，通过给泛型参数设置默认值，我们只需编写一个普通函数即可。先查看代码执行效果：

我们为泛型参数 T 指定了默认类型 HTMLDivElement。在调用 create() 时，因未传入参数，T 被推导为 HTMLDivElement，同时 U = T[]，故 U 的类型确定为 HTMLDivElement[]，最终返回值类型推断为 Container<HTMLDivElement, HTMLDivElement[]>。对 r2 和 r3 的分析遵循相同逻辑。

这里的核心理解要点是：T extends HTMLElement = HTMLDivElement, U = T[] 是默认值，仅在未传参时生效；如果传入了具体参数，则会被具体的入参类型所替换。

以上便是我对 TypeScript 中泛型参数默认值的一些浅显理解，欢迎讨论指正😝😝。

参考

TypeScript 2.3——泛型参数默认值

到此这篇关于对TypeScript泛型参数的默认值理解的文章就介绍到这了,更多相关TS泛型参数默认值内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！