TypeScript中的类型断言

也想出现在这里？点击联系我~

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

类型断言

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

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

1. constdata:object=['a','b','c'];//(A)
3. //@ts-ignore:Property'length'doesnotexistontype'object'.
4. data.length;//(B)
6. assert.equal(
7. (dataasArray<string>).length,3);//(C)

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

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

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

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

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

1. <Array<string>>data

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

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

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

1. interfaceNamed{
2. name:string;
3. }
4. functiongetName(obj:object):string{
5. if(typeof(objasNamed).name==='string'){//(A)
6. return(objasNamed).name;//(B)
7. }
8. return'(Unnamed)';
9. }

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

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

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

与类型断言相关的构造

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

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

1. consttheName='Jane'as(null|string);
3. //@ts-ignore:Objectispossibly'null'.
4. theName.length;
6. assert.equal(
7. theName!.length,4);//OK

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

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

1. functiongetLength(strMap:Map<string,string>,key:string):number{
2. if(strMap.has(key)){
3. //Wearesurexisnotundefined:
4. constvalue=strMap.get(key)!;//(A)
5. returnvalue.length;
6. }
7. return-1;
8. }

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

1. functiongetLength(strMap:Map<string,string>,key:string):number{
2. //%inferred-type:string|undefined
3. constvalue=strMap.get(key);
4. if(value===undefined){//(A)
5. return-1;
6. }
8. //%inferred-type:string
9. value;
11. returnvalue.length;
12. }

(3) 定值断言

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

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

1. classPoint1{
2. //@ts-ignore:Property'x'hasnoinitializerandisnotdefinitely
3. //assignedintheconstructor.
4. x:number;
6. //@ts-ignore:Property'y'hasnoinitializerandisnotdefinitely
7. //assignedintheconstructor.
8. y:number;
10. constructor(){
11. this.initProperties();
12. }
13. initProperties(){
14. this.x=0;
15. this.y=0;
16. }
17. }

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

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

原文地址:https://mp.weixin.qq.com/s?__biz=MzI3NzIzMDY0NA==&mid=2247503494&idx=1&sn=0de5d22df096ea64238f0c66181f7a70&chksm=eb6bebdddc1c62cb2efdee41c09ce9f96b7cef54fb797d72f850818ea458e9fa5d2115a7417d&mpshare=1&s