1. 善用类型推断,减少手动定义
TS 的类型推断能力很强,很多时候无需显式声明:
TypeScript
// 无需写 let age: number
let age = 28;
// 函数返回值可自动推断
function add(a: number, b: number) {
return a + b; // 自动推断返回number
}
2. 合理组织类型文件
将类型定义与业务代码分离,例如:
TypeScript
src/
types/ // 集中存放类型定义
user.ts
order.ts
components/ // 业务组件
utils/ // 工具函数
3.避免过度类型化
无需为每个变量都定义类型,优先用推断:
TypeScript
// 不必写成 const list: number[] = [1,2,3]
const list = [1, 2, 3];
4.利用工具简化类型工作
- 使用typeof提取已有变量类型:
TypeScript
const defaultUser = { name: "admin", age: 30 };
type User = typeof defaultUser; // 自动获得 { name: string; age: number }
- 用Partial、Pick等工具类型减少重复定义:
TypeScript
interface User { id: number; name: string; age: number }
type UserWithoutId = Pick<User, "name" | "age">; // 提取部分属性
5.巧用类型守卫简化分支逻辑
当处理联合类型时,自定义类型守卫可以替代冗长的typeof或instanceof判断,让类型判断更直观:
TypeScript
// 定义联合类型
type Admin = { role: 'admin'; permissions: string[] };
type User = { role: 'user'; name: string };
type Person = Admin | User;
// 自定义类型守卫
function isAdmin(person: Person): person is Admin {
return person.role === 'admin';
}
// 使用时自动缩小类型范围
function handlePerson(person: Person) {
if (isAdmin(person)) {
// TS自动推断为Admin类型,可直接访问permissions
console.log(person.permissions);
} else {
// 自动推断为User类型
console.log(person.name);
}
}
非空断言与可选链减少冗余判断
合理使用!(非空断言)和?.(可选链),替代繁琐的if (xxx)判断:
TypeScript
interface Data {
user?: {
name?: string;
};
}
const data: Data = {};
// 传统写法:多层判断
if (data.user && data.user.name) {
console.log(data.user.name);
}
// 优雅写法:可选链 + 非空断言(确保存在时使用)
console.log(data.user?.name); // 安全访问,不存在时返回undefined