Einführung

TypeScript ist zur bevorzugten Sprache für die Erstellung skalierbarer JavaScript-Anwendungen geworden. In diesem umfassenden Leitfaden erkunden wir fortgeschrittene TypeScript-Konzepte, die Ihre Entwicklungsf?higkeiten verbessern und Ihnen helfen, typsichereren Code zu schreiben.

1. Erweiterte Typsystemfunktionen

Bedingte Typen

Komplexe Typbeziehungen verstehen:

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

Vorlagenliteraltypen

Nutzung von String-Literal-Typen für eine bessere Typsicherheit:

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. Erweiterte Generika

Allgemeine Einschr?nkungen und Standardeinstellungen

Erstellen flexibler und dennoch typsicherer generischer Schnittstellen:

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

Zugeordnete Typen und Schlüsselneuzuordnung

Erweiterte Typtransformationen:

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. Fortgeschrittene Dekorateure

Individuelle Immobiliendekorateure

Erstellen leistungsstarker metadatengesteuerter Dekoratoren:

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. Erweiterte Dienstprogrammtypen

Benutzerdefinierte Dienstprogrammtypen

Erstellen leistungsstarker Typtransformationen:

// 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. Typsichere API-Muster

Builder-Muster mit Typsicherheit

Implementierung des Builder-Musters mit vollst?ndiger Typsicherheit:

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. Erweiterte Fehlerbehandlung

Typsichere Fehlerbehandlung

Erstellen eines robusten Fehlerbehandlungssystems:

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

Abschluss

Diese erweiterten TypeScript-Muster demonstrieren die Leistungsf?higkeit der Sprache bei der Erstellung typsicherer und wartbarer Anwendungen. Wenn Sie diese Konzepte beherrschen, sind Sie besser in der Lage, robuste Anwendungen zu erstellen, die das Typsystem von TypeScript optimal nutzen.

Zus?tzliche Ressourcen

• TypeScript-Dokumentation

• TypeScript Deep Dive

• TypeScript GitHub Repository

Teilen Sie Ihre Erfahrungen mit diesen Mustern in den Kommentaren unten! Welche erweiterten TypeScript-Funktionen fanden Sie in Ihren Projekten am nützlichsten?

Tags: #typescript #javascript #webdevelopment #programming #typing

Das obige ist der detaillierte Inhalt vonAdvanced TypeScript: Ein tiefer Einblick in die moderne TypeScript-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!