TypeScript 初学者常犯的错误：如何避免它们

TypeScript 初学者常犯的错误：如何编写干净安全的代码

TypeScript 是一款功能强大的工具，能帮助开发者编写更可预测、更安全的 JavaScript 代码。然而，从 JS 切换过来时，许多初学者会犯同样的错误，从而抵消了严格类型带来的好处。在本文中，我们将分析 TypeScript 初学者最常犯的 4 个错误，并通过清晰的示例展示如何修正它们。

1. 过度使用 any 类型

最常见也是最危险的错误，是在 TypeScript 要求你指定类型的地方到处使用 any。这会让你的代码变回普通的 JavaScript，使你失去编辑器提示和编译时的类型检查。

❌ 反面示例：

function processData(data: any) {    return data.name.toUpperCase();}

const result = processData(42); // 运行时错误！数字没有 name 属性

✅ 正确示例：

interface UserData {    name: string;    age: number;}

function processData(data: UserData): string {    return data.name.toUpperCase();}

const user: UserData = { name: "Ivan", age: 30 };const result = processData(user); // 正常工作

提示： 如果类型确实未知，尝试使用 unknown 而不是 any。unknown 会强制你在使用值之前进行类型检查。

2. 忽略严格模式

许多初学者开发者在 tsconfig.json 中禁用严格模式（strict: true），以便“不被错误分心”。这使你失去了 TypeScript 的主要优势——早期发现潜在错误。

严格模式包含的内容：

• strictNullChecks —— 禁止将 null 和 undefined 赋值给变量，除非显式声明。
• noImplicitAny —— 禁止隐式使用 any。
• strictFunctionTypes —— 更严格的函数类型检查。

❌ 无严格模式：

function getLength(value: string | null) {    return value.length; // 如果 value = null 则运行时错误}

✅ 启用严格模式：

function getLength(value: string | null): number {    if (value === null) {        return 0; // 显式处理 null    }    return value.length; // TypeScript 知道 value 是 string}

提示： 始终在 tsconfig.json 中启用 "strict": true。这将在未来为你节省数小时的调试时间。

3. 异步操作处理不当

Promises 和 async/await 的错误是经典问题。初学者经常忘记处理错误或错误地标注异步函数的类型。

❌ 反面示例：

async function fetchData(url: string) {    const response = await fetch(url);    const data = response.json(); // 忘记 await！    return data;}

✅ 正确示例：

interface ApiResponse {    id: number;    title: string;}

async function fetchData(url: string): Promise<ApiResponse> {    try {        const response = await fetch(url);        if (!response.ok) {            throw new Error(`HTTP error! status: ${response.status}`);        }        const data: ApiResponse = await response.json();        return data;    } catch (error) {        console.error("Error loading data:", error);        throw error; // 重新抛出错误    }}

提示： 始终使用 try...catch 来处理异步函数中的错误，并且在调用返回 promise 的方法时不要忘记 await。

4. 忽略