类型断言（与类型转换有关） • 深入理解 TypeScript

21 类型断言（与类型转换有关）

21.1 类型断言
- 21.1.1 类型断言的另一种语法
- 21.1.2 示例：断言接口
- 21.1.3 示例：断言索引签名
21.2 与类型断言相关的结构
- 21.2.1 非空断言运算符（后缀 !）
- 21.2.2 确定赋值断言

本章介绍 TypeScript 中的*类型断言*，它与其他语言中的类型转换有关，并通过 as 运算符执行。

21.1 类型断言

类型断言允许我们覆盖 TypeScript 为值计算的静态类型。这对于解决类型系统的局限性非常有用。

类型断言与其他语言中的类型转换有关，但它们不会引发异常，并且在运行时不会执行任何操作（它们会在静态时执行一些最少的检查）。

const data: object = ['a', 'b', 'c']; // (A)

// @ts-expect-error: Property 'length' does not exist on type 'object'.
data.length; // (B)

assert.equal(
  (data as Array<string>).length, 3); // (C)

注释

在 A 行中，我们将数组的类型放宽为 object。
在 B 行中，我们看到此类型不允许我们访问任何属性（详情）。
在 C 行中，我们使用类型断言（运算符 as）来告诉 TypeScript data 是一个数组。现在我们可以访问属性 .length。

类型断言是最后的手段，应尽可能避免使用。它们（暂时）移除了静态类型系统通常为我们提供的安全网。

请注意，在 A 行中，我们也覆盖了 TypeScript 的静态类型。但我们是通过类型注释来实现的。这种覆盖方式比类型断言安全得多，因为我们受到的限制要多得多：TypeScript 的类型必须可以赋值给注释的类型。

21.1.1 类型断言的另一种语法

TypeScript 有一种可选的“尖括号”语法用于类型断言

<Array<string>>data

我建议避免使用这种语法。它已经过时，并且与 React JSX 代码（在 .tsx 文件中）不兼容。

21.1.2 示例：断言接口

为了访问任意对象 obj 的属性 .name，我们暂时将 obj 的静态类型更改为 Named（A 行和 B 行）。

interface Named {
  name: string;
}
function getName(obj: object): string {
  if (typeof (obj as Named).name === 'string') { // (A)
    return (obj as Named).name; // (B)
  }
  return '(Unnamed)';
}

21.1.3 示例：断言索引签名

在以下代码（A 行）中，我们使用类型断言 as Dict，以便我们可以访问推断类型为 object 的值的属性。也就是说，我们正在用静态类型 Dict 覆盖静态类型 object。

type Dict = {[k:string]: any};

function getPropertyValue(dict: unknown, key: string): any {
  if (typeof dict === 'object' && dict !== null && key in dict) {
    // %inferred-type: object
    dict;

    // @ts-expect-error: Element implicitly has an 'any' type because
    // expression of type 'string' can't be used to index type '{}'.
    // [...]
    dict[key];
    
    return (dict as Dict)[key]; // (A)
  } else {
    throw new Error();
  }
}

21.2.1 非空断言运算符（后缀 `!`）

如果值的类型是一个包含类型 undefined 或 null 的联合类型，则*非空断言运算符*（或*非空断言运算符*）会从联合类型中删除这些类型。我们是在告诉 TypeScript：“此值不能是 undefined 或 null。” 因此，我们可以执行这些类型所禁止的操作——例如

const theName = 'Jane' as (null | string);

// @ts-expect-error: Object is possibly 'null'.
theName.length;

assert.equal(
  theName!.length, 4); // OK

21.2.1.1 示例——映射：在 `.has()` 之后使用 `.get()`

在我们使用 Map 方法 .has() 之后，我们知道 Map 具有给定的键。唉，.get() 的结果并没有反映出这一点，这就是我们必须使用非空断言运算符的原因

function getLength(strMap: Map<string, string>, key: string): number {
  if (strMap.has(key)) {
    // We are sure x is not undefined:
    const value = strMap.get(key)!; // (A)
    return value.length;
  }
  return -1;
}

只要 Map 的值不能是 undefined，我们就可以避免使用非空断言运算符。然后可以通过检查 .get() 的结果是否为 undefined 来检测缺少的条目

function getLength(strMap: Map<string, string>, key: string): number {
  // %inferred-type: string | undefined
  const value = strMap.get(key);
  if (value === undefined) { // (A)
    return -1;
  }

  // %inferred-type: string
  value;

  return value.length;
}

21.2.2 确定赋值断言

如果启用了严格属性初始化，我们偶尔需要告诉 TypeScript 我们确实初始化了某些属性——即使它认为我们没有。

这是一个即使不应该 TypeScript 也会报错的示例

class Point1 {
  // @ts-expect-error: Property 'x' has no initializer and is not definitely
  // assigned in the constructor.
  x: number;

  // @ts-expect-error: Property 'y' has no initializer and is not definitely
  // assigned in the constructor.
  y: number;

  constructor() {
    this.initProperties();
  }
  initProperties() {
    this.x = 0;
    this.y = 0;
  }
}

如果我们在 A 行和 B 行中使用*确定赋值断言*（感叹号），则错误会消失

class Point2 {
  x!: number; // (A)
  y!: number; // (B)
  constructor() {
    this.initProperties();
  }
  initProperties() {
    this.x = 0;
    this.y = 0;
  }
}