TypeScript 进阶：5 个高级类型技巧

技巧一：条件类型

根据类型条件返回不同结果：

type IsString<T> = T extends string ? true : false;

type A = IsString<string>;  // true
type B = IsString<number>;  // false

技巧二：映射类型

批量修改对象属性：

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

type Partial<T> = {
    [P in keyof T]?: T[P];
};

interface User {
    name: string;
    age: number;
}

type ReadonlyUser = Readonly<User>;

技巧三：工具类型组合

// 提取某些属性
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

// 排除某些属性
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

// 使用示例
type UserPreview = Omit<User, "password">;

技巧四：infer 关键字

从类型中推断：

type ReturnType<T extends (...args: any[]) => any> = 
    T extends (...args: any[]) => infer R ? R : any;

function getUser() {
    return { name: "John", age: 25 };
}

type User = ReturnType<typeof getUser>;
// { name: string; age: number }

技巧五：模板字面量类型

type EventName = "click" | "hover" | "scroll";
type Handler = `${EventName}Handler`;
// "clickHandler" | "hoverHandler" | "scrollHandler"

type CSSProperty = "padding" | "margin";
type CSSValue = "top" | "bottom";
type Combined = `${CSSProperty}-${CSSValue}`;
// "padding-top" | "padding-bottom" | "margin-top" | "margin-bottom"

实战应用

// API 响应类型
type ApiResponse<T> = {
    data: T;
    status: number;
    message: string;
};

// 异步函数返回类型
type AsyncFunc<T> = () => Promise<ApiResponse<T>>;

总结

掌握这些高级类型技巧，能让 TypeScript 代码更类型安全、更易维护。