常用的Typescript特性

参考文档： TypeScript 特性
TS的类型系统是提升代码质量的核心工具，以下是比较常用的特性：

1. 基础类型约束与函数类型定义​

场景： 为变量、函数参数和返回值指定明确类型，避免隐式类型转换错误。​
示例：

// 变量类型注解
const productId: number = 1001;
const productName: string = "无线耳机";
const isInStock: boolean = true;// 函数类型定义（参数与返回值）
function calculateDiscount(price: number, rate: number): number {if (rate < 0 || rate > 1) {throw new Error("折扣率必须在0-1之间");}return price * rate;
}

这里通过类型约束，确保calculateDiscount的参数和返回值始终为数字，避免传入字符串导致的计算错误（如"100" * 0.8在 JS 中会隐式转换，但 TS 会直接报错）

2. 接口（Interface）与类型别名（Type）​

场景： 定义复杂数据结构（如 API 响应、组件 Props），规范数据格式并提供类型提示。​
示例：

// 接口定义API响应数据结构
interface Product {id: number;name: string;price: number;tags?: string[]; // 可选属性（允许不存在）readonly category: string; // 只读属性（不可修改）
}// 类型别名定义联合类型（适用于多状态场景）
type OrderStatus = "pending" | "paid" | "shipped" | "delivered";// 组件Props类型（React场景）
interface ButtonProps {label: string;type: "primary" | "secondary" | "danger";onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

在团队协作中，后端返回的Product数据必须符合接口结构，同理前端组件接收的ButtonProps也需严格匹配类型，减少因数据格式不一致导致的 BUG

3. 泛型（Generics）

场景： 实现通用组件或工具函数，在保持类型安全的同时提升复用性。​
示例：

// 通用数组过滤函数
function filterArray<T>(arr: T[], predicate: (item: T) => boolean): T[] {return arr.filter(predicate);
}// 使用时自动推导类型
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = filterArray(numbers, (n) => n % 2 === 0); // 类型为number[]const products: Product[] = [/* ... */];
const cheapProducts = filterArray(products, (p) => p.price < 100); // 类型为Product[]// 泛型接口（如API响应统一格式）​
interface ApiResponse<T> {​code: number;​data: T;​message: string;​
}​
type UserResponse = ApiResponse<User>;
// { code: number; data: User; message: string }

泛型T让filterArray既能处理数字数组，也能处理Product数组，且返回值类型与输入保持一致，避免了any类型导致的类型丢失

4. 工具类型​

场景： 基于已有类型生成新类型，减少重复定义，适配复杂业务场景。​
示例：

// 从Product中提取部分属性生成新类型（如列表展示只需要id和name）
type ProductListItem = Pick<Product, "id" | "name">; // { id: number; name: string }// 排除Product中的price属性（如详情页不需要展示价格时）
type ProductWithoutPrice = Omit<Product, "price">;// 使所有属性变为可选（适用于“部分更新”场景，如只更新需要修改的字段）
type ProductPartialUpdate = Partial<Product>; // { id?: number; name?: string; ... }// 记录类型（键值对映射，如字典场景）
type StatusMap = Record<OrderStatus, string>;
//一个对象，它的键必须是 OrderStatus 中的任意一个（即只能是 pending/paid/shipped/delivered）
//而键对应的值必须是 string 类型
//StatusMap 等价于手动定义：
type StatusMap = {pending: string;paid: string;shipped: string;delivered: string;
}const statusLabels: StatusMap = {pending: "待支付",paid: "已支付",shipped: "已发货",delivered: "已送达"
};

工具类型（如Pick、Omit、Partial）是 TS 的 “语法糖”，通过组合已有类型快速生成新类型，避免重复编写相似结构。

5. 类型守卫（Type Guard）​

场景： 在联合类型中精确判断类型，避免 “类型断言” 的滥用。（类型断言Type Assertion 是一种手动指定变量类型的方式，用于告诉编译器：“我比你更清楚这个变量的具体类型，请相信我，按照我指定的类型来处理”。它的核心作用是覆盖编译器的类型推断，强制将一个变量指定为某种类型）​
示例：

type Admin = { role: "admin"; permissions: string[] };
type Guest = { role: "guest"; expiresAt: Date };
type User = Admin | Guest;// 自定义类型守卫
function isAdmin(user: User): user is Admin {return user.role === "admin";
}// 使用场景
function handleUser(user: User) {if (isAdmin(user)) {// TS自动推断user为Admin类型，可安全访问permissionsconsole.log("权限列表：", user.permissions);} else {// 自动推断为Guest类型，可访问expiresAtconsole.log("过期时间：", user.expiresAt);}
}

价值： 替代as强制类型断言，通过逻辑判断让 TS 自动推导类型，减少类型错误风险。

6. 联合类型（Union）与交叉类型（Intersection）​

**场景：**处理 “可能是 A 类型或 B 类型”“同时具备 A 和 B 的属性” 等复杂场景。​
示例：

// 联合类型：参数可能是字符串或数字
function formatId(id: string | number): string {return typeof id === "number" ? id.toString() : id;
}// 交叉类型：合并多个类型的属性
type BaseUser = { id: number; name: string };
type WithRole = { role: string };
type UserWithRole = BaseUser & WithRole; // { id: number; name: string; role: string }

7.泛型约束

场景： 限制泛型范围，或基于已有类型生成新类型（如处理 API 响应的 “可选字段”“只读字段”）。​
示例：

// 泛型约束：限制T必须包含id属性​
function getEntityById<T extends { id: number }>(entities: T[], id: number): T | undefined {​return entities.find(entity => entity.id === id);​
}

8.模块类型声明（Declaration Files）​

场景： 为无类型定义的 JS 库（如老项目依赖）添加类型，或扩展内置类型。​
示例：

// 为全局变量添加类型（如window上的自定义属性）
declare global {interface Window {appConfig: {apiBaseUrl: string;env: "dev" | "prod";};}
}// 使用时获得类型提示
console.log(window.appConfig.apiBaseUrl); // 自动提示apiBaseUrl为string类型

在混用 JS 和 TS 的项目中，通过.d.ts声明文件为第三方库或全局变量补全类型，保持 TS 类型检查的完整性。

9.枚举（Enum）​

场景： 定义一组有名字的常量（如状态码、下拉框选项），提升代码可读性。​
示例：

enum OrderStatus {PENDING = "pending",PAID = "paid",SHIPPED = "shipped",DELIVERED = "delivered"
}// 使用时避免直接写字符串字面量，增强可维护性
function updateOrderStatus(status: OrderStatus) {// ...
}
updateOrderStatus(OrderStatus.PAID); // 比传入"paid"更易读，且重构时只需修改枚举定义

这些特性在实际开发中相互配合，例如：用interface定义接口数据结构，通过泛型+工具类型处理 API 响应，结合类型守卫解析后端返回的联合类型数据，最终实现 “类型自文档化” 和 “编译时错误拦截”，显著降低大型项目的维护成本。