Typescript中的as、问号与感叹号

客官°小女子只卖身不卖艺 2023-02-10 07:42 68阅读 0赞

1、as关键字表示断言

在Typescript中，表示断言有两种方式。一种是扩号表示法：

  1. let someValue: any = "this is a string";
  2. let strLength: number = (someValue).length;

另一种使用as关键字：

  1. let someValue: any = "this is a string";
  2. let strLength: number = (someValue as string).length;

2、问号(?)用于属性定义

问号表示可选的属性，一般用于属性定义，如，用于接口时：

  1. interface SquareConfig { 
  2.     color?: string;
  3.     width?: number;
  4. }
  5. function createSquare(config: SquareConfig) { 
  6.     if (config.color) { 
  7.         console.log(config);
  8.     }
  9. }

可选属性的含义是：使用这个属性时，要么这个属性名不存在，要么必须符合属性的类型定义

比如上述createSquare函数编译时会报error错误：

  1. error TS2551: Property 'clor' does not exist on type 'SquareConfig'.

如果修改createSquare，将config.color的值改为undefined，会怎样？

  1. interface SquareConfig { 
  2.     color?: string;
  3.     width?: number;
  4. }
  5. function createSquare(config: SquareConfig) { 
  6.     config.color = undefined;
  7.     if (config.color) { 
  8.         console.log(config);
  9.     }
  10. }

这时并没有编译报错！明明config.color定义的是string类型呀？

即便是添加–strictNullChecks进行编译，也不会报错。可见，可选属性所定义的类型，并没有被typescript严格地对待，默认并不检查undefined。需要注意的是，将上述undefined改成null时，普通编译也不报错，–strictNullChecks编译会报如下错误：

  1. error TS2322: Type 'null' is not assignable to type 'string | undefined'

从这句报错中，我们可以得出这样的结论：可选属性等价于一个union类型，union了undefined；不加–strictNullChecks编译时，null可以赋值给undfined类型。也就是说，SquareConfig的定义与下面的代码等价：

  1. interface SquareConfig { 
  2.     color: string|undefined;
  3.     width: number|undefined;
  4. }

下面比较一下可选属性与正常属性。再次修改createSquare，将color属性修改为正常属性。

  1. interface SquareConfig { 
  2.     color: string;
  3.     width?: number;
  4. }
  5. function createSquare(config: SquareConfig) { 
  6.     config.color = undefined;
  7.     if (config.color) { 
  8.         console.log(config);
  9.     }
  10. }

以–strictNullChecks编译，报错了:

error TS2322: Type ‘undefined’ is not assignable to type ‘string’

这个比较也验证了上述的结论。

问号(?)用于属性读取

问号用于属性读取，主要有两个场景：一是读取数组元素（如下面的node[i]），二是读取不确定的类型如any，union，可选类型（如node[i].data）等。如下例，保存为index.ts：

  1. interface VNodeData { 
  2.     class?: string;
  3. }
  4. interface VNode { 
  5.     sel?: string;
  6.     data?: VNodeData;
  7. }
  8. function test(node: VNode[]) { 
  9.     let i = 0;
  10.     var b = node[i].data.class;
  11.     if(b !== undefined) { 
  12.         console.log(1);
  13.     }
  14. }

用tsc —strictNullChecks index.ts，报错：.

  1. error TS2532: Object is possibly 'undefined'

下面将一一展示这一行代码var b = node[i].data.class;修改改后的效果。

1、修改为var b = node[i]?.data.class;，然后编译。报错：

  1. Object is possibly 'undefined'

2、修改为var b = node[i]?.data?.class;，然后编译。编译通过，查看编译后的对应代码为：

  1. function test(node) { 
  2.     var _a, _b;
  3.     var i = 0;
  4.     var b = (_b = (_a = node[i]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b["class"];
  5.     // var b = node[i].data.class;//报错
  6.     if (b !== undefined) { 
  7.         console.log(1);
  8.     }
  9. }

var b = node[i]?表示，如果node[i]的值为null或者undefined，则b等于undefined，否则b=node[i]。

3、修改为var b = (node[i] as VNode).data?.class;，然后编译。编译通过，查看编译后的对应代码为：

  1. function test(node) { 
  2.     var _a;
  3.     var i = 0;
  4.     var b = (_a = node[i].data) === null || _a === void 0 ? void 0 : _a["class"];
  5.     // var b = node[i]?.data?.class;
  6.     // var b = node[i].data.class;//报错
  7.     if (b !== undefined) { 
  8.         console.log(1);
  9.     }
  10. }

此时，使用node[i]时，Typescript编译器将不再对其判断是否为null和undefined。即：var b = node[i] as VNode直接会被编成var b = node[i]。

4、修改为var b = node[i]!.data?.class，然后编译。编译通过，查看编译后的对应代码为：

  1. function test(node) { 
  2.     var _a;
  3.     var i = 0;
  4.     var b = (_a = node[i].data) === null || _a === void 0 ? void 0 : _a["class"];
  5.     // var b = (node[i] as VNode).data?.class
  6.     // var b = node[i]?.data?.class;
  7.     // var b = node[i].data.class;//报错
  8.     if (b !== undefined) { 
  9.         console.log(1);
  10.     }
  11. }

可见，3和4的编译后代码完全一样，!的作用此时与as是等价的。然而，!只是用来判断null和undefined；as则可用于变更（缩小或者放大都可以）类型检测范围，仅当as后面跟的类型是一个非空类型时，两者才等价。如下例中，不能将as用法改为!。

  1. interface Cat { 
  2.     action: string;
  3. }
  4. interface Dog { 
  5.     action: string;
  6. }
  7. type Animal = Cat | Dog;
  8. let action:Animal = { } as Cat;

结论

1、as和!用于属性的读取，都可以缩小类型检查范围，都做判空用途时是等价的。只是!具体用于告知编译器此值不可能为空值（null和undefined），而as不限于此。

2、?可用于属性的定义和读取，读取时告诉编译器此值可能为空值（null和undefined），需要做判断。

发表评论

表情：
评论列表 （有 0 条评论，68人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Android项目红色感叹号

    偶尔用Eclispe开发，由于很久没有打开过项目，打开了在项目里有一个红色感叹号，项目文件又没有报错。一般有两种方法。 –1.Project --> Clean 清理一下，一

    Bertha 。Bertha 。/ 0 赞/ 261 阅读