TypeScript 反方向类型推导：用好上下文相关类型-TypeScript入门指南

当前位置:　首页>> 技术小册>> TypeScript入门指南

TypeScript 中的类型系统可以帮助开发者在编译阶段捕捉到一些潜在的错误，从而提高代码的可维护性和可靠性。其中，类型推导是 TypeScript 中的一项重要特性，它可以帮助开发者省略类型声明，从而提高开发效率。但是在某些情况下，TypeScript 的类型推导可能会出现反向类型推导的情况，即从已知类型推导出变量类型的过程。本章节，将介绍 TypeScript 中反向类型推导的相关内容，并介绍如何使用上下文相关类型来解决这个问题。

--------------------------------

**什么是反向类型推导？**

TypeScript 中的类型推导通常是正向的，即从变量声明的初始值中推导出变量类型。例如，下面的代码中，变量 x 的类型被推导为 number。

```javascript
const x = 42;

```

反向类型推导是指从已知类型推导出变量类型的过程。这种类型推导通常发生在函数调用或表达式求值时，其中已知的类型来自于函数参数或表达式的类型。例如，下面的代码中，parseInt 函数的返回值类型被推导为 number，而这个推导过程是从已知的函数参数类型 string 中进行的。

```javascript
const x = parseInt("42");

```

反向类型推导在 TypeScript 中通常是一种有用的技术，因为它可以帮助开发者省略类型声明，从而提高代码的可读性和可维护性。但是，反向类型推导也可能导致一些问题，特别是在复杂的类型推导场景下。在这些情况下，TypeScript 可能无法正确推导出变量的类型，从而导致类型错误或运行时错误。

**反向类型推导的问题**
反向类型推导可能导致以下几种问题：

- 不必要的类型断言
在一些情况下，开发者可能需要手动对变量类型进行断言，以便让 TypeScript 推导出正确的类型。例如，下面的代码中，变量 x 的类型被推导为 unknown，而在运行时，变量 x 的值实际上是一个字符串。

```javascript
const x = localStorage.getItem("x");

```

为了让 TypeScript 推导出正确的类型，开发者需要手动对变量 x 进行类型断言。

```javascript
const x = localStorage.getItem("x") as string;

```

这种类型断言可能会导致代码的可读性和可维护性下降，因为开发者必须手动指定变变量的类型，并且必须知道变量的实际类型才能进行断言。

- 错误的类型推导
在某些情况下，TypeScript 可能无法正确推导出变量的类型，从而导致类型错误或运行时错误。例如，下面的代码中，变量 x 的类型被推导为 string，而在运行时，变量 x 的值实际上是一个数字。

```javascript
const x = Math.random() < 0.5 ? "hello" : 42;

```

这种类型推导可能会导致代码的可靠性下降，因为开发者无法在编译阶段发现这种类型错误。

- 性能问题
在某些情况下，反向类型推导可能会导致性能问题，特别是在复杂的类型推导场景下。例如，下面的代码中，开发者使用了大量的类型断言，以便让 TypeScript 推导出正确的类型。

```javascript
const x: Foo = JSON.parse(localStorage.getItem("x") as string) as Foo;

```

这种类型断言可能会导致代码的性能下降，因为 TypeScript 在编译阶段需要执行大量的类型检查和转换操作。

**上下文相关类型**

为了解决反向类型推导的问题，TypeScript 提供了上下文相关类型（Contextual Typing）的功能。上下文相关类型是一种特殊的类型推导机制，它可以从上下文中推导出变量的类型，而不是从变量的初始值或表达式中推导出变量的类型。

在 TypeScript 中，上下文相关类型通常出现在函数调用或表达式求值的场景中。例如，下面的代码中，开发者使用了上下文相关类型，以便让 TypeScript 推导出正确的类型。

```javascript
const x = JSON.parse(localStorage.getItem("x")!);

```

在这个例子中，开发者使用了感叹号运算符（!）来告诉 TypeScript，变量 x 的值不会为 null 或 undefined，因此可以推导出正确的类型。

**示例**
下面我们来看一个更复杂的示例，来说明如何使用上下文相关类型解决反向类型推导的问题。

假设我们有一个函数 map，它接受一个数组和一个函数作为参数，并返回一个新的数组，其中每个元素都是通过给定的函数对原数组中的元素进行转换得到的。例如，下面的代码中，我们使用 map 函数将一个字符串数组中的所有元素转换为数字。

```javascript
function map<T, U>(array: T[], fn: (item: T) => U): U[] {
  const result: U[] = [];
  for (const item of array) {
    result.push(fn(item));
  }
  return result;
}

const numbers = map(["1", "2", "3"], parseInt);

```

这个例子中，我们使用了泛型来定义函数 map，使其能够适用于任意类型的数组和转换函数。然而，由于 TypeScript 无法推导出转换函数的返回类型，我们必须手动指定返回类型。

```javascript
const numbers = map(["1", "2", "3"], parseInt);

```

在这个例子中，我们使用了内置的 parseInt 函数作为转换函数，它将字符串转换为数字。由于 parseInt 函数返回的是一个数字，我们必须将返回类型指定为 number，否则 TypeScript 会将 numbers 推导为一个由 string | number 类型组成的数组。

为了解决这个问题，我们可以使用上下文相关类型。具体来说，我们可以使用函数调用表达式的上下文来推导出转换函数的返回类型，从而避免手动指定返回类型。

```javascript
const numbers = map(["1", "2", "3"], x => parseInt(x));

```

在这个例子中，我们使用了一个匿名函数作为转换函数，并将其作为参数传递给 map 函数。由于 TypeScript 可以推导出参数 x 的类型为 string，我们可以通过调用 parseInt 函数来推导出返回类型为 number。因此，我们不需要手动指定返回类型。

**上下文相关类型的限制**

尽管上下文相关类型非常有用，但它们有一些限制。具体来说，上下文相关类型只能推导出简单的类型，例如基本类型、枚举类型、字面量类型、元组类型等，不能推导出复杂的类型，例如函数类型、类类型、泛型类型等。

例如，下面的代码中，我们使用了上下文相关类型来推导出变量 x 的类型为数字类型。

```javascript
const x = Math.random() < 0.5 ? 42 : "hello";

```

然而，由于变量 x 的值可能是一个字符串，我们不能将其作为数字类型来使用。

```javascript
const y = x + 1; // Error: x 可能是字符串类型

```

在这种情况下，我们需要手动进行类型断言，以便告诉 TypeScript 变量 x 的实际类型。

```javascript
const y = (x as number) + 1;

```

**小结**
反向类型推导是 TypeScript 中一个重要的功能，它可以帮助开发者编写更安全、更可靠的代码。然而，在某些情况下，反向类型推导可能会导致类型错误或性能问题，这时我们可以使用上下文相关类型来解决这些问题。通过合理地使用反向类型推导和上下文相关类型，我们可以编写出更高质量、更易维护的 TypeScript 代码。

该分类下的相关小册推荐：

TypeScript开发实战

TypeScript 全面进阶指南

剑指TypeScript