pengenalan

TypeScript telah menjadi bahasa pilihan untuk membina aplikasi JavaScript berskala. Dalam panduan komprehensif ini, kami akan meneroka konsep TypeScript lanjutan yang akan meningkatkan kemahiran pembangunan anda dan membantu anda menulis lebih banyak kod jenis selamat.

1. Ciri Sistem Jenis Lanjutan

Jenis Bersyarat

Memahami perhubungan jenis kompleks:

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

Jenis Literal Templat

Memanfaatkan jenis literal rentetan untuk keselamatan jenis yang lebih baik:

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. Generik Lanjutan

Kekangan dan Lalai Generik

Mencipta antara muka generik yang fleksibel namun selamat jenis:

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;
    }
}

Jenis Dipetakan dan Pemetaan Semula Kunci

Transformasi jenis lanjutan:

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. Penghias Termaju

Penghias Harta Tersuai

Mencipta penghias dipacu metadata yang berkuasa:

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. Jenis Utiliti Lanjutan

Jenis Utiliti Tersuai

Membina transformasi jenis yang berkuasa:

// 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. Corak API Jenis-Selamat

Corak Pembina dengan Jenis Keselamatan

Melaksanakan corak pembina dengan keselamatan jenis penuh:

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. Pengendalian Ralat Lanjutan

Pengendalian Ralat Jenis-Selamat

Mencipta sistem pengendalian ralat yang mantap:

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

Kesimpulan

Corak TypeScript lanjutan ini menunjukkan kuasa bahasa dalam mencipta aplikasi selamat jenis dan boleh diselenggara. Dengan menguasai konsep ini, anda akan lebih bersedia untuk membina aplikasi teguh yang memanfaatkan sistem jenis TypeScript ke potensi sepenuhnya.

Sumber Tambahan

• Dokumentasi TypeScript

• TypeScript Deep Dive

• Repositori GitHub TypeScript

Kongsi pengalaman anda dengan corak ini dalam komen di bawah! Apakah ciri TypeScript lanjutan yang anda dapati paling berguna dalam projek anda?

Tag: #typescript #javascript #webdevelopment #programming #typing

Atas ialah kandungan terperinci TypeScript Lanjutan: Penyelaman Mendalam ke dalam Pembangunan TypeScript Moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!