TypeScript高级类型与类型体操实战：从泛型约束到条件类型的工程应用指南

一、TypeScript类型系统概述

TypeScript作为JavaScript的超集，其类型系统已经从简单的类型标注发展成为一门强大的类型编程语言。掌握高级类型不仅仅是语法层面的提升，更是工程化思维的体现。本文将带你从泛型约束开始，逐步深入到条件类型、映射类型、模板字面量类型等高阶概念，并通过实战案例展示它们在大型项目中的工程价值。

为什么要掌握高级类型？

在实际工程开发中，高级类型能帮助我们：减少重复代码、在编译期捕获更多错误、提供更智能的类型推导、构建更灵活的组件库API、实现安全的类型映射与转换。类型体操不是为了炫技，而是为了写出更安全、更易维护的代码。

二、泛型基础与约束

泛型（Generics）是TypeScript类型系统的核心。通过泛型，我们可以创建可重用的组件，同时保持类型安全。

2.1 泛型函数与泛型接口

// 泛型函数
function identity(arg: T): T {
    return arg;
}

// 泛型接口
interface ApiResponse {
    code: number;
    data: T;
    message: string;
}

// 使用示例
type UserResponse = ApiResponse<{
    id: number;
    name: string;
    email: string;
}>;

const response: UserResponse = {
    code: 0,
    data: { id: 1, name: 'Alice', email: '[email protected]' },
    message: 'success'
};

2.2 泛型约束（extends关键字）

泛型约束可以限制泛型的类型范围，避免在函数体内进行类型断言：

// 使用extends约束泛型必须包含length属性
function getLength(arg: T): number {
    return arg.length;
}

// 多个约束使用交叉类型
interface HasId { id: number; }
interface HasName { name: string; }

function processEntity(entity: T): string {
    return \[\] \\;
}

// keyof约束：确保属性名存在于对象中
function getProperty(obj: T, key: K): T[K] {
    return obj[key];
}

const user = { name: 'Alice', age: 30 };
const name = getProperty(user, 'name'); // 类型推导为 string

2.3 默认泛型参数

// 默认泛型参数
interface StoreOptions {
    key: T;
    defaultValue: T;
    validator?: (value: T) => boolean;
}

三、条件类型（Conditional Types）

条件类型是TypeScript中最强大的特性之一，它允许我们根据类型条件选择不同的返回类型。

3.1 条件类型基础

// 基础条件类型
type IsString = T extends string ? 'yes' : 'no';

type A = IsString<'hello'>; // 'yes'
type B = IsString
;       // 'no'

// 分布式条件类型：当泛型参数是联合类型时，条件类型会分布式应用
type ToArray = T extends any ? T[] : never;
type C = ToArray; // string[] | number[]

// 防止分布式：用方括号包裹
type ToArrayNonDist = [T] extends [any] ? T[] : never;
type D = ToArrayNonDist; // (string | number)[]

3.2 infer关键字：类型推断的利器

infer允许我们在条件类型中声明一个类型变量，用于从匹配的类型中提取信息：

// 提取函数返回值类型（内置Utility Type ReturnType的原理）
type MyReturnType = T extends (...args: any[]) => infer R ? R : never;

function createUser(name: string, age: number) {
    return { id: 1, name, age, createdAt: new Date() };
}

type UserType = MyReturnType;

// 提取Promise的解析类型
type UnwrapPromise = T extends Promise ? U : T;

type E = UnwrapPromise>; // string
type F = UnwrapPromise;            // number

3.3 递归条件类型

// 深层Partial：递归将嵌套对象所有属性变为可选
type DeepPartial = T extends object
    ? { [P in keyof T]?: DeepPartial }
    : T;

interface Config {
    server: {
        host: string;
        port: number;
        ssl: { cert: string; key: string; };
    };
}

type PartialConfig = DeepPartial;

// 深层Readonly
type DeepReadonly = T extends object
    ? { readonly [P in keyof T]: DeepReadonly }
    : T;

四、映射类型与keyof操作符

4.1 基础映射类型

type User = {
    id: number; name: string; email: string; isActive: boolean;
};

type PartialUser = Partial;      // 所有属性可选
type ReadonlyUser = Readonly;    // 所有属性只读
type UserBasic = Pick; // 选取部分
type UserWithoutEmail = Omit; // 排除部分

4.2 自定义映射类型

// Nullable：所有属性变为可空
type Nullable = { [P in keyof T]: T[P] | null };

// Promisify：所有属性包装为Promise
type Promisify = { [P in keyof T]: Promise };

// Getters：自动生成getter方法类型
type Getters = {
    [P in keyof T as \get\\]: () => T[P]
};

interface Person { name: string; age: number; }
type PersonGetters = Getters;

// 使用as子句移除下划线前缀
type RemoveFieldPrefix = {
    [P in keyof T as P extends \_\\ ? R : P]: T[P]
};

五、模板字面量类型（Template Literal Types）

5.1 基础模板字面量类型

type EventName = 'click' | 'scroll' | 'keydown';
type DOMEvent = \on\\;

type Handlers = DOMEvent;

// CamelCase转kebab-case
type CamelToKebab =
    S extends \\\\
        ? \\\\\
        : S;

type ExtractRouteParams =
    string extends T ? Record :
    T extends \\:\/\\ ?
        { [K in Param | keyof ExtractRouteParams]: string } :
    T extends \\:\\ ? { [K in Param]: string } :
    {};

// /user/:id/post/:postId 提取为 { id: string; postId: string }
type Params = ExtractRouteParams<'/user/:id/post/:postId'>;

// 类型安全的路径构建
function buildPath(route: T, params: ExtractRouteParams): string {
    let path: string = route;
    for (const [key, value] of Object.entries(params)) {
        path = path.replace(\:\\, value as string);
    }
    return path;
}

interface ActionDef {
    ADD_TODO: { type: 'ADD_TODO'; payload: { text: string } };
    TOGGLE_TODO: { type: 'TOGGLE_TODO'; payload: { id: number } };
    REMOVE_TODO: { type: 'REMOVE_TODO'; payload: { id: number } };
}

type ExtractActions { type: string }>> = {
    [K in keyof Creators]: ReturnType
}[keyof Creators];

type TodoAction = ExtractActions<{
    ADD_TODO: () => ActionDef['ADD_TODO'];
    TOGGLE_TODO: () => ActionDef['TOGGLE_TODO'];
    REMOVE_TODO: () => ActionDef['REMOVE_TODO'];
}>;

function dispatch(action: A) { }
dispatch({ type: 'ADD_TODO', payload: { text: 'Hello' } }); // OK

type Schema = {
    users: { id: number; name: string; age: number; email: string; status: 'active' | 'inactive'; };
    posts: { id: number; title: string; authorId: number; createdAt: Date; };
};

class QueryBuilder {
    constructor(private table: T) {}
    where>(conditions: W) { return this; }
    select(...fields: K[]): Pick[] { return [] as any; }
}

const results = new QueryBuilder('users')
    .where({ status: 'active' })
    .select('id', 'name', 'email');

type ApiDefinition = {
    'GET /users': {
        response: { id: number; name: string; email: string }[];
    };
    'GET /users/:id': {
        params: { id: number };
        response: { id: number; name: string; email: string };
    };
    'POST /users': {
        body: { name: string; email: string };
        response: { id: number };
    };
};

type ExtractPath = S extends \\ \\ ? P : never;

type PathParams
 =
    P extends \\:\/\\ ? Param | PathParams<"/ \"> :
    P extends \\:\\ ? Param : never;

async function apiRequest(path: string, ...args: any[]): Promise { return {}; }

const users = await apiRequest('GET /users');
const user = await apiRequest('GET /users/:id', { params: { id: 42 } });
await apiRequest('POST /users', { body: { name: 'Alice', email: 'test' } });