TypeScript常见错误及代码示例

1. 类型定义错误

1.1 忘记类型注解

错误示例:

let message = "Hello"; // 缺乏类型注解

正确示例:

let message: string = "Hello";

1.2 类型不匹配

错误示例:

let age: string = 25;

正确示例:

let age: number = 25;

2. 接口和类型别名使用错误

2.1 接口属性遗漏

错误示例:

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

let person: Person = {
  name: "John"
};

正确示例:

let person: Person = {
  name: "John",
  age: 30
};

2.2 类型别名混淆

错误示例:

type Name = string;
let userName: Name = 123;

正确示例:

let userName: Name = "Alice";

3. 泛型使用错误

3.1 泛型参数省略

错误示例:

function identity<T>(arg: T): T {
  return arg;
}

let output = identity(5); // 缺少泛型参数

正确示例:

let output = identity<number>(5);

3.2 泛型约束不明确

错误示例:

function printLength<T>(arg: T): void {
  console.log(arg.length); // 缺乏length属性的类型约束
}

正确示例:

function printLength<T extends { length: number }>(arg: T): void {
  console.log(arg.length);
}

4. 类和继承错误

4.1 忘记构造函数调用

错误示例:

class Animal {
  constructor(public name: string) {}
}

class Dog extends Animal {
  constructor() {
    super(); // 忘记传入name参数
  }
}

正确示例:

constructor(name: string) {
  super(name);
}

4.2 私有成员访问

错误示例:

class Person {
  private age: number;

  constructor(age: number) {
    this.age = age;
  }

  getAge(): number {
    return this.age; // 正确
  }
}

let person = new Person(30);
console.log(person.age); // 无法访问私有成员

正确示例:

console.log(person.getAge());

5. 模块和导入导出错误

5.1 导入路径错误

错误示例:

import { notFound } from "./utils"; // utils中没有notFound

正确示例:

import { found } from "./utils";

5.2 导出成员遗漏

错误示例:

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}

// app.ts
import { add } from "./math";
import { subtract }; // 缺少subtract的导出

正确示例:

export function subtract(a: number, b: number): number {
  return a - b;
}

6. 静态类型检查错误

6.1 类型断言错误

错误示例:

const data = { name: "John", age: 30 };
const name = data as string; // 错误的类型断言

正确示例:

const name = data.name; // 正确的属性访问

6.2 类型兼容性错误

错误示例:

function greet(person: { name: string }): void {
  console.log(`Hello, ${person.name}!`);
}

greet({ name: "John", age: 30 }); // age不是必需的

正确示例:

greet({ name: "John" });

TypeScript的错误类型广泛，涵盖了从简单的类型不匹配到复杂的模块和类设计问题。在实际开发中，充分利用TypeScript的静态类型检查能力，结合IDE的智能提示和错误诊断，可以帮助开发者及时发现并修正代码中的错误，从而编写出更加健壮和可维护的代码。

为了防止这些错误，建议在开发过程中遵循以下几点：

• 类型注解：始终为变量、函数参数和返回值添加类型注解。
• 接口和类型别名：使用接口和类型别名清晰地定义数据结构和类型。
• 泛型：正确使用泛型，确保类型约束和参数传递的准确性。
• 类和继承：注意私有成员的封装，正确实现构造函数和继承。
• 模块和导入导出：仔细检查导入和导出的模块和成员，确保路径和成员名的准确性。
• 静态类型检查：利用TypeScript的静态类型检查功能，避免运行时错误。

通过以上措施，可以大大减少TypeScript开发中的常见错误，提高代码质量和开发效率。