核心内容摘要
解锁“胡桃腿法”：不止于熟练，更是艺术的升华
TypeScript 类型断言
类型断言举个简单例子// 定义一个只能是 a/b/c 的类型typeTa|b|c;// TS 推断 foo 的类型是 string太宽泛了letfooa;// 报错string 类型不能赋值给 T 类型letbar:Tfoo;这里 foo 明明是 ‘a’但 TS 推断成了 string 类型T 的父类型父类型不能赋值给子类型就报错了。
而类型断言就是用来“绕开”TS 的自动推断手动指定值的类型——你比编译器更了解自己的代码直接告诉它该怎么识别这个值改一下上面的例子加上断言就不报错了typeTa|b|c;letfooa;// 断言 foo 的类型是 TTS 直接照做letbar:TfooasT;// 正确注意类型断言不会真的改变值的类型只是给编译器“提个醒”运行时该是什么类型还是什么类型。
类型断言的两种写法推荐第二种TS 提供了两种断言语法功能完全一样只是写法不同// 写法1尖括号形式和 JSX 语法冲突不推荐letbar:TTfoo;// 写法2as 形式推荐无冲突更易读letbar:TfooasT;因为 React 的 JSX 语法也用尖括号比如div为了避免混淆现在都用值 as 类型的写法。
例子操作 DOM 元素日常开发中最常用的场景——获取输入框并读取 value 属性// TS 推断 username 的类型是 HTMLElement | nullconstusernamedocument.getElementById(username);if(username){// 断言成输入框类型才能读取 value 属性(usernameasHTMLInputElement).value;// 正确}这里的圆括号不能少否则 TS 会把username as HTMLInputElement.value当成整体直接报错
类型断言不可以随便使用你不能把一个值断言成完全无关的类型TS 会拦着你constn1;// 报错数值不能断言成字符串完全无关constm:stringnasstring;断言的规则实际类型和断言类型必须“兼容”——要么是父子类型要么是子父类型比如 string 可以断言成 ‘a’|‘b’反过来也可以。
如果非要断言成完全无关的类型不推荐可以走“弯路”先断言成unknown所有类型的父类型再断言成目标类型constn1;// 先转 unknown再转 string不报错了constm:stringnasunknownasstring;
超实用的特殊断言as const日常开发中我们经常遇到“let 变量被推断成宽泛类型”的问题比如letsJavaScript;// 定义只能传这三个值的类型typeLangJavaScript|TypeScript|Python;functionsetLang(language:Lang){}// 报错string 类型不能传给 Lang 类型setLang(s);解决方法有两个要么把 let 改成 constTS 会推断成固定值类型要么用as const断言// 断言后s 的类型变成 JavaScript不是 string 了letsJavaScriptasconst;setLang(s);// 正确as const的核心作用把值断言成“不可变的常量类型”缩小 TS 的推断范围。
as const 还能用于对象/数组// 普通声明x/y 都是 number 类型constv1{x:1,y:2};// 断言整个对象x
y2且只读constv2{x:1,y:2}asconst;// 普通数组number[] 类型consta1[1,2,3];// 断言后只读元组 [1,2,3]consta2[1,2,3]asconst;比如数组断言成元组后传给固定参数的函数就不报错了functionadd(x:number,y:number){returnxy;}constnums[1,2]asconst;add(...nums);// 正确
非空断言!保证值不是 null/undefined如果一个值可能是 null/undefined但你确定它一定有值用!做非空断言// TS 担心 root 是 null调用方法会报错constrootdocument.getElementById(root);// root.addEventListener(click, () {}); // 报错// 加 ! 断言root 一定不是 nullconstrootdocument.getElementById(root)!;root.addEventListener(click,(){});// 正确非空断言别滥用只有你确定值非空时才用否则运行时可能报错。
更稳妥的方式是手动判断constrootdocument.getElementById(root);if(root){root.addEventListener(click,(){});}