TypeScript 初学者常犯的错误排行榜

TypeScript 初学者常犯的顶级错误

TypeScript 是一个强大的工具，能帮助你编写更可靠、更易维护的代码。然而，和任何语言一样，它也暗藏陷阱，尤其是对于新手。许多开发者从 JavaScript 转来，继续使用旧习惯，从而抵消了静态类型检查的优势。在本文中，我们将剖析 TypeScript 初学者最常犯的 4 个错误，展示如何修正它们，并给出实用建议。如果你刚开始学习 TypeScript，这篇文章将帮助你避免常见的坑。

1. 滥用 any 类型

最常见的错误是，在 TypeScript 无法自动推断类型的地方，到处使用 any。初学者经常这样写：

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

这完全关闭了对变量 data 的类型检查。你将失去 TypeScript 的所有优势：自动补全、错误检查和代码文档。

应该怎么做？

始终尝试显式描述类型，即使它很复杂。如果类型在编写代码时确实未知，请使用 unknown：

function processData(data: unknown) {    if (typeof data === 'object' && data !== null && 'name' in data) {        console.log((data as { name: string }).name.toUpperCase());    }}

或者，更好的做法是描述一个接口：

interface DataItem {    name: string;    age?: number;}

function processData(data: DataItem) {    console.log(data.name.toUpperCase());}

建议： 在 tsconfig.json 中设置 noImplicitAny: true。编译器会对任何隐式的 any 报错，这样你就会习惯编写类型。

2. 忽略 strictNullChecks

在 JavaScript 中，null 和 undefined 是普通值。在没有严格检查的 TypeScript 中，你可能会意外访问 null 的属性，并在运行时出错。典型错误：

function getLength(str: string | null) {    return str.length; // 错误：Object is possibly 'null'}

如果 strictNullChecks 被关闭，TypeScript 不会警告你，错误只会在运行时出现。

解决方案： 在 tsconfig.json 中启用 strict: true。这会自动激活 strictNullChecks。现在 TypeScript 会强制你处理 null 和 undefined：

function getLength(str: string | null): number {    if (str === null) {        return 0;    }    return str.length;}

// 或者使用 optional chaining 和 nullish coalescing：function getLengthSafe(str: string | null): number {    return str?.length ?? 0;}

重要： 永远不要关闭 strictNullChecks。这是 TypeScript 的主要特性之一，能防止数百万个 bug。

3. 对 async/await 和 Promise 的处理不当

TypeScript 严格类型化异步函数，但新手经常忘记 Promise 的返回类型。错误示例：

async function fetchUser(id: number) {    const response = await fetch(`/api/users/${id}`);    return response.json(); // TypeScript 可能不知道确切的类型}

这里 response.json() 返回 Promise<any>，你再次失去了类型信息。第二个常见问题是忘记处理错误：

async function loadData() {    const data = await fetchUser(1); // 如果 fetch 失败，错误未被处理    console.log(data.name);}

如何正确处理？

始终显式指定