# TypeScript 严格模式最佳实践 ## 概述这项技能涵盖了适用于所有框架的严格 TypeScript 实践。它专注于避免“any”，使用正确的类型注释，并利用 TypeScript 的类型系统来获得更安全、更可维护的代码。 ## 黄金法则：永远不要使用“any” **关键规则：** 许多代码库启用了“@typescript-eslint/no-explicit-any”。使用“any”将导致构建失败。 **为什么`any`是危险的：** * 违背了 TypeScript 类型系统的目的 * 隐藏编译时会捕获的错误 * 通过代码库传播类型不安全性 * 使重构变得困难且容易出错 ## `any` 的替代品 ### 1\.使用特定类型 **❌ 错误：** 函数 processData(数据：任意) { ... } 常量项：any[] = []； **✅ 正确：** 函数 processData(数据: { id: 字符串; 名称: 字符串 }) { ... } const 项： string[] = []； ### 2\.当类型确实未知时使用“unknown” “unknown”是“any”的类型安全对应项。它迫使您在使用之前缩小类型范围。 **❌ 错误：** 函数handleResponse（响应：任意）{ 返回响应.数据.名称; // 没有类型检查！ } **✅ 正确：** 函数handleResponse（响应：未知）{ 如果（ typeof 响应 ===“对象”&& 响应 !== null && 响应中的“数据”&& typeof (响应为 { data:unknown }).data === "object" ）{ const data = (响应为 { data: { name: string } }).data; 返回数据.名称； } throw new Error("无效的响应格式"); } ### 3\.对可重用组件使用泛型 **❌ 错误：** 函数wrapValue（值：任何）：{包装：任何} { 返回 { 包装：值 }; } **✅ 正确：** 函数wrapValue(值: T): { 包裹: T } { 返回 { 包装：值 }; } // 用法 constwrappedString=wrapValue(“你好”); // { 包裹：字符串 } constwrappedNumber=wrapValue(42); // { 包裹：数字 } ### 4\.使用联合类型实现多种可能性 **❌ 错误：** 函数handleInput（输入：任意）{ if (typeof input === 'string') { ... } if (typeof input === '数字') { ... } } **✅ 正确：** 函数handleInput（输入：字符串|数字）{ if (typeof input === 'string') { ... } if (typeof input === '数字') { ... } } ### 5\.使用类型保护进行运行时检查界面用户{ id：字符串；名称：字符串；电子邮件：字符串； } 函数 isUser(值：未知)：值为用户 { 返回（ typeof 值 === "对象" && 值！==空&& 值中的“id”&& 值中的“名称”&& “电子邮件”的值 && typeof (value as User).id === "string" && typeof (value as User).name === "string" && typeof (值作为用户).email === "string" ）； } 函数 processUser（数据：未知）{ if (isUser(数据)) { // 数据现在输入为 User console.log(数据.名称); } } ### 6\.对动态对象使用“Record” **❌ 错误：** 常量缓存：任意 = {}；缓存["键"] = "值"; **✅ 正确：** const 缓存：Record<字符串，字符串> = {}；缓存["键"] = "值"; // 或者使用特定的键 const userSettings: Record<"主题" | “语言”，字符串> = { 主题：“黑暗”，语言：“en”， }; ### 7\.对灵活对象使用索引签名接口配置{ 名称：字符串；版本：字符串； [键：字符串]：字符串|数量 |布尔值； // 附加属性 } 常量配置：配置= { 名称：“我的应用程序”，版本：“1.0.0”，调试：正确，端口：3000， }; ## 常见事件处理程序类型 ### React 事件类型 // 表单事件 const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); // ... }; // 输入事件 const handleChange = (e: React.ChangeEvent) => { const 值 = e.target.value; // ... }; // 点击事件 const handleClick = (e: React.MouseEvent) => { // ... }; // 键盘事件 const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { ... } }; // 焦点事件 const handleFocus = (e: React.FocusEvent) => { // ... }; ### DOM 事件类型（非 React） // 通用 DOM 事件 document.addEventListener('click', (e: MouseEvent) => { ... }); document.addEventListener('keydown', (e: KeyboardEvent) => { ... }); document.addEventListener('提交', (e: SubmitEvent) => { ... }); ## Promise 和异步类型 ### 输入异步函数 // 返回承诺的函数异步函数 fetchUser(id: string): Promise { const 响应 =等待 fetch(`/api/users/${id}`); 返回response.json(); } // 箭头函数变体 const fetchUser = async (id: string): Promise => { const 响应 =等待 fetch(`/api/users/${id}`); 返回response.json(); }; ### Promise 类型模式 // 具有显式类型的 Promise const userPromise: Promise = fetchUser("123"); // 等待类型推断 const user = 等待 fetchUser("123"); // 用户 // Promise.all 具有多种类型 const [用户，帖子] =等待 Promise.all([fetchUser("123"), fetchPosts("123")]); // [用户，帖子[]] ## 函数类型 ### 回调类型 // 输入回调参数函数处理项目（项目：字符串[]，回调：（项目：字符串，索引：数字）=> void ）{ items.forEach(回调); } // 替代方案：提取类型类型 ItemCallback = (项目: 字符串, 索引: 数字) => void; 函数 processItems(items: string[], 回调: ItemCallback) { items.forEach(回调); } ### 重载函数 // 不同输入/输出类型的函数重载函数解析（输入：字符串）：对象；函数解析（输入：缓冲区）：对象；函数解析（输入：字符串|缓冲区）：对象{ if (输入类型 === "字符串") { 返回 JSON.parse(输入); } 返回 JSON.parse(input.toString()); } ## 类型断言（谨慎使用）仅当您了解的不仅仅是 TypeScript 时才使用类型断言： // DOM 元素断言（当你知道元素类型时） const input = document.getElementById("email") as HTMLInputElement; // 响应数据断言（当您信任该 API 时） const data = (await response.json()) as ApiResponse; // 非空断言（当你知道它不为空时） const element = document.querySelector(".button")!; **警告：** 类型断言会绕过 TypeScript 的检查。尽可能首选类型保护。 ## 实用程序类型 ### 内置实用程序类型 // 部分 - 所有属性都是可选的类型 PartialUser = Partial<用户>; // 必需 - 所有属性均必需类型必需用户 = 必需<用户>; // Pick - 选择特定属性类型 UserName = Pick<用户, "名称" | “电子邮件”>; // 省略 - 排除特定属性类型 UserWithoutId = 省略<用户，“id”>; // 只读 - 不可变属性类型 ReadonlyUser = Readonly<用户>; // 记录-创建对象类型类型 UserMap = Record<字符串，用户>; // ReturnType - 提取函数返回类型 type FetchUserReturn = ReturnType; // 参数 - 提取函数参数 type FetchUserParams = 参数 ; ## 受歧视的工会处理多个相关类型的模式：类型 Result = { 成功: true;数据：T } | { 成功：假；错误：字符串}；函数handleResult（结果：Result）{ if (结果.成功) { // TypeScript 知道 result.data 存在于此处 console.log(结果.数据); } 否则{ // TypeScript 知道这里存在 result.error 控制台.错误(结果.错误); } } ## 模块增强扩展现有类型而不修改原始类型： // 扩展快速请求声明模块“express”{ 接口请求{ 用户？：用户； } } // 扩展环境变量声明全局{ 命名空间 NodeJS { 接口 ProcessEnv { DATABASE_URL：字符串； API_KEY：字符串； } } } ## 常见陷阱 ### 陷阱 1：对 JSON 数据使用 `any` **❌ 错误：** const 数据：any = JSON.parse(jsonString); **✅ 正确：** 接口预期数据{ id：字符串；名称：字符串； } const 数据：未知 = JSON.parse(jsonString); // 然后使用类型保护或模式验证（zod 等）进行验证 ### 陷阱 2：回调中隐式“any” **❌ 错误：** // 'item' 具有隐式 'any' 类型 items.map((item) => item.name); **✅ 正确：** items.map((item: Item) => item.name); // 或者确保“items”具有正确的类型：Item[] ### 陷阱 3：对象属性访问 **❌ 错误：** 函数 getValue(obj: 任意, 键: 字符串) { 返回 obj[键]； } **✅ 正确：** 函数 getValue，K 扩展 keyof T>( 对象：T，键：K ): T[K] { 返回 obj[键]； } ### 陷阱 4：空数组类型 **❌ 错误：** 常量项= []； // 任何[] **✅ 正确：** const 项： string[] = []； // 或 const 项：Array = []； ## 要启用的 ESLint 规则对于严格的 TypeScript，启用以下规则： { “规则”：{ "@typescript-eslint/no-explicit-any": "错误", "@typescript-eslint/strict-boolean-expressions": "警告", "@typescript-eslint/no-unsafe-assignment": "错误", "@typescript-eslint/no-unsafe-member-access": "错误", "@typescript-eslint/no-unsafe-call": "错误", “@typescript-eslint/no-unsafe-return”：“错误” } } > **注意**：不要使用已弃用的“@typescript-eslint/no-implicit-any-catch”规则，而是在“tsconfig.json”（TypeScript 4.4+）中设置“useUnknownInCatchVariables: true”。这确保 catch 子句变量的类型为“unknown”而不是“any”。 ## 快速参考 |而不是“任何” |使用 | | ---------------- | ------------------------ | --- | |未知数据 | `未知` | |灵活型|泛型 `` | |多种类型|联盟`A | B`| |动态按键 | `记录` | |可空 | `T |空` | |可选| `T |未定义`或`T？` | |回拨| `(args) => 返回类型` | |空数组 | `类型[]` | | JSON 数据 | `unknown` \+ 类型保护 | ## 总结 * **永远不要使用`any`** \ - 它违背了 TypeScript 的目的 * **对真正未知的类型使用`unknown`**，然后使用类型保护缩小范围 * **使用泛型**来实现可重用、类型安全的组件 * **使用联合类型**来获得有限的可能性集 * **对复杂的状态机使用有区别的联合** * **启用严格的 ESLint 规则** 以自动捕获违规行为

Typescript 严格模式

包含技能