TypeScript的类型断言在概念上看似比较简单，但对于刚刚接触TypeScript的用户来说，可能对使用场景缺乏了解。我希望这篇文章可以帮助你更好地理解类型断言。当你使用一个值，但TypeScript不知道具体的类型或者TypeScript记录的类型不能满足使用要求时，你可以使用类型断言来显式指定你要使用的类型。语法：类型断言有两种方式：使用<>语法使用as关键字<>会和JSX语法冲突，一般使用as。下面看几个类型断言的例子1.对于通过标签获取的DOM，TypeScript可以推断出类型，但是对于其他方法，TypeScript无法推断，我们可以使用类型断言来显式指定元素类型。constaEle=document.querySelector('a')//HTMLAnchorElement|nullconstcanvasEle=document.querySelector('#my_canvas')asHTMLCanvasElementReact.useEffect(()=>{if(props.autoFocus){const$this=ref.currentasHTMLInputElement;...}},[]);AntD中的示例：ActionButton.tsx2。对于空对象占位符，可以断言为特定类型以获得正确的代码提示和类型推断const[user,setUser]=useState(null);setUser(newUser);const[user,setUser]=useState({}asUser);setUser(newUser);constassertionconstassertion告诉编译器为表达式推断它可以推断的最窄或最具体的类型，而不是泛型类型。//点变成只读数组类型，修改数组内容会提示错误。让point=[3,4]作为常量；//readonly[3,4]point[0]=1//错误让我们看一个代码示例：functionuseDarkMode(){const[mode,setMode]=React.useState<'dark'|'light'>(()=>{//...return'light'})...return[mode,setMode]asconst}const[mode,setMode]=useDarkMode()//伪代码，函数组件中需要使用hook我们来对比下使用asconst后mode和setMode的区别：在使用constassertion之前，mode和setMode的类型是：constmode:"dark"|“光”|反应。调度>constsetMode：“深色”|“光”|React.Dispatch>调用setMode时会提示错误，因为'dark'|'light'不是可调用类型。使用asconst断言后，mode和setMode类型为：constmode:"dark"|“浅色”常量设置模式：React.Dispatch>调用参数错误时，也会有类型错误提示。可以看出，对于一个数组来说，每个元素的类型就是整个数组元素类型的联合类型constarr=[1,'2']//constarr:(string|number)[]使用as之后const断言，数组将变成只读数组，每个元素都有自己的特定类型和更好的错误消息。让我们看一下rxjs中的示例：fromEvent.ts//这些常量用于使用下面的数组映射创建处理程序注册表函数。//这些常量用于使用以下数组映射创建处理程序注册表函数constnodeEventEmitterMethods=['addListener','removeListener']作为常量；consteventTargetMethods=['addEventListener','removeEventListener']asconst;constjqueryMethods=['on','off']asconst;使用asconst后，类型检测更加严格：readonlyarray，每个元素都有自己的字面量类型，不能调整为其他值，杜绝误修改的可能。在访问数组元素或进行数组解构时，由于数组的长度是固定的，避免了越界，不易出错。constassertion与typeof一起使用：useSelection.tsxstringasconst使用后，变量具有字面量类型，typeof操作符可以提取其字面量类型使用。exportconstSELECTION_ALL='SELECT_ALL'asconst;exportconstSELECTION_INVERT='SELECT_INVERT'asconst;导出类型INTERNAL_SELECTION_ITEM=|选择项|类型SELECTION_ALL|类型SELECTION_INVERT；为了规避类型检查或断言TypeScript只允许类型的更具体类型，此规则可以防止一些错误的转换：constx="hello"asnumber;//错误：将'string'转换为'number'可能是一个错误，因为两种类型都没有完全重叠。如果这是有意的，首先将表达式转换为“未知”。再来看Antd中的另一个用法示例：any).cancel();};},[props.target]);handleScroll是一个函数，只是在其他文件中添加了cancel属性。这里，如果直接调用cancel方法，TypeScript会提示错误，可以断言为any避免TypeScript的类型检查双重断言对于我们已经确定的变量类型，如果没有重叠，我们可以先断言一个宽泛的类型（任何，未知），然后断言一个特定的类型。//esdefaultexport应该使用const而不是letconst对于可以缩小的类型，请尝试使用类型缩小而不是断言。
