TypeScript泛型约束与条件类型映射类型高级类型体操实战解析

分布式条件类型是容易出错的点。当泛型参数为联合类型时，条件类型会分发到联合的每个成员单独计算：

// 分布式 vs 非分布式

// 分布式：T直接作为类型参数
type ToArray = T extends any ? T[] : never;
type D1 = ToArray;  // string[] | number[]

// 非分布式：用元组包裹阻止分发
type ToArrayNonDist = [T] extends [any] ? T[] : never;
type D2 = ToArrayNonDist;  // (string | number)[]

// 实际应用：过滤联合类型中的某些成员
type ExcludeType = T extends U ? never : T;
type Result = ExcludeType<"a" | "b" | "c" | "d", "a" | "d">;  // "b" | "c"

// 这就是内置Exclude的实现原理
// type Exclude = T extends U ? never : T;

// 提取对象中的函数属性
type FunctionKeys = {
    [K in keyof T]: T[K] extends Function ? K : never
}[keyof T];

interface API {
    name: string;
    version: number;
    fetch: () => void;
    update: (data: string) => void;
}

type APIFunctions = FunctionKeys;  // "fetch" | "update"

映射类型与Key Remapping实战

映射类型通过对已有类型的属性进行变换生成新类型。TypeScript 4.1引入的Key Remapping进一步扩展了变换能力：

// 基础映射类型
type Readonly = {
    readonly [P in keyof T]: T[P];
};

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

type Mutable = {
    -readonly [P in keyof T]: T[P];
};

// Key Remapping: 重映射属性名
type Getters = {
    [K in keyof T as `get${Capitalize}`]: () => T[K]
};

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

type PersonGetters = Getters;
// {
//   getName: () => string;
//   getAge: () => number;
// }

// 过滤特定类型的属性
type RemoveKindField = {
    [K in keyof T as Exclude]: T[K]
};

interface Circle { kind: "circle"; radius: number; }
type CircleProps = RemoveKindField;  // { radius: number }

模板字面量类型与映射类型结合实现路由类型推导：

// 类型安全的路由定义
type ExtractParams = 
    Path extends `${infer _Start}:${infer Param}/${infer Rest}`
        ? { [K in Param]: string } & ExtractParams<`/${Rest}`>
        : Path extends `${infer _Start}:${infer Param}`
        ? { [K in Param]: string }
        : {};

type RouteParams = {
    [P in keyof ExtractParams]: string;
};

// 路由模式定义
interface Routes {
    "/users": {};
    "/users/:id": { id: string };
    "/posts/:postId/comments/:commentId": { postId: string; commentId: string };
}

// 类型安全的路由匹配
class Router {
    private routes: Map) => void> = new Map();

    add
(        path: P,        handler: (params: RouteParams
) => void    ): void {        this.routes.set(path, handler as any);    }}const router = new Router();router.add("/users", () => console.log("list users"));router.add("/users/:id", (params) => console.log(params.id));router.add("/posts/:postId/comments/:commentId", (params) => {    console.log(params.postId, params.commentId);});// router.add("/unknown", () => {});  // 错误: 不在路由定义中

类型推断与协变逆变控制

infer关键字配合递归类型可实现复杂的类型提取，协变和逆变控制则影响函数参数的类型安全性：

// deep Partial（递归可选）
type DeepPartial = {
    [K in keyof T]?: T[K] extends object ? DeepPartial : T[K]
};

interface Config {
    database: {
        host: string;
        port: number;
    };
    cache: {
        ttl: number;
        prefix: string;
    };
}

type PartialConfig = DeepPartial;
// { database?: { host?: string; port?: number }; cache?: { ttl?: number; prefix?: string } }

// 深层Required
type DeepRequired = {
    [K in keyof T]-?: T[K] extends object ? DeepRequired : T[K]
};

// 提取对象路径
type Path = 
    T extends object
        ? {
            [K in keyof T & string]: 
                | (P extends "" ? K : `${P}.${K}`)
                | Path
        }[keyof T & string]
        : never;

type ConfigPaths = Path;
// "database" | "database.host" | "database.port" | "cache" | "cache.ttl" | "cache.prefix"

// 类型安全的get函数
function get>(obj: T, path: P): PathValue {
    return path.split(".").reduce((acc: any, key) => acc[key], obj);
}

type PathValue = 
    P extends `${infer K}.${infer Rest}`
        ? K extends keyof T
            ? PathValue
            : never
        : P extends keyof T
        ? T[P]
        : never;

协变与逆变在回调类型中的控制：

// 逆变参数检查（strictFunctionTypes模式下）
// 方法声明为协变，函数属性为逆变
interface Animal { name: string; }
interface Dog extends Animal { breed: string; }

declare let animals: (a: Animal) => void;
declare let dogs: (d: Dog) => void;

// 函数类型参数为逆变
// animals = dogs;  // 错误: Dog参数不能赋值给Animal参数
// 可以接受更大范围的参数类型

// 方法参数为双变（兼容旧代码）
interface AnimalHandler1 {
    handle(a: Animal): void;  // 方法声明: 双变
}

interface AnimalHandler2 {
    handle: (a: Animal) => void;  // 函数属性: 逆变
}

declare let h1: AnimalHandler1;
declare let h2: AnimalHandler2;
declare let dogHandler1: { handle(d: Dog): void };
declare let dogHandler2: { handle: (d: Dog) => void };

h1 = dogHandler1;  // OK: 方法双变允许
// h2 = dogHandler2;  // 错误: 函数属性逆变不允许

实际使用中，Vue3生态和React框架大量使用泛型约束和条件类型。泛型接口设计的目标是在编译期捕获更多运行时错误，减少类型检查的逃逸出口（any/as）。合理运用类型体操可以构建出完全类型安全的API层响应处理、表单校验和状态管理方案。