TypeScript ist zu einem unverzichtbaren Werkzeug für moderne Entwickler geworden und bietet leistungsstarke Funktionen, um robuste und wartbare Codebasen zu gewährleisten. Zu den fortschrittlichsten Funktionen gehören Conditional Types und Mapped Types, die eine granulare Kontrolle über Typumwandlungen und -entscheidungen bieten. Diese Funktionen ermöglichen eine unglaubliche Flexibilität und Präzision und machen TypeScript zu viel mehr als nur „JavaScript mit Typen“.
In diesem Blog werden wir in diese fortgeschrittenen Typen eintauchen, ihre Syntax und Anwendungsfälle erforschen und herausfinden, wie sie Ihre TypeScript-Projekte aufwerten können.
Was sind bedingte Typen?
Mit bedingten Typen können Sie Typbeziehungen und Logik ausdrücken, die von Bedingungen abhängen. Sie ähneln dem ternären Operator von JavaScript, sind jedoch auf Typen zugeschnitten.
T erweitert U ? X: Y
Dies lautet wie folgt: Wenn T erstreckt sich IN, dann ist der Typ X; Ansonsten ist es so UND.
Anwendungsfall: Vereinfachte Typinferenz
Stellen Sie sich vor, Sie möchten einen Hilfstyp erstellen, der den Rückgabetyp einer Funktion extrahiert. Mit bedingten Typen können Sie dies leicht erreichen:
type ReturnType<T> = T extends (…args: any[]) => infer R ? R : never;
const exampleFn = (x: number): string => x.toString(); type ExampleReturnType = ReturnType<typeof exampleFn>; // string
Hier, die schließen Das Schlüsselwort wird verwendet, um den Rückgabetyp zu erfassen und zu extrahieren.
Anwendungsfall: Typen ausschließen
Bedingte Typen eignen sich auch zum Filtern von Typen. Sie können zum Beispiel einen Typ erstellen, der bestimmte Typen ausschließt:
type Exclude<T, U> = T extends U ? never : T;
type AllowedTypes = Exclude<string | number | boolean, boolean>; // string | number
Was sind gemappte Typen?
Zugeordnete Typen ermöglichen es Ihnen, die Eigenschaften eines bestimmten Typs systematisch zu verändern. Sie sind unglaublich nützlich, um Variationen bestehender Typen ohne manuelle Wiederholungen zu erstellen.
type MappedType<T> = { [P in keyof T]: Transformation };
Hier iteriert P über die Schlüssel von T, und Sie können jede Transformation auf die Eigenschaftstypen anwenden.
Anwendungsfall: Eigenschaften optional machen
Angenommen, Sie haben einen Typ, bei dem Sie alle Eigenschaften optional machen wollen:
type Partial<T> = { [P in keyof T]?: T[P]; };
type User = { name: string; age: number; };
type OptionalUser = Partial<User>; // { name?: string; age?: number }
Anwendungsfall: Nur-Lese-Eigenschaften
Sie können alle Eigenschaften mit gemappten Typen schreibgeschützt machen:
type Readonly<T> = { readonly [P in keyof T]: T[P]; };
type ReadonlyUser = Readonly<User>;
Kombination von abgebildeten und bedingten Typen
Die wahre Stärke dieser Typen zeigt sich, wenn sie kombiniert werden. Sie können zum Beispiel einen Hilfstyp erstellen, der Eigenschaften nur dann schreibgeschützt macht, wenn sie einer bestimmten Bedingung entsprechen:
type ReadonlyIfString<T> = { [P in keyof T]: T[P] extends string ? Readonly<T[P]> : T[P]; };
type MixedType = { name: string; age: number; };
type ConditionalReadonly = ReadonlyIfString<MixedType>;
Real-World-Anwendungen
- Handhabung von API-Antworten
Bedingte und zugeordnete Typen können bei der Erstellung präziser Typen für API-Antworten helfen und so die Fehlerbehandlung und Datentransformation sicherer machen.
type ApiResponse<T> = { data: T extends null | undefined ? never : T; error: string | null; };
type UserData = { name: string; age: number };
type UserResponse = ApiResponse<UserData | null>;
- Validierung von Formularen
Beim Erstellen von Formularen können Sie zugeordnete Typen verwenden, um Typen für Validierungsregeln dynamisch zu erstellen:
type ValidationRules<T> = { [P in keyof T]?: (value: T[P]) => boolean; };
type FormValues = { email: string; password: string; };
type FormValidation = ValidationRules<FormValues>;
Wichtigste Erkenntnisse
- Bedingte Typen Bringen Sie dynamische Typtransformationen basierend auf Bedingungen mit und machen Sie TypeScript zu einem leistungsstarken Werkzeug für die generische Programmierung.
- Zugeordnete Typen ermöglichen es Ihnen, mit minimalem Aufwand Variationen bestehender Typen zu erstellen.
- Zusammen ermöglichen sie es Entwicklern, hochgradig wiederverwendbare und präzise Dienstprogramme zu erstellen, wodurch der Boilerplate reduziert und die Codesicherheit verbessert wird.
Schlussfolgerung
Das Verständnis und die Nutzung von Conditional und Mapped Types wird Ihre TypeScript-Fähigkeiten auf die nächste Stufe heben. Diese fortschrittlichen Typen verbessern nicht nur die Typsicherheit, sondern helfen auch, ausdrucksstarken, wiederverwendbaren und wartbaren Code zu erstellen. Egal, ob Sie mit API-Antworten, Formularvalidierung oder Typfilterung zu tun haben, diese Tools bieten die Flexibilität, intelligentere Typsysteme zu erstellen.
TypeScript erweitert die Grenzen der statischen Typisierung in JavaScript, und die Beherrschung dieser Funktionen ist ein Schritt zur Erschließung des vollen Potenzials. Viel Spaß beim Kodieren!
