高级 TypeScript：深入探讨现代 TypeScript 开发

本篇文章给大家分享《高级 TypeScript：深入探讨现代 TypeScript 开发》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

深入TypeScript：掌握现代TypeScript开发的进阶技巧

TypeScript已成为构建可扩展JavaScript应用程序的事实标准。本指南将深入探讨TypeScript的高级特性，助您提升开发技能，编写更安全可靠的代码。

1. 高级类型系统

条件类型

灵活处理类型关系：

type IsArray = T extends any[] ? true : false;
type IsString = T extends string ? true : false;

// 使用示例
type CheckArray = IsArray; // true
type CheckString = IsString; // true

// 更复杂的条件类型
type UnwrapPromise = T extends Promise ? U : T;
type ArrayElement = T extends (infer U)[] ? U : never;

// 使用示例
type PromiseString = UnwrapPromise>; // string
type NumberArray = ArrayElement; // number

模板字面量类型

利用字符串字面量提升类型安全性：

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type ApiEndpoint = '/users' | '/posts' | '/comments';

type ApiRoute = `${HttpMethod} ${ApiEndpoint}`;

// 有效路由
const validRoute: ApiRoute = 'GET /users';
const validRoute2: ApiRoute = 'POST /posts';

// 错误：类型 '"PATCH /users"' 不可赋值给类型 'ApiRoute'
// const invalidRoute: ApiRoute = 'PATCH /users';

// 动态模板字面量类型
type PropEventType = `on${Capitalize}`;
type ButtonEvents = PropEventType<'click' | 'hover' | 'focus'>;
// 结果：'onclick' | 'onhover' | 'onfocus'

2. 高级泛型

通用约束和默认值

创建灵活且类型安全的泛型接口：

interface Database {
    find(id: string): Promise;
    create(data: Omit): Promise;
    update(id: string, data: Partial): Promise;
    delete(id: string): Promise;
}

// 实现示例
class MongoDatabase implements Database {
    constructor(private collection: string) {}

    async find(id: string): Promise {
        // 实现
        return null;
    }

    async create(data: Omit): Promise {
        // 实现
        return { id: 'generated', ...data } as T;
    }

    async update(id: string, data: Partial): Promise {
        // 实现
        return { id, ...data } as T;
    }

    async delete(id: string): Promise {
        // 实现
        return true;
    }
}

映射类型和键重映射

高级类型转换：

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 FilteredKeys = {
    [K in keyof T as T[K] extends U ? K : never]: T[K]
};

interface Mixed {
    name: string;
    count: number;
    isActive: boolean;
    data: object;
}

type StringKeys = FilteredKeys;
// 结果：{ name: string }

3. 高级装饰器

自定义属性装饰器

创建强大的元数据驱动装饰器：

function ValidateProperty(validationFn: (value: any) => boolean) {
    return function (target: any, propertyKey: string) {
        let value: any;

        const getter = function () {
            return value;
        };

        const setter = function (newVal: any) {
            if (!validationFn(newVal)) {
                throw new Error(`Invalid value for ${propertyKey}`);
            }
            value = newVal;
        };

        Object.defineProperty(target, propertyKey, {
            get: getter,
            set: setter,
            enumerable: true,
            configurable: true,
        });
    };
}

class User {
    @ValidateProperty((value) => typeof value === 'string' && value.length > 0)
    name: string;

    @ValidateProperty((value) => typeof value === 'number' && value >= 0)
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

4. 高级实用程序类型

自定义实用程序类型

构建强大的类型转换：

// 深度 Partial 类型
type DeepPartial = {
    [P in keyof T]?: T[P] extends object ? DeepPartial : T[P];
};

// 深度 Required 类型
type DeepRequired = {
    [P in keyof T]-?: T[P] extends object ? DeepRequired : T[P];
};

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

// 使用示例
interface Config {
    server: {
        port: number;
        host: string;
        options: {
            timeout: number;
            retries: number;
        };
    };
    database: {
        url: string;
        name: string;
    };
}

type PartialConfig = DeepPartial;
// 现在可以有部分嵌套对象
const config: PartialConfig = {
    server: {
        port: 3000
        // host 和 options 可以省略
    }
};

5. 类型安全的API模式

类型安全的构建器模式

实现具有完整类型安全的构建器模式：

class RequestBuilder {
    private data: T;

    constructor(data: T = {} as T) {
        this.data = data;
    }

    with(
        key: K,
        value: V
    ): RequestBuilder {
        return new RequestBuilder({ ...this.data, [key]: value });
    }

    build(): T {
        return this.data;
    }
}

// 使用示例
const request = new RequestBuilder<{ url: string; method: string; headers: { 'content-type': string } }>()
    .with('url', 'https://api.example.com')
    .with('method', 'GET')
    .with('headers', { 'content-type': 'application/json' })
    .build();

// 类型正确推断
type Request = typeof request;
// {
//     url: string;
//     method: string;
//     headers: { 'content-type': string };
// }

6. 高级错误处理

类型安全的错误处理

创建强大的错误处理系统：

class Result {
    private constructor(
        private value: T | null,
        private error: E | null
    ) {}

    static ok(value: T): Result {
        return new Result(value, null);
    }

    static err(error: E): Result {
        return new Result(null, error);
    }

    map(fn: (value: T) => U): Result {
        if (this.value === null) {
            return new Result(null, this.error);
        }
        return new Result(fn(this.value), null);
    }

    mapError(fn: (error: E) => F): Result {
        if (this.error === null) {
            return new Result(this.value, null);
        }
        return new Result(null, fn(this.error));
    }

    unwrap(): T {
        if (this.value === null) {
            throw this.error;
        }
        return this.value;
    }
}

// 使用示例
function divide(a: number, b: number): Result {
    if (b === 0) {
        return Result.err(new Error('Division by zero'));
    }
    return Result.ok(a / b);
}

const result = divide(10, 2)
    .map(n => n * 2)
    .unwrap(); // 10