進階 TypeScript：深入探討現代 TypeScript 開發

介紹

TypeScript 已成為建立可擴充 JavaScript 應用程式的首選語言。在這份綜合指南中，我們將探索進階 TypeScript 概念，這些概念將增強您的開發技能並幫助您編寫更多類型安全的程式碼。

1. 進階類型系統功能

條件類型

理解複雜型別關係：

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

// Usage
type CheckArray = IsArray<string[]>; // true
type CheckString = IsString<"hello">; // true

// More complex conditional types
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
type ArrayElement<T> = T extends (infer U)[] ? U : never;

// Example usage
type PromiseString = UnwrapPromise<Promise<string>>; // string
type NumberArray = ArrayElement<number[]>; // number

模板文字類型

利用字串文字類型來提高型別安全性：

type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type APIEndpoint = '/users' | '/posts' | '/comments';

type APIRoute = `${HTTPMethod} ${APIEndpoint}`;

// Valid routes
const validRoute: APIRoute = 'GET /users';
const validRoute2: APIRoute = 'POST /posts';

// Error: Type '"PATCH /users"' is not assignable to type 'APIRoute'
// const invalidRoute: APIRoute = 'PATCH /users';

// Dynamic template literal types
type PropEventType<T extends string> = `on${Capitalize<T>}`;
type ButtonEvents = PropEventType<'click' | 'hover' | 'focus'>;
// Results in: 'onClick' | 'onHover' | 'onFocus'

2. 高級泛型

通用約束和預設值

建立靈活且類型安全的通用介面：

interface Database<T extends { id: string }> {
    find(id: string): Promise<T | null>;
    create(data: Omit<T, 'id'>): Promise<T>;
    update(id: string, data: Partial<T>): Promise<T>;
    delete(id: string): Promise<boolean>;
}

// Implementation example
class MongoDatabase<T extends { id: string }> implements Database<T> {
    constructor(private collection: string) {}

    async find(id: string): Promise<T | null> {
        // Implementation
        return null;
    }

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

    async update(id: string, data: Partial<T>): Promise<T> {
        // Implementation
        return { id, ...data } as T;
    }

    async delete(id: string): Promise<boolean> {
        // Implementation
        return true;
    }
}

映射類型和鍵重新映射

進階型別轉換：

type Getters<T> = {
    [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};

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

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

// Advanced key remapping with filtering
type FilteredKeys<T, U> = {
    [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<Mixed, string>;
// Results in: { 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. 進階實用程式類型

自訂實用程式類型

建立強大的類型轉換：

// Deep Partial type
type DeepPartial<T> = {
    [P in keyof T]?: T[P] extends object
        ? DeepPartial<T[P]>
        : T[P];
};

// Deep Required type
type DeepRequired<T> = {
    [P in keyof T]-?: T[P] extends object
        ? DeepRequired<T[P]>
        : T[P];
};

// Deep Readonly type
type DeepReadonly<T> = {
    readonly [P in keyof T]: T[P] extends object
        ? DeepReadonly<T[P]>
        : T[P];
};

// Example usage
interface Config {
    server: {
        port: number;
        host: string;
        options: {
            timeout: number;
            retries: number;
        };
    };
    database: {
        url: string;
        name: string;
    };
}

type PartialConfig = DeepPartial<Config>;
// Now we can have partial nested objects
const config: PartialConfig = {
    server: {
        port: 3000
        // host and options can be omitted
    }
};

5. 類型安全的 API 模式

具有類型安全性的建構器模式

實作具有完整型別安全的建構器模式：

class RequestBuilder<T = {}> {
    private data: T;

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

    with<K extends string, V>(
        key: K,
        value: V
    ): RequestBuilder<T & { [key in K]: V }> {
        return new RequestBuilder({
            ...this.data,
            [key]: value,
        });
    }

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

// Usage
const request = new RequestBuilder()
    .with('url', 'https://api.example.com')
    .with('method', 'GET')
    .with('headers', { 'Content-Type': 'application/json' })
    .build();

// Type is inferred correctly
type Request = typeof request;
// {
//     url: string;
//     method: string;
//     headers: { 'Content-Type': string };
// }

6. 進階錯誤處理

類型安全的錯誤處理

建立強大的錯誤處理系統：

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

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

    static err<E extends Error>(error: E): Result<never, E> {
        return new Result(null, error);
    }

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

    mapError<F extends Error>(fn: (error: E) => F): Result<T, F> {
        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;
    }
}

// Usage example
function divide(a: number, b: number): Result<number, Error> {
    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

結論

這些進階 TypeScript 模式展示了該語言在建立類型安全且可維護的應用程式方面的強大功能。透過掌握這些概念，您將能夠更好地建立強大的應用程序，充分利用 TypeScript 的類型系統的潛力。

其他資源

• TypeScript 文件

• TypeScript 深入探究

• TypeScript GitHub 儲存庫

在下面的評論中分享您對這些模式的體驗！您發現哪些進階 TypeScript 功能在您的專案中最有用？

---

標籤：#typescript #javascript #webdevelopment #programming #typing

以上是進階 TypeScript：深入探討現代 TypeScript 開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！