TypeScript-Dienstprogrammtypen: Eine vollständige Anleitung

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

</user>

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

</user>

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

</car>

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'

</config>

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

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

</user>

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> = {
  id: 1,
  name: 'Bob',
};

</user>

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

</fruit>

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

</user>

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

</car>

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'

</config>

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

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

</user>

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> = {
  id: 1,
  name: 'Bob',
};

</user>

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

</fruit>

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

</user>

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

</car>

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'

</config>

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

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

</user>

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!