TypeScript 初学者指南：7 个致命错误及如何避免

引言：为什么 TypeScript 会“咬”新手，或者说如何避免搞砸第一个项目

你是否曾觉得 TypeScript 就像一位严厉的老师，会为每一个小细节扣分？如果是这样——欢迎加入这个俱乐部。每两个从 JavaScript 转向 TypeScript 的新手中，就有一个会犯同样的错误。这很正常：TypeScript 确实更复杂，它要求纪律性和对类型的理解。

但好消息是：大多数学习 TypeScript 时的错误是可以预测和预防的。在本文中，我总结了初学者最常踩的 7 个坑。我们将逐一分析每个错误，附上代码示例，解释为什么这样做不好，并展示正确的做法。

如果你刚开始学习 TypeScript，或者已经碰过几次壁——这篇文章将为你节省数小时的调试时间和精力。我们开始吧！

错误 #1：无节制地使用 any（万恶之源）

新手通常的做法

学习 TypeScript 的人中最常见的错误——到处写 any。他们觉得：“哎呀，没指定类型而已，代码不也能跑吗？”

// ❌ 不好：any 抹杀了 TypeScript 的所有优势\nfunction processData(data: any) {\n    console.log(data.name.toUpperCase());\n    return data.price * 2;\n}\n\nconst result = processData({ name: "笔记本电脑", price: 500 });\n// 目前还能工作……直到你传入 null\nprocessData(null); // 运行时错误！

为什么这是错误

any 是 TypeScript 中的黑洞。当你写 any 时，你是在告诉编译器：“让开，我自己来。”然后它真的让开了。你失去了自动补全、类型检查和对愚蠢错误的防护。TypeScript 又变回了 JavaScript——带着它所有的缺点。

如何修复

使用具体的类型。如果类型事先未知——unknown 是你的朋友。它会强制你在使用前检查数据。

// ✅ 好：具体类型和 unknown\nfunction processData(data: { name: string; price: number }) {\n    console.log(data.name.toUpperCase());\n    return data.price * 2;\n}\n\n// 或者如果类型确实未知：\nfunction safeProcess(data: unknown) {\n    if (typeof data === 'object' && data !== null && 'name' in data) {\n        // 现在 TypeScript 知道 data 是一个带有 name 字段的对象\n        console.log((data as { name: string }).name);\n    }\n}

建议：在 ESLint 中启用 no-explicit-any 规则——它会阻止你在没有充分理由的情况下使用 any。

错误 #2：忽略 strict 模式（或者“为什么我的代码能跑，但结果不对”）

新手通常的做法

许多学习 TypeScript 的初学者会在 tsconfig.json 中关闭严格模式，或者根本不启用它。他们觉得：“差不多得了，编译错误少一点。”

// ❌ 不好：strict: false\n// tsconfig.json\n{\n    "compilerOptions": {\n        "strict": false, // 错误！\n        "noImplicitAny": false,\n        "strictNullChecks": false\n    }\n}\n\n// 现在这段代码可以无错误地编译：\nfunction greet(name: string | null) {\n    console.log(name.toUpperCase()); // 潜在的 null！\n}\ngreet(null); // 运行时错误：无法读取 null 的属性

为什么这是错误

没有严格模式，TypeScript 就失去了一半的力量。你不会收到关于潜在的 null 和 undefined 的警告，不会检查参数类型——最终在生产环境中遇到 bug。

如何修复

始终启用 strict: true。这会一次性激活所有严格检查。

// ✅ 好：strict: true\n{\n    "compilerOptions": {\n        "strict": true,\n        "target": "ES2020",\n        "module": "ESNext"\n    }\n}\n\n// 现在 TypeScript 会强制你处理 null：\nfunction g