TL;DR: TypeScript-Dienstprogrammtypen sind vorgefertigte Funktionen, die vorhandene Typen umwandeln und so Ihren Code sauberer und einfacher zu warten machen. In diesem Artikel werden wichtige Dienstprogrammtypen anhand von Beispielen aus der Praxis erl?utert, einschlie?lich der Aktualisierung von Benutzerprofilen, der Verwaltung von Konfigurationen und der sicheren Filterung von Daten.

TypeScript ist ein Eckpfeiler der modernen Webentwicklung und erm?glicht es Entwicklern, sichereren und wartbareren Code zu schreiben. Durch die Einführung statischer Typisierung in JavaScript hilft TypeScript dabei, Fehler beim Kompilieren zu erkennen. Laut der Stack Overflow Developer Survey 2024 belegt TypeScript den fünften^Platz der beliebtesten Skripttechnologien unter Entwicklern.

Die erstaunlichen Funktionen von TypeScript sind der Hauptgrund für seinen Erfolg. Beispielsweise helfen Dienstprogrammtypen Entwicklern, die Typmanipulation zu vereinfachen und Boilerplate-Code zu reduzieren. Dienstprogrammtypen wurden in TypeScript 2.1 eingeführt und in jeder neuen Version wurden zus?tzliche Dienstprogrammtypen hinzugefügt.

In diesem Artikel werden Dienstprogrammtypen ausführlich erl?utert, um Ihnen bei der Beherrschung von TypeScript zu helfen.

Grundlegendes zu TypeScript-Dienstprogrammtypen

Utility-Typen sind vordefinierte, generische Typen in TypeScript, die die Umwandlung vorhandener Typen in neue Variantentypen erm?glichen. Sie k?nnen als Funktionen auf Typebene betrachtet werden, die vorhandene Typen als Parameter verwenden und neue Typen basierend auf bestimmten Transformationsregeln zurückgeben.

Dies ist besonders nützlich, wenn Sie mit Schnittstellen arbeiten, wo h?ufig modifizierte Varianten bereits vorhandener Typen erforderlich sind, ohne dass die Typdefinitionen tats?chlich dupliziert werden müssen.

Grundlegende Versorgungstypen und ihre realen Anwendungen

Teilweise

Der Dienstprogrammtyp ?Partial“ nimmt einen Typ an und macht alle seine Eigenschaften optional. Dieser Dienstprogrammtyp ist besonders wertvoll, wenn der Typ verschachtelt ist, da er Eigenschaften rekursiv optional macht.

Angenommen, Sie erstellen eine Funktion zur Aktualisierung des Benutzerprofils. Wenn der Benutzer in diesem Fall nicht alle Felder aktualisieren m?chte, k?nnen Sie einfach den Typ ?Teilweise“ verwenden und nur die erforderlichen Felder aktualisieren. Dies ist sehr praktisch bei Formularen und APIs, bei denen nicht alle Felder erforderlich sind.

Siehe das folgende Codebeispiel.

interface User {
  id: number;
  name: string;
  email?: string;
}

const updateUser = (user: Partial<User>) => {
  console.log(Updating user: ${user.name} );
};

updateUser({ name: 'Alice' });

Erforderlich

Der Dienstprogrammtyp ?Erforderlich“ erstellt einen Typ, bei dem alle Eigenschaften des bereitgestellten Typs auf ?erforderlich“ gesetzt sind. Dies ist nützlich, um sicherzustellen, dass alle Eigenschaften verfügbar sind, bevor ein Objekt in der Datenbank gespeichert wird.

Wenn beispielsweise Erforderlich für die Fahrzeugregistrierung verwendet wird, wird sichergestellt, dass Sie beim Erstellen oder Speichern eines neuen Fahrzeugdatensatzes keine erforderlichen Eigenschaften wie Marke, Modell und Kilometerstand verpassen. Dies ist im Hinblick auf die Datenintegrit?t ?u?erst wichtig.

Sehen Sie sich das folgende Codebeispiel an.

interface User {
  id: number;
  name: string;
  email?: string;
}

const updateUser = (user: Partial<User>) => {
  console.log(Updating user: ${user.name} );
};

updateUser({ name: 'Alice' });

Schreibgeschützt

Der Dienstprogrammtyp ?Readonly“ erstellt einen Typ, bei dem alle Eigenschaften schreibgeschützt sind. Dies ist im Konfigurationsmanagement sehr nützlich, um die kritischen Einstellungen vor unerwünschten ?nderungen zu schützen.

Wenn Ihre App beispielsweise von bestimmten API-Endpunkten abh?ngt, sollten diese im Laufe ihrer Ausführung keinen ?nderungen unterliegen. Wenn Sie sie schreibgeschützt machen, ist gew?hrleistet, dass sie w?hrend des gesamten Lebenszyklus der App konstant bleiben.

Siehe das folgende Codebeispiel.

interface Car {
  make: string;
  model: string;
  mileage?: number;
}

const myCar: Required<Car> = {
  make: 'Ford',
  model: 'Focus',
  mileage: 12000,
};

W?hlen

Das Dienstprogramm ?Pick**“ erstellt einen Typ, indem es eine Reihe von Eigenschaften aus einem vorhandenen Typ ausw?hlt. Dies ist nützlich, wenn Sie wichtige Informationen wie den Namen und die E-Mail-Adresse des Benutzers herausfiltern müssen, um sie in einem Dashboard oder einer Zusammenfassungsansicht anzuzeigen. Es tr?gt dazu bei, die Sicherheit und Klarheit der Daten zu verbessern.

Siehe das folgende Codebeispiel.

interface Config {
  apiEndpoint: string;
}

const config: Readonly<Config> = { apiEndpoint: 'https://api.example.com' };

// config.apiEndpoint = 'https://another-url.com'; // Error: Cannot assign to 'apiEndpoint'

Auslassen

Der Dienstprogrammtyp ?Omit“ erstellt einen Typ, indem er bestimmte Eigenschaften aus einem vorhandenen Typ ausschlie?t.

Zum Beispiel ist Auslassen nützlich, wenn Sie Benutzerdaten an Dritte weitergeben m?chten, jedoch keine sensiblen Informationen wie eine E-Mail-Adresse. Sie k?nnen dies erreichen, indem Sie einen neuen Typ definieren, der diese Felder ausschlie?t. Insbesondere bei APIs m?chten Sie m?glicherweise beobachten, was in Ihren API-Antworten nach au?en geht.

Siehe das n?chste Codebeispiel.

interface User {
  id: number;
  name: string;
  email: string;
}

type UserSummary = Pick<User, 'name' | 'email'>;

const userSummary: UserSummary = {
  name: 'Alice',
  email: 'alice@example.com',
};

Aufzeichnen

Der Dienstprogrammtyp ?Record“ erstellt einen Objekttyp mit angegebenen Schlüsseln und Werten, was beim Umgang mit strukturierten Zuordnungen nützlich ist.

Zum Beispiel kann der Typ Datensatz im Kontext von Bestandsverwaltungssystemen nützlich sein, um explizite Zuordnungen zwischen Artikeln und Mengen vorzunehmen. Mit dieser Art von Struktur k?nnen die Bestandsdaten leicht abgerufen und ge?ndert werden, w?hrend gleichzeitig sichergestellt wird, dass alle erwarteten Früchte berücksichtigt werden.

interface User {
  id: number;
  name: string;
  email?: string;
}

const userWithoutEmail: Omit<User, 'email'> = {
  id: 1,
  name: 'Bob',
};

Ausschlie?en

Das Dienstprogramm ?Typ Exclude**“ erstellt einen Typ, indem es bestimmte Typen aus einer Union ausschlie?t.

Sie k?nnen Ausschlie?en verwenden, wenn Sie Funktionen entwerfen, die nur bestimmte primitive Typen akzeptieren sollen (z. B. Zahlen oder Boolesche Werte, aber keine Zeichenfolgen). Dies kann Fehler verhindern, bei denen unerwartete Typen Fehler w?hrend der Ausführung verursachen k?nnten.

Siehe das folgende Codebeispiel.

type Fruit = 'apple' | 'banana' | 'orange';
type Inventory = Record<Fruit, number>;

const inventory: Inventory = {
  apple: 10,
  banana: 5,
  orange: 0,
};

Extrakt

Das Dienstprogramm ?Typ extrahieren“ erstellt einen Typ durch Extrahieren bestimmter Typen aus einer Union.

In Szenarien, in denen Sie nur numerische Werte aus einer Sammlung gemischter Typen verarbeiten müssen (z. B. beim Durchführen von Berechnungen), stellt die Verwendung von Extrahieren sicher, dass nur Zahlen weitergeleitet werden. Dies ist in Datenverarbeitungspipelines nützlich, in denen eine strikte Typisierung Laufzeitfehler verhindern kann.

Siehe das folgende Codebeispiel.

interface User {
  id: number;
  name: string;
  email?: string;
}

const updateUser = (user: Partial<User>) => {
  console.log(Updating user: ${user.name} );
};

updateUser({ name: 'Alice' });

Nicht nullbar

Der NonNullable-Dienstprogrammtyp erstellt einen Typ, indem er null und undefiniert vom angegebenen Typ ausschlie?t.

In Apps, in denen einige Werte jederzeit definiert werden müssen, wie z. B. Benutzernamen oder Produkt-IDs, wird durch die Festlegung NonNullable sichergestellt, dass solche Schlüsselfelder niemals null oder undefiniert. Dies ist nützlich bei Formularvalidierungen und Antworten von APIs, bei denen fehlende Werte wahrscheinlich Probleme verursachen würden.

Siehe n?chstes Codebeispiel.

interface Car {
  make: string;
  model: string;
  mileage?: number;
}

const myCar: Required<Car> = {
  make: 'Ford',
  model: 'Focus',
  mileage: 12000,
};

Rückgabetyp

Das ReturnType-Dienstprogramm extrahiert den Rückgabetyp einer Funktion.

Bei der Arbeit mit Funktionen h?herer Ordnung oder Rückrufen, die komplexe Objekte wie Koordinaten zurückgeben, vereinfacht die Verwendung von

ReturnType die Definition der erwarteten Rückgabetypen, ohne dass diese jedes Mal manuell angegeben werden müssen. Dies kann die Entwicklung beschleunigen, indem Fehler im Zusammenhang mit nicht übereinstimmenden Typen reduziert werden.

interface Config {
  apiEndpoint: string;
}

const config: Readonly<Config> = { apiEndpoint: 'https://api.example.com' };

// config.apiEndpoint = 'https://another-url.com'; // Error: Cannot assign to 'apiEndpoint'

Parameter

Das Parameter-Dienstprogramm extrahiert die Parametertypen einer Funktion als Tupel.

Dies erm?glicht eine einfache Extraktion und Wiederverwendung der Parametertypen in Situationen, in denen Funktionsparameter dynamisch manipuliert oder validiert werden sollen, beispielsweise beim Schreiben von Wrappern um Funktionen. Es erh?ht die Wiederverwendbarkeit und Wartbarkeit des Codes in Ihrer gesamten Codebasis erheblich, indem es die Konsistenz der Funktionssignaturen gew?hrleistet.

Siehe das folgende Codebeispiel.

interface User {
  id: number;
  name: string;
  email: string;
}

type UserSummary = Pick<User, 'name' | 'email'>;

const userSummary: UserSummary = {
  name: 'Alice',
  email: 'alice@example.com',
};

Erweiterte Anwendungsf?lle mit Kombinationen von Versorgungstypen

Durch die Kombination dieser Dienstprogrammtypen k?nnen Sie bei der Entwicklung einer App mit TypeScript leistungsstarke Ergebnisse erzielen. Schauen wir uns einige Szenarien an, in denen mehrere Versorgungstypen effektiv zusammenarbeiten.

Teilweise und erforderlich kombinieren

Sie k?nnen einen Typ erstellen, der bestimmte Felder erfordert, w?hrend andere optional sein k?nnen.

interface User {
  id: number;
  name: string;
  email?: string;
}

const userWithoutEmail: Omit<User, 'email'> = {
  id: 1,
  name: 'Bob',
};

In diesem Beispiel erfordert

UpdateUser die Eigenschaft id, w?hrend Name und E-Mail optional sein dürfen. Dieses Muster eignet sich zum Aktualisieren von Datens?tzen, bei denen die Kennung immer vorhanden sein muss.

Erstellen flexibler API-Antworten

Vielleicht m?chten Sie API-Antworten definieren, die je nach bestimmten Bedingungen unterschiedliche Formen haben k?nnen.

type Fruit = 'apple' | 'banana' | 'orange';
type Inventory = Record<Fruit, number>;

const inventory: Inventory = {
  apple: 10,
  banana: 5,
  orange: 0,
};

Hier k?nnen Sie mit

ApiResponse flexible Antworttypen für einen API-Aufruf erstellen. Durch die Verwendung von Pick stellen Sie sicher, dass nur relevante Benutzerdaten in die Antwort einbezogen werden.

Kombinieren von Ausschlie?en und Extrahieren für Filtertypen

Es kann vorkommen, dass Sie bestimmte Typen anhand bestimmter Kriterien aus einer Union herausfiltern müssen.

Siehe das folgende Codebeispiel.

interface User {
  id: number;
  name: string;
  email?: string;
}

const updateUser = (user: Partial<User>) => {
  console.log(Updating user: ${user.name} );
};

updateUser({ name: 'Alice' });

Hier wird das Dienstprogramm Exclude verwendet, um einen Typ ( NonLoadingResponses ) zu erstellen, der das Laden von der ursprünglichen ResponseTypes-Union ausschlie?t. Zulassen, dass die Funktion handleResponse nur akzeptiert Erfolg oder Fehler als gültige Eingaben.

Best Practices

Nur bei Bedarf verwenden

Obwohl Dienstprogrammtypen unglaublich leistungsf?hig sind, kann ihre überm??ige Verwendung zu komplexem und unlesbarem Code führen. Es ist wichtig, ein Gleichgewicht zwischen der Nutzung dieser Dienstprogramme und der Aufrechterhaltung der Codeklarheit zu finden.

Siehe n?chstes Codebeispiel.

interface Car {
  make: string;
  model: string;
  mileage?: number;
}

const myCar: Required<Car> = {
  make: 'Ford',
  model: 'Focus',
  mileage: 12000,
};

Behalten Sie Klarheit

Stellen Sie sicher, dass der Zweck jedes Anwendungsfalls klar ist. Vermeiden Sie es, zu viele Dienstprogramme ineinander zu verschachteln, da dies die beabsichtigte Struktur Ihrer Typen verwirren kann.

Siehe das folgende Codebeispiel.

interface Config {
  apiEndpoint: string;
}

const config: Readonly<Config> = { apiEndpoint: 'https://api.example.com' };

// config.apiEndpoint = 'https://another-url.com'; // Error: Cannot assign to 'apiEndpoint'

Leistungsüberlegungen

W?hrend Leistungseinbu?en zur Laufzeit selten sind, da TypeScript-Typen nach der Kompilierung verschwinden, k?nnen komplexe Typen den TypeScript-Compiler verlangsamen und sich auf die Entwicklungsgeschwindigkeit auswirken.

interface User {
  id: number;
  name: string;
  email: string;
}

type UserSummary = Pick<User, 'name' | 'email'>;

const userSummary: UserSummary = {
  name: 'Alice',
  email: 'alice@example.com',
};

Abschluss

Es besteht kein Zweifel, dass TypeScript eine der beliebtesten Sprachen unter Webentwicklern ist. Dienstprogrammtypen sind eine der einzigartigen Funktionen in TypeScript, die bei korrekter Verwendung das TypeScript-Entwicklungserlebnis und die Codequalit?t erheblich verbessern. Wir sollten sie jedoch nicht für jedes Szenario verwenden, da es zu Problemen mit der Leistung und der Wartbarkeit des Codes kommen kann.

Verwandte Blogs

• Top-Linters für JavaScript und TypeScript: Vereinfachung des Code-Qualit?tsmanagements
• 7 JavaScript-Unit-Test-Frameworks, die jeder Entwickler kennen sollte
• Verwendung des Ausrufezeichens in TypeScript
• Bedingte Typen in TypeScript verstehen

Das obige ist der detaillierte Inhalt vonTypeScript-Dienstprogrammtypen: Eine vollst?ndige Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!