TypeScript 最佳实践：写出类型安全的优质代码

为什么选择 TypeScript

• 编译时类型检查，减少运行时错误
• 更好的 IDE 支持和自动补全
• 代码即文档，类型即注释
• 重构更安全

核心类型概念

1. 基础类型

const name: string = "Alice";
const age: number = 25;
const active: boolean = true;
const list: number[] = [1, 2, 3];
const tuple: [string, number] = ["hello", 10];

2. Interface vs Type

// Interface - 适合对象形状
interface User {
  id: number;
  name: string;
  email?: string; // 可选属性
}

// Type - 更灵活，支持联合类型
type ID = string | number;
type Status = "active" | "inactive";

// 推荐：对象用 interface，其他用 type

3. 泛型

// 泛型函数
function identity<T>(arg: T): T {
  return arg;
}

// 泛型接口
interface APIResponse<T> {
  data: T;
  status: number;
  message: string;
}

// 使用
const response: APIResponse<User> = {
  data: { id: 1, name: "Alice" },
  status: 200,
  message: "success"
};

类型推断技巧

让 TS 自动推断

// ✅ 推荐：让 TS 推断
const user = { id: 1, name: "Alice" };

// ❌ 不必要：显式声明
const user: { id: number; name: string } = { id: 1, name: "Alice" };

使用 as const

const config = {
  apiUrl: "https://api.example.com",
  timeout: 5000
} as const;
// config.apiUrl 类型为字面量类型

避免 any

// ❌ 避免
function process(data: any) { }

// ✅ 使用 unknown
function process(data: unknown) {
  if (typeof data === "string") {
    console.log(data.toUpperCase());
  }
}

// ✅ 使用联合类型
function process(data: string | number) { }

// ✅ 使用泛型
function process<T>(data: T) { }

实用工具类型

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

// Required - 所有属性必填
type RequiredUser = Required<User>;

// Pick - 选择某些属性
type UserName = Pick<User, "name">;

// Omit - 排除某些属性
type UserNoId = Omit<User, "id">;

// Record - 键值对类型
type UserMap = Record<string, User>;

// ReturnType - 函数返回类型
type UserFetcher = ReturnType<typeof fetchUser>;

React + TypeScript

import React, { FC, useState } from "react";

// 组件 Props
interface Props {
  name: string;
  age?: number;
  onClick: () => void;
}

const UserCard: FC<Props> = ({ name, age = 0, onClick }) => {
  return <div onClick={onClick}>{name}, {age}</div>;
};

// Hook 类型
const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<User | null>(null);

// 事件类型
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  console.log(e.target.value);
};

类型守卫

// typeof 守卫
function isString(value: unknown): value is string {
  return typeof value === "string";
}

// in 守卫
interface Cat { meow(): void }
interface Dog { bark(): void }

function isCat(animal: Cat | Dog): animal is Cat {
  return "meow" in animal;
}

// instanceof 守卫
function isError(value: unknown): value is Error {
  return value instanceof Error;
}

配置建议

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

常见陷阱

1. 函数重载

function combine(a: string, b: string): string;
function combine(a: number, b: number): number;
function combine(a: any, b: any): any {
  return a + b;
}

2. 枚举 vs 联合类型

// 推荐：联合类型
type Status = "pending" | "success" | "error";

// 不推荐：枚举（编译后是 JS 对象）
enum Status { Pending, Success, Error }

结语

TypeScript 是提升代码质量的利器。善用类型系统，避免 any，让编译器帮你发现错误，写出更健壮的代码。