乐趣区

TypeScript中的类型断言

jiezi

作者：Dr. Axel Rauschmayer

翻译：疯狂的技术宅

原文：https://2ality.com/2020/06/ty…

未经允许严禁转载

本文是关于 TypeScript 中的 type assertions 的，它与其他语言中的类型强制转换有相似之处，并通过 as 运算符执行。

类型断言

类型断言使我们可以覆盖 TypeScript 为存储位置计算的静态类型，这对于解决类型系统的限制很有用。

类型断言与其他语言中的类型强制转换有相似之处，但是它们不会引发异常，并且在运行时也不做任何事情（它们确实会静态执行一些少量的检查）。

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

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

assert.equal((data as Array<string>).length, 3); // (C)
  • 在 A 行中，我们把 Array 的类型扩展为 object。
  • 在 B 行中，我们看到此类型不允许访问任何属性。
  • 在 C 行中，我们用类型断言（运算符 as）告诉 TypeScript data 是一个 Array。现在就可以访问属性 .length 了。

类型断言是不得已的方法，应尽可能的避免。他们（暂时）删除了静态类型系统为我们提供的安全网。

注意，在 A 行中，我们还覆盖了 TypeScript 的静态类型，不过是通过类型注释完成的。这种覆盖方式比类型声明要安全得多，因为你可以做的事情少得多。TypeScript 的类型必须能够分配给注释的类型。

类型断言的替代语法

TypeScript 对于类型断言有另一种“尖括号”语法：

<Array<string>>data

该语法已经过时，并且与 React JSX 代码（在 .tsx 文件中）不兼容。

示例：声明一个接口

为了访问任意对象 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)';
}

示例：声明索引签名

在以下代码中，我们在行 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-ignore：元素隐式具有“any”类型，因为
    // 类型 'string' 的表达式不能用于索引类型 '{}'。// 在类型“{}”上没有找到参数类型为 'string' 的索引签名。dict[key];
    
    return (dict as Dict)[key]; // (A)
  } else {throw new Error();
  }
}

与类型断言相关的构造

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

如果值的类型是包含 undefined 或 null 类型的联合，则 non-nullish 声明运算符 （或 non-null 声明运算符 ）将从联合中删除这些类型。我们告诉 TypeScript：“这个值不能是 undefined 或 null。”因此，我们可以执行这两个值的类型所阻止的操作，例如：

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

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

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

示例 – Maps: .has() 之后的 .get()

使用 Map 方法 .has() 之后，我们知道 Map 具有给定的键。遗憾的是，.get() 的结果不能反映这一点，这就是为什么我们必须使用 nullish 断言运算符的原因：

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;
}

由于 strMap 的值永远不会是 undefined，因此我们可以通过检查 .get() 的结果是否为 undefined 来检测丢失的 Map 条目（A 行）：

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;
}

定值断言

如果打开 strict 属性初始化 ，有时需要告诉 TypeScript 我们确实初始化某些属性——即使它认为我们不需要这样做。

这是一个例子，尽管 TypeScript 不应这样做，但它仍会报错：

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

  // @ts-ignore: 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;
  }
}

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

  • 深入理解 Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13 个帮你提高开发效率的现代 CSS 框架
  • 快速上手 BootstrapVue
  • JavaScript 引擎是如何工作的？从调用栈到 Promise 你需要知道的一切
  • WebSocket 实战：在 Node 和 React 之间进行实时通信
  • 关于 Git 的 20 个面试题
  • 深入解析 Node.js 的 console.log
  • Node.js 究竟是什么？
  • 30 分钟用 Node.js 构建一个 API 服务器
  • Javascript 的对象拷贝
  • 程序员 30 岁前月薪达不到 30K，该何去何从
  • 14 个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩展插件
  • Node.js 多线程完全指南
  • 把 HTML 转成 PDF 的 4 个方案及实现
  • 更多文章 …
退出移动版