TypeScript中的类型断言

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

成都创新互联公司专注于涵江企业网站建设,响应式网站,商城网站建设。涵江网站建设公司,为涵江等地区提供建站服务。全流程按需策划，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务

类型断言

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

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

 
 
 
    
  
  
  
  1. const data: object = ['a', 'b', 'c']; // (A)
    2. 
  
  
  
  2. 
  
  
  
  3. // @ts-ignore: Property 'length' does not exist on type 'object'.
    4. 
  
  
  
  4. data.length; // (B)
    5. 
  
  
  
  5. 
  
  
  
  6. assert.equal(
    7. 
  
  
  
  7.   (data as Array).length, 3); // (C)
    8.
  • 在 A 行中，我们把 Array 的类型扩展为 object。
  • 在 B 行中，我们看到此类型不允许访问任何属性。
  • 在 C 行中，我们用类型断言(运算符 as)告诉 TypeScript data 是一个Array。现在就可以访问属性 .length 了。

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

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

(1) 类型断言的替代语法

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

 
 
 
    
  
  
  
  1. >data
    2.

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

(2) 示例：声明一个接口

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

 
 
 
    
  
  
  
  1. interface Named {
    2. 
  
  
  
  2.   name: string;
    3. 
  
  
  
  3. }
    4. 
  
  
  
  4. function getName(obj: object): string {
    5. 
  
  
  
  5.   if (typeof (obj as Named).name === 'string') { // (A)
    6. 
  
  
  
  6.     return (obj as Named).name; // (B)
    7. 
  
  
  
  7.   }
    8. 
  
  
  
  8.   return '(Unnamed)';
    9. 
  
  
  
  9. }
    10.

(3) 示例：声明索引签名

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

 
 
 
    
  
  
  
  1. type Dict = {[k:string]: any};
    2. 
  
  
  
  2. 
  
  
  
  3. function getPropertyValue(dict: unknown, key: string): any {
    4. 
  
  
  
  4.   if (typeof dict === 'object' && dict !== null && key in dict) {
    5. 
  
  
  
  5.     // %inferred-type: object
    6. 
  
  
  
  6.     dict;
    7. 
  
  
  
  7. 
  
  
  
  8.     // @ ts-ignore：元素隐式具有“any”类型，因为
    9. 
  
  
  
  9.     // 类型'string'的表达式不能用于索引类型'{}'。
    10. 
  
  
  
  10.     // 在类型“ {}”上没有找到参数类型为'string'的索引签名。
    11. 
  
  
  
  11.     dict[key];
    12. 
  
  
  
  12.     
    13. 
  
  
  
  13.     return (dict as Dict)[key]; // (A)
    14. 
  
  
  
  14.   } else {
    15. 
  
  
  
  15.     throw new Error();
    16. 
  
  
  
  16.   }
    17. 
  
  
  
  17. }
    18.

与类型断言相关的构造

(1) 非空断言运算符(后缀 !)

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

 
 
 
    
  
  
  
  1. const theName = 'Jane' as (null | string);
    2. 
  
  
  
  2. 
  
  
  
  3. // @ts-ignore: Object is possibly 'null'.
    4. 
  
  
  
  4. theName.length;
    5. 
  
  
  
  5. 
  
  
  
  6. assert.equal(
    7. 
  
  
  
  7.   theName!.length, 4); // OK
    8.

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

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

 
 
 
    
  
  
  
  1. function getLength(strMap: Map, key: string): number {
    2. 
  
  
  
  2.   if (strMap.has(key)) {
    3. 
  
  
  
  3.     // We are sure x is not undefined:
    4. 
  
  
  
  4.     const value = strMap.get(key)!; // (A)
    5. 
  
  
  
  5.     return value.length;
    6. 
  
  
  
  6.   }
    7. 
  
  
  
  7.   return -1;
    8. 
  
  
  
  8. }
    9.

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

 
 
 
    
  
  
  
  1. function getLength(strMap: Map, key: string): number {
    2. 
  
  
  
  2.   // %inferred-type: string | undefined
    3. 
  
  
  
  3.   const value = strMap.get(key);
    4. 
  
  
  
  4.   if (value === undefined) { // (A)
    5. 
  
  
  
  5.     return -1;
    6. 
  
  
  
  6.   }
    7. 
  
  
  
  7. 
  
  
  
  8.   // %inferred-type: string
    9. 
  
  
  
  9.   value;
    10. 
  
  
  
  10. 
  
  
  
  11.   return value.length;
    12. 
  
  
  
  12. }
    13.

(3) 定值断言

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

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

 
 
 
    
  
  
  
  1. class Point1 {
    2. 
  
  
  
  2.   // @ts-ignore: Property 'x' has no initializer and is not definitely
    3. 
  
  
  
  3.   // assigned in the constructor.
    4. 
  
  
  
  4.   x: number;
    5. 
  
  
  
  5. 
  
  
  
  6.   // @ts-ignore: Property 'y' has no initializer and is not definitely
    7. 
  
  
  
  7.   // assigned in the constructor.
    8. 
  
  
  
  8.   y: number;
    9. 
  
  
  
  9. 
  
  
  
  10.   constructor() {
    11. 
  
  
  
  11.     this.initProperties();
    12. 
  
  
  
  12.   }
    13. 
  
  
  
  13.   initProperties() {
    14. 
  
  
  
  14.     this.x = 0;
    15. 
  
  
  
  15.     this.y = 0;
    16. 
  
  
  
  16.   }
    17. 
  
  
  
  17. }
    18.

如果我们在 A 行和 B 行中使用“定值分配断言”(感叹号)，则错误会消失：

 
 
 
    
  
  
  
  1. class Point2 {
    2. 
  
  
  
  2.   x!: number; // (A)
    3. 
  
  
  
  3.   y!: number; // (B)
    4. 
  
  
  
  4.   constructor() {
    5. 
  
  
  
  5.     this.initProperties();
    6. 
  
  
  
  6.   }
    7. 
  
  
  
  7.   initProperties() {
    8. 
  
  
  
  8.     this.x = 0;
    9. 
  
  
  
  9.     this.y = 0;
    10. 
  
  
  
  10.   }
    11. 
  
  
  
  11. }
    12.

新闻名称：TypeScript中的类型断言
网页路径：http://www.gawzjz.com/qtweb/news43/197643.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

动态网站知识

各行业网站

成都品牌网站建设　　 　红光高低压开关厂　　 　成都网站维护公司　　 　成都免费网站建设　　 　网络推广公司　　 　成都商城app开发　　 　成都全屋定制　　 　手机网站制作　　 　成都成品网站　　 　电商网站建设方案　　 　网站开发　　 　成都网站设计　　 　自贡电信机房　　 　移动服务器托管　　 　四川盐亭做网站　　 　成都光华电信机房　　 　郫县明安消防器材　　 　成都户外广告牌设计　　 　机柜租用　　 　成都网站建设