引言：为什么需要类型编程？
TypeScript作为JavaScript的超集，最大的优势就是强大的类型系统。但很多开发者只停留在基础的类型注解上，忽略了TypeScript真正的威力——类型编程。通过高级类型技巧，我们可以在编译时捕获更多错误，提供更好的开发体验，并构建更健壮的应用程序。
1. 基础类型回顾
在深入高级类型之前，让我们快速回顾一下TypeScript的基础类型。
// 基本类型
let name: string = "张三";
let age: number = 25;
let isStudent: boolean = true;
let nothing: null = null;
let notDefined: undefined = undefined;
// 数组和元组
let numbers: number[] = [1, 2, 3];
let tuple: [string, number] = ["张三", 25];
// 对象类型
interface User {
id: number;
name: string;
email: string;
age?: number; // 可选属性
}
// 联合类型和交叉类型
type ID = string | number;
type AdminUser = User & { isAdmin: boolean };
// 函数类型
type AddFunction = (a: number, b: number) => number;
const add: AddFunction = (a, b) => a + b;2. 泛型：类型参数化
泛型是类型编程的基础，它允许我们创建可重用的类型组件。
// 基础泛型函数
function identity(value: T): T {
return value;
}
const result1 = identity("Hello"); // string
const result2 = identity(42); // number
const result3 = identity("TypeScript"); // 类型推断
// 泛型接口
interface Response {
success: boolean;
data: T;
message?: string;
}
const userResponse: Response = {
success: true,
data: { id: 1, name: "张三", email: "zhangsan@example.com" }
};
// 泛型约束
interface HasId {
id: number;
}
function getById(items: T[], id: number): T | undefined {
return items.find(item => item.id === id);
}
const users: User[] = [
{ id: 1, name: "张三", email: "zhangsan@example.com" },
{ id: 2, name: "李四", email: "lisi@example.com" }
];
const user = getById(users, 1); // User | undefined 3. 条件类型
条件类型允许我们根据输入类型选择输出类型，这是类型编程的核心工具之一。
// 基础条件类型
type IsString = T extends string ? true : false;
type Test1 = IsString; // true
type Test2 = IsString; // false
type TypeName =
T extends string ? "string" :
T extends number ? "number" :
T extends boolean ? "boolean" :
T extends undefined ? "undefined" :
T extends Function ? "function" :
"object";
type T0 = TypeName; // "string"
type T1 = TypeName<42>; // "number"
type T2 = TypeName<() => void>; // "function"
// 分布式条件类型
// 当条件类型作用于联合类型时，会进行分布式计算
type ToArray = T extends any ? T[] : never;
type StrArrOrNumArr = ToArray; // string[] | number[]
// 过滤联合类型中的特定类型
type Filter = T extends U ? T : never;
type NumbersOnly = Filter; // number 4. 映射类型
映射类型允许我们基于现有类型创建新类型，这是构建类型工具的关键。
// 基础映射类型
interface User {
id: number;
name: string;
email: string;
age?: number;
}
// 将所有属性变为可选
type PartialUser = Partial;
// 等价于:
// type PartialUser = {
// id?: number;
// name?: string;
// email?: string;
// age?: number;
// }
// 将所有属性变为只读
type ReadonlyUser = Readonly;
// 选择特定属性
type PickUser = Pick;
// 等价于:
// type PickUser = {
// id: number;
// name: string;
// }
// 排除特定属性
type OmitUser = Omit;
// 等价于:
// type OmitUser = {
// id: number;
// name: string;
// }
// 自定义映射类型
// 将所有属性变为可空
type Nullable = {
[P in keyof T]: T[P] | null;
};
// 将所有属性变为Promise
type Promisify = {
[P in keyof T]: Promise;
};
// 添加前缀
type AddPrefix = {
[P in keyof T as `${Prefix}${Capitalize}`]: T[P];
};
type PrefixedUser = AddPrefix;
// 等价于:
// type PrefixedUser = {
// userId: number;
// userName: string;
// userEmail: string;
// userAge?: number;
// } 5. 模板字面量类型
TypeScript 4.1引入了模板字面量类型，为类型系统带来了字符串操作能力。
// 基础模板字面量类型
type EventName = "click" | "hover" | "focus";
type ElementName = "div" | "span" | "button";
type EventHandlerName = `on${Capitalize}`;
// 等价于: "onClick" | "onHover" | "onFocus"
type ElementEvent = `${ElementName}${Capitalize}`;
// 等价于: "divClick" | "divHover" | "divFocus" | "spanClick" | ...
// 实用示例：CSS类名生成
type Color = "red" | "blue" | "green";
type Size = "small" | "medium" | "large";
type ButtonClass = `btn-${Color}-${Size}`;
// 等价于: "btn-red-small" | "btn-red-medium" | "btn-red-large" | ...
// 类型安全的CSS属性
type CSSProperty = `margin${"" | "-top" | "-right" | "-bottom" | "-left"}`;
type CSSValue = `${number}px` | `${number}em` | `${number}rem` | "auto";
type CSSDeclaration = `${CSSProperty}: ${CSSValue}`;
// 等价于: "margin: 10px" | "margin-top: 2em" | "margin-right: auto" | ... 6. 实用类型工具
让我们创建一些实用的类型工具，用于日常开发。
// 1. 深度Partial（递归将所有属性变为可选）
type DeepPartial = T extends object ? {
[P in keyof T]?: DeepPartial;
} : T;
interface NestedObject {
user: {
name: string;
address: {
city: string;
street: string;
};
};
settings: {
theme: string;
notifications: boolean;
};
}
type PartialNested = DeepPartial;
// 现在所有嵌套属性都是可选的
// 2. 获取函数返回类型
type ReturnType any> =
T extends (...args: any) => infer R ? R : never;
function getUser() {
return { id: 1, name: "张三" };
}
type UserReturn = ReturnType; // { id: number; name: string }
// 3. 获取Promise的解析类型
type Awaited = T extends Promise ? U : T;
async function fetchUser(): Promise {
// ...
}
type FetchedUser = Awaited>; // User
// 4. 类型安全的Object.keys
type ObjectKeys = keyof T;
function getKeys(obj: T): ObjectKeys[] {
return Object.keys(obj) as ObjectKeys[];
}
const user = { id: 1, name: "张三", email: "zhangsan@example.com" };
const keys = getKeys(user); // ("id" | "name" | "email")[]
// 5. 类型安全的Object.entries
type Entries = {
[K in keyof T]: [K, T[K]];
}[keyof T][];
function getEntries(obj: T): Entries {
return Object.entries(obj) as Entries;
}
const entries = getEntries(user); // ["id", number] | ["name", string] | ["email", string][] 7. 实际应用：API响应类型
让我们创建一个完整的API响应类型系统。
// 基础类型定义
interface User {
id: number;
name: string;
email: string;
role: "user" | "admin" | "moderator";
}
interface Post {
id: number;
title: string;
content: string;
authorId: number;
createdAt: Date;
}
// API响应包装器
type ApiResponse =
| { success: true; data: T; timestamp: Date }
| { success: false; error: E; timestamp: Date };
// 分页类型
type Paginated = {
items: T[];
total: number;
page: number;
pageSize: number;
hasNext: boolean;
hasPrev: boolean;
};
// API端点类型映射
type ApiEndpoints = {
"/api/users": {
GET: {
response: ApiResponse>;
query: { page?: number; limit?: number; search?: string };
};
POST: {
response: ApiResponse;
body: Omit;
};
};
"/api/users/:id": {
GET: {
response: ApiResponse;
params: { id: string };
};
PUT: {
response: ApiResponse;
params: { id: string };
body: Partial>;
};
DELETE: {
response: ApiResponse<{ deleted: true }>;
params: { id: string };
};
};
"/api/posts": {
GET: {
response: ApiResponse>;
query: { page?: number; limit?: number; authorId?: number };
};
};
};
// 类型安全的API客户端
type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
type ApiRequest =
Method extends keyof ApiEndpoints[Endpoint]
? ApiEndpoints[Endpoint][Method]
: never;
async function apiRequest<
Endpoint extends keyof ApiEndpoints,
Method extends HttpMethod
>(
endpoint: Endpoint,
method: Method,
options: ApiRequest
): Promise["response"]> {
// 实际的API调用逻辑
const response = await fetch(endpoint as string, {
method,
headers: { "Content-Type": "application/json" },
body: "body" in options ? JSON.stringify(options.body) : undefined
});
return response.json();
}
// 使用示例
async function fetchUserById(id: number) {
const response = await apiRequest(
"/api/users/:id",
"GET",
{ params: { id: id.toString() } }
);
if (response.success) {
console.log("用户数据:", response.data);
} else {
console.error("获取用户失败:", response.error);
}
}
// TypeScript会在编译时检查参数类型
// 以下代码会导致类型错误:
// apiRequest("/api/users/:id", "GET", { params: { id: 123 } }); // 错误: id应该是string
// apiRequest("/api/users", "POST", { body: { name: "张三" } }); // 错误: 缺少必需的email和role字段 8. 最佳实践
- 渐进式类型化：从简单的类型开始，逐步添加更复杂的类型约束
- 类型复用：创建可复用的类型工具，避免重复代码
- 类型测试：使用类型断言和条件类型验证类型行为
- 文档化：为复杂类型添加注释，说明其用途和行为
- 性能考虑：避免过度复杂的嵌套类型，可能影响编译性能
总结
TypeScript的高级类型编程为开发者提供了强大的工具，可以在编译时捕获更多错误，提供更好的开发体验。从基础的泛型和条件类型，到高级的映射类型和模板字面量类型，这些工具让我们能够构建类型安全的应用程序架构。通过掌握这些技巧，你可以创建更健壮、更易维护的代码库，并充分利用TypeScript类型系统的全部潜力。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容