# 避免尖括号类型断言尖括号类型断言语法 (`value`) 在 TypeScript 中已弃用，特别是在与 JSX 语法冲突的 TSX 文件中。 ## 为什么要避免 `` 语法 * **JSX 冲突** ：与 TSX 文件不兼容（React、Preact 等） * **语法不一致**：现代 TypeScript 使用 `as Type` * **可读性降低**：看起来像泛型或 JSX * **工具问题**：有些工具不能很好地处理它 ## 现代替代方案：`as Type` ### 基本替换 **已弃用：** 常量值 = <字符串>someValue; const num = <数字>输入； **现代：** const value = someValue 作为字符串； const num = 输入数字； ### 复杂类型 **已弃用：** const user = <用户>jsonData; const config = 设置； **现代：** const user = jsonData 作为用户； const config = 设置为 AppConfig； ## 更好：完全避免类型断言类型断言绕过类型检查，应尽可能避免。 ### 1\.使用类型保护代替 **不好：** 函数 processValue（值：未知）{ const str = 字符串值；返回 str.toUpperCase(); } **好：** 函数 processValue（值：未知）{ if (typeof value === 'string') { 返回值.toUpperCase(); } 抛出新的错误（'预期的字符串'）； } ### 2\.使用验证函数 **不好：** const user = apiResponse 作为用户； **好：** 函数 isUser(值：未知)：值为用户 { 返回（ typeof 值 === '对象' && 值！==空&& 值中的“id”&& 值中的“名称”&& typeof value.id === '数字' && typeof value.name === '字符串' ）； } const 解析 = apiResponse; if (isUser(已解析)) { const 用户 = 已解析； } 否则{ throw new Error('无效的用户数据'); } ### 3\.使用验证库 **最好：** 从 'zod' 导入 { z }； const UserSchema = z.object({ id: z.number(), 名称： z.string(), 电子邮件：z.string().email(), }); type User = z.infer; const user = UserSchema.parse(apiResponse); ### 4\.改进类型推断 **不好：** const element = document.getElementById('myId') as HTMLButtonElement; **更好：** const element = document.getElementById('myId'); if (HTMLButtonElement 的元素实例) { element.addEventListener('点击', handler); } **或者使用带有类型推断的querySelector：** const element = document.querySelector('#myId'); 如果（元素）{ element.addEventListener('点击', handler); } ### 5\.使用受歧视的工会 **不好：** 函数handleEvent（事件：事件）{ const mouseEvent = 事件作为 MouseEvent； console.log(mouseEvent.clientX); } **好：** 输入应用程序事件 = | { 类型：'鼠标'； clientX：号码；客户Y: 号码 } | { 类型：'键盘'；键：字符串} | { 类型：'自定义'；数据：未知}；函数handleEvent（事件：AppEvent）{ 开关（事件类型）{ 案例“鼠标”： console.log(event.clientX); 休息; 案例“键盘”： console.log(事件.key); 休息; 案例“定制”： console.log(事件.数据); 休息; } } ## 多伦多证券交易所特定问题在 TSX 文件中，尖括号语法会导致语法错误： **将导致 TSX 中的语法错误：** const 组件 = () => { const value = <字符串>getData(); 返回

{值}

; }; **必须使用`as`语法：** const 组件 = () => { const value = getData() 作为字符串；返回

{值}

; }; **更好 - 正确验证：** const 组件 = () => { 常量数据 = getData(); if (数据类型!== '字符串') { 抛出新的错误（'预期的字符串'）； } 返回

{数据}

; }; ## 当需要断言时如果必须使用断言（极少数情况）： ### 1\.对文字类型使用“as const” 常量配置= { apiUrl: 'https://api.example.com', 超时：5000，作为常量； ### 2\.使用“作为类型”（切勿使用“<类型>”） const 值 = 未知值 as SomeType； ### 3\.记录为什么它是安全的 const element = document.getElementById('app-root') as HTMLDivElement; ## 迁移策略 1. **查找所有尖括号断言：** grep -r '<[A-Z][a-zA-Z]*>' --include="*.ts" --include="*.tsx" 2. **替换为`as`语法：** * `<类型>值` → `值作为类型` 3. **审查每个断言：** * 可以用类型保护装置代替吗？ * 可以使用验证库吗？ * 真的有必要吗？ 4. **启用 linting：** { “规则”：{ “@typescript-eslint/一致类型断言”：[ “错误”， { "assertionStyle": "as", "objectLiteralTypeAssertions": "从不" } ] } } ## ESLint 配置强制执行“as”语法并阻止断言： { “规则”：{ “@typescript-eslint/一致类型断言”：[ “错误”， { "assertionStyle": "as", "objectLiteralTypeAssertions": "从不" } ], “@typescript-eslint/no-unnecessary-type-assertion”：“错误” } } ## 总结 **切勿使用尖括号语法：** * **当断言不可避免时使用** `as Type` * **更喜欢**类型保护而不是断言 * **使用**外部数据验证库 * **在运行时验证**以确保安全 * **记录**为什么断言是必要的 * **启用** linting 以强制一致性

避免尖括号断言

包含技能