TypeScript 初学者常见错误大全：从 A 到 Z

初级TypeScript开发者的常见错误：从A到Z

TypeScript是一种强大的工具，它为JavaScript添加了静态类型，使代码更加可预测和安全。然而，从JS到TS的过渡常常伴随着一些典型错误，这些错误可能会抵消严格类型带来的所有好处。在本文中，我们将分析初级TypeScript开发者最常见的错误——从过度使用any到错误地处理null和undefined。您将学习如何避免这些错误，编写干净、可靠的代码。

1. 过度使用any类型

初学者最常见的错误是在任何"不想思考"的地方都使用any。TypeScript就是为了类型而生，而any完全禁用了类型检查。

// ❌ 错误function processData(data: any) {  return data.length; // 如果data是数字，运行时出错}

// ✅ 正确function processData(data: string | unknown[]) {  return data.length; // TypeScript会检查data是否具有length属性}

提示：如果类型确实未知，请使用unknown代替any。始终努力使用具体类型。

2. 忽略strictNullChecks

默认情况下，strictNullChecks是启用的，但许多初学者为了"简化"而禁用它。这会导致运行时错误。

// ❌ 错误（如果strictNullChecks: false）let name: string = null; // 编译通过，但稍后会报错

// ✅ 正确let name: string | null = null; // 显式指定可能为nullif (name !== null) {  console.log(name.toUpperCase());}

提示：永远不要禁用strictNullChecks。使用可选链（?.）和空值合并（??）来安全地处理null/undefined。

3. 数组类型的错误使用

混淆Array<T>和T[]是正常的，但主要错误在于不指定元素类型。

// ❌ 错误let items = []; // 类型为any[]items.push(1);items.push("hello"); // 编译通过，但我们失去了控制

// ✅ 正确let items: number[] = []; // 只能包含数字let strings: Array<string> = []; // 另一种语法

提示：始终标注数组类型，特别是在声明时数组为空的情况下。使用readonly来实现不可变性。

4. 函数与回调的错误类型标注

初学者经常忘记为函数参数标注类型，或者将Function用作类型。

// ❌ 错误function fetchData(callback: Function) {  callback("data", 123);}fetchData((err: string, data: number) => {}); // 错误：期望2个参数

// ✅ 正确function fetchData(callback: (err: string | null, data: number) => void) {  callback(null, 123);}

提示：显式标注参数和返回值类型。对于回调，使用箭头函数类型或type/interface。

5. 混淆interface和type

许多人不知道它们的区别，并互换使用，这可能导致错误。

// interface — 可以合并（声明合并）interface User {  name: string;}interface User {  age: number;} // 编译通过

// type — 无法合并，但可以创建联合/交叉类型type Status = "active" | "inactive";type Admin = User & { role: "admin" };

提示：对于可扩展的对象（例如在库中），使用interface。对于联合类型、元组和复杂组合，使用type。

6. 忽略readonly和const