TypeScript 函数进阶指南：从基础到高级技巧-优快云博客

TypeScript 函数进阶指南：从基础到高级技巧

TypeScript TypeScript 使用手册（中文版）翻译。http://www.typescriptlang.org 项目地址: https://gitcode.com/gh_mirrors/typ/TypeScript

函数类型基础

在 TypeScript 中，函数是一等公民，这意味着它们可以像其他值一样被传递和使用。理解如何正确定义和使用函数类型是 TypeScript 开发中的关键技能。

函数类型表达式

最简单的函数类型定义方式是使用箭头函数类似的语法：

type GreetFunction = (name: string) => void;

function greeter(fn: GreetFunction) {
  fn("TypeScript");
}

这里有几个要点需要注意：

参数名称是必需的，不能省略
如果没有指定参数类型，默认为 any
返回值类型如果是 void，表示函数不返回任何值

带属性的函数类型

JavaScript 函数可以有属性，TypeScript 通过调用签名来描述这种情况：

type DescribableFunction = {
  description: string;
  (someArg: number): boolean;
};

这种语法与普通函数类型表达式不同，使用 : 而不是 => 来分隔参数和返回类型。

高级函数特性

构造签名

当函数需要使用 new 调用时，可以使用构造签名：

type SomeConstructor = {
  new (s: string): SomeObject;
};

有些对象（如 Date）既可以构造也可以直接调用，这时可以组合使用调用签名和构造签名。

泛型函数

泛型函数允许我们创建灵活且类型安全的函数，其中输入和输出类型相关联：

function firstElement<Type>(arr: Type[]): Type | undefined {
  return arr[0];
}

使用泛型时需要注意：

TypeScript 通常能自动推断类型参数
可以同时使用多个类型参数
应该尽量让类型参数出现在多个位置

类型约束

通过 extends 关键字可以限制类型参数的范围：

function longest<Type extends { length: number }>(a: Type, b: Type) {
  return a.length >= b.length ? a : b;
}

约束的常见用途包括：

确保参数具有某些属性
限制类型参数的范围
在泛型函数中访问特定属性

函数参数处理

可选参数

使用 ? 标记可选参数：

function f(x?: number) {
  // x 的类型是 number | undefined
}

可选参数的最佳实践：

回调函数中避免使用可选参数
可以为可选参数提供默认值
调用时可以显式传递 undefined

剩余参数

处理可变数量参数时使用剩余参数语法：

function multiply(n: number, ...m: number[]) {
  return m.map(x => n * x);
}

剩余参数必须是最后一个参数，类型通常是数组或元组。

参数解构

可以方便地解构对象参数：

function sum({ a, b, c }: { a: number; b: number; c: number }) {
  return a + b + c;
}

对于复杂对象，建议使用类型别名提高可读性。

函数重载

函数重载允许一个函数接受不同类型或数量的参数：

function makeDate(timestamp: number): Date;
function makeDate(m: number, d: number, y: number): Date;
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {
  // 实现
}

重载的最佳实践：

总是先写重载签名，再写实现
实现签名必须兼容所有重载
尽量使用联合类型替代重载

特殊函数类型

TypeScript 提供了一些特殊类型来描述函数行为：

void

表示函数不返回任何值。注意与 undefined 的区别：

void 表示忽略返回值
undefined 是一个实际的值

never

表示函数永远不会正常返回，通常用于：

抛出错误的函数
无限循环
类型检查中的穷尽性检查

unknown

比 any 更安全的顶层类型，表示未知的值：

不能直接操作 unknown 类型的值
需要先进行类型检查或断言

Function

描述所有 JavaScript 函数的通用类型，但通常应该避免使用，因为它包含不安全的 any 类型。

最佳实践总结

泛型函数：
- 优先让类型参数出现在多个位置
- 避免不必要的类型参数
- 使用约束限制类型参数范围
函数重载：
- 优先使用联合类型而非重载
- 保持重载签名简单明了
- 确保实现签名兼容所有重载
参数处理：
- 谨慎使用可选参数
- 合理使用剩余参数处理可变参数
- 利用解构提高代码可读性
类型安全：
- 避免使用 Function 类型
- 优先使用 unknown 而非 any
- 合理使用 never 进行穷尽性检查

通过掌握这些函数相关的类型技巧，你可以编写出既灵活又类型安全的 TypeScript 代码，大大提高代码质量和开发效率。

TypeScript TypeScript 使用手册（中文版）翻译。http://www.typescriptlang.org 项目地址: https://gitcode.com/gh_mirrors/typ/TypeScript

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考