H
Hasspi

TypeScript 最佳实践

前端开发
TypeScript 最佳实践

为什么使用 TypeScript？

TypeScript 是 JavaScript 的超集，添加了静态类型检查。它可以帮助你：

  • 在编译时发现错误
  • 提供更好的 IDE 支持
  • 提高代码可维护性

基本类型

// 基本类型
let name: string = "张三";
let age: number = 25;
let isActive: boolean = true;

// 数组
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["张三", "李四"];

// 元组
let tuple: [string, number] = ["张三", 25];

接口与类型

// 接口
interface User {
  id: number;
  name: string;
  email?: string; // 可选属性
}

// 类型别名
type Status = "pending" | "approved" | "rejected";

// 泛型
function getFirst<T>(arr: T[]): T | undefined {
  return arr[0];
}

实用技巧

1. 使用严格模式

在 tsconfig.json 中启用严格模式：

{
  "compilerOptions": {
    "strict": true
  }
}

2. 善用类型推断

TypeScript 可以自动推断类型，不需要处处标注：

// 不需要显式标注
const message = "Hello"; // 推断为 string
const numbers = [1, 2, 3]; // 推断为 number[]

3. 使用工具类型

interface User {
  id: number;
  name: string;
  email: string;
}

// Partial - 所有属性可选
type PartialUser = Partial<User>;

// Pick - 选取部分属性
type UserBasic = Pick<User, "id" | "name">;

// Omit - 排除部分属性
type UserWithoutEmail = Omit<User, "email">;
Back to Articles