Nützliche Typen in TypeScript

Nützliche Typen in TypeScript

Dieser Artikel erklärt die nützlichen Typen in TypeScript.

YouTube Video

Nützliche Typen in TypeScript

TypeScript-Nutztypen sind praktische Werkzeuge, um neue Typen basierend auf vorhandenen Typen zu erstellen. Dies ermöglicht flexiblere Typdefinitionen und erhöht die Wiederverwendbarkeit des Codes. Hier werden wir häufig verwendete nützliche Typen im Detail erklären und besprechen, wie jeder mit Beispielcode verwendet wird.

Partial<T>

Partial<T> macht alle Eigenschaften eines Objekttyps optional (erlaubt undefined). Es ist nützlich, wenn Sie nur einige der Eigenschaften des ursprünglichen Typs verwenden möchten.

 1interface User {
 2  id: number;
 3  name: string;
 4  age: number;
 5}
 6
 7function updateUser(user: Partial<User>) {
 8  console.log(user);
 9}
10
11updateUser({ name: "Alice" }); // Updates only 'name'

Erklärung:

Im obigen Beispiel macht die Verwendung von Partial<User> alle Eigenschaften des User-Typs optional. Daher können Sie in der updateUser-Funktion nur eine Teilmenge der Eigenschaften übergeben.

Required<T>

Required<T> macht alle Eigenschaften, einschließlich optionaler, erforderlich. Es wird verwendet, wenn Sie optionale Eigenschaften in erforderliche umwandeln möchten.

 1interface User {
 2  id: number;
 3  name?: string;
 4  age?: number;
 5}
 6
 7function createUser(user: Required<User>) {
 8  console.log(user);
 9}
10
11// createUser({ id: 1 }); // Error: 'name' and 'age' are required
12createUser({ id: 1, name: "Alice", age: 25 });

Erklärung:

Durch die Verwendung von Required<User> werden Eigenschaften wie name und age als erforderlich behandelt.

Readonly<T>

Readonly<T> macht alle Eigenschaften eines Objekts schreibgeschützt. Dies verhindert, dass die Werte des Objekts geändert werden.

 1interface User {
 2  id: number;
 3  name: string;
 4}
 5
 6const user: Readonly<User> = {
 7  id: 1,
 8  name: "Alice"
 9};
10
11// user.id = 2; // Error: 'id' is read-only
12console.log(user);

Erklärung:

Durch die Verwendung von Readonly<T> können Sie die Eigenschaften eines Objekts vor Änderungen schützen. Es ist effektiv, wenn Sie verhindern möchten, dass Daten während der Entwicklung versehentlich geändert werden.

Record<K, T>

Record<K, T> erstellt einen Typ für Abbildungen mit bestimmten Schlüssel- und Werttypen. K ist der Typ der Schlüssel (z. B. string oder number), und T ist der Typ der Werte.

 1type Roles = "admin" | "user" | "guest";
 2interface Permissions {
 3  read: boolean;
 4  write: boolean;
 5}
 6
 7const rolePermissions: Record<Roles, Permissions> = {
 8  admin: { read: true, write: true },
 9  user: { read: true, write: false },
10  guest: { read: false, write: false },
11};
12
13console.log(rolePermissions);

Erklärung:

Record<K, T> ist nützlich, wenn Sie Schlüssel-Wert-Paare definieren möchten. Im obigen Beispiel werden Berechtigungen basierend auf Benutzerrollen definiert.

Pick<T, K>

Pick<T, K> extrahiert nur die angegebenen Eigenschaften aus einem Objekttyp. Sie können einen neuen Typ erstellen, indem Sie nur die erforderlichen Eigenschaften extrahieren.

 1interface User {
 2  id: number;
 3  name: string;
 4  age: number;
 5}
 6
 7type UserSummary = Pick<User, "id" | "name">;
 8
 9const summary: UserSummary = {
10  id: 1,
11  name: "Alice"
12};
13
14console.log(summary);

Erklärung:

Durch die Verwendung von Pick<T, K> können Sie bestimmte Eigenschaften aus einem Objekttyp extrahieren und sie als neuen Typ behandeln. Zum Beispiel werden im obigen Beispiel nur id und name extrahiert.

Omit<T, K>

Omit<T, K> schließt angegebene Eigenschaften aus einem Objekttyp aus. Dies ist die umgekehrte Operation von Pick.

 1interface User {
 2  id: number;
 3  name: string;
 4  age: number;
 5  email: string;
 6}
 7
 8type UserWithoutEmail = Omit<User, "email">;
 9
10const userWithoutEmail: UserWithoutEmail = {
11  id: 1,
12  name: "Alice",
13  age: 25
14};
15
16console.log(userWithoutEmail);

Erklärung:

Mit Omit<T, K> können Sie einen neuen Typ erstellen, indem Sie bestimmte Eigenschaften ausschließen. Im obigen Beispiel wird die Eigenschaft email ausgeschlossen.

Exclude<T, U>

Exclude<T, U> erstellt einen neuen Typ, indem der Typ U aus dem Union-Typ T entfernt wird. Es wird verwendet, wenn Sie einen bestimmten Typ entfernen möchten.

1type Status = "active" | "inactive" | "pending";
2type ExcludedStatus = Exclude<Status, "pending">;
3
4const status: ExcludedStatus = "active"; // "pending" is excluded, so it cannot be chosen
5console.log(status);

Erklärung:

Mit Exclude<T, U> können Sie unnötige Typen innerhalb eines Union-Typs entfernen. Im obigen Beispiel kann nach dem Ausschluss von "pending" nur "active" oder "inactive" ausgewählt werden.

Extract<T, U>

Extract<T, U> extrahiert die Teile, die mit dem Typ U innerhalb des Union-Typs T übereinstimmen. Es ist nützlich, wenn Sie nur einen bestimmten Typ extrahieren möchten.

1type Status = "active" | "inactive" | "pending";
2type ActiveStatus = Extract<Status, "active" | "pending">;
3
4const status: ActiveStatus = "active"; // "inactive" cannot be chosen
5console.log(status);

Erklärung:

Extract<T, U> führt die umgekehrte Operation von Exclude aus. Im obigen Beispiel können nur "active" und "pending" ausgewählt werden.

NonNullable<T>

NonNullable<T> erstellt einen Typ, bei dem null und undefined ausgeschlossen sind. Es ist hilfreich, wenn Sie diese Werte aus optionalen Typen ausschließen möchten.

1type UserName = string | null | undefined;
2type ValidUserName = NonNullable<UserName>;
3
4const name: ValidUserName = "Alice"; // null and undefined cannot be chosen
5console.log(name);

Erklärung:

NonNullable<T> schließt null und undefined aus einem Typ aus, der diese enthält. Dies ist nützlich, wenn Sie sicherstellen möchten, dass ein Wert definitiv existiert.

Fazit

TypeScript-Utility-Typen sind leistungsstarke Werkzeuge, um Typdefinitionen prägnanter und flexibler zu gestalten. Das Verstehen und der angemessene Einsatz von grundlegenden Utility-Typen wie Partial, Required, Readonly, Record usw. können die Wiederverwendbarkeit und Wartbarkeit des Codes verbessern. Das Beherrschen dieser Typen ermöglicht robustere und sichere Typdefinitionen und sorgt für eine effiziente Entwicklung.

TypeScripts keyof-Operator

Der keyof-Operator in TypeScript wird verwendet, um alle Eigenschaftsnamen eines Objekttyps abzurufen. Mit diesem Operator können Sie die Schlüssel eines Objekttyps als Union-Typ erhalten. Dies ist äußerst nützlich, um typsicheren Code zu schreiben.

Grundlegende Verwendung

1interface Person {
2    name: string;
3    age: number;
4    email: string;
5}
6
7// Use keyof to get the property names of Person
8type PersonKeys = keyof Person; // "name" | "age" | "email"

Beispielhafte Verwendung

  1. Verwendung in Funktionsargumenten

    Sie können keyof verwenden, um eine Funktion zu definieren, die Typen basierend auf spezifischen Eigenschaften eines Objekts hat.

1function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
2    return obj[key];
3}
4
5const person: Person = { name: "Alice", age: 30, email: "alice@example.com" };
6const name = getProperty(person, "name"); // type is string
7const age = getProperty(person, "age");   // type is number
  1. Erweiterung der Typbeschränkungen

    Durch die Verwendung von keyof können Sie sicherstellen, dass die an eine Funktion übergebenen Schlüssel zur Kompilierungszeit validiert werden.

1// Passing an invalid property name results in an error
2const invalid = getProperty(person, "invalidKey"); // Error

Zusammenfassung

  • Der keyof-Operator wird verwendet, um alle Eigenschaftsnamen eines Objekttyps abzurufen.
  • Sie können die Eigenschaftsnamen als Union-Typ erhalten, was zu typsicherem Code führt.
  • Durch die Verwendung in Funktionsargumenten können Sie die Funktion darauf beschränken, nur gültige Eigenschaftsnamen zu akzeptieren.

Auf diese Weise verbessert der keyof-Operator die Typsicherheit in TypeScript und hilft Ihnen, robustereren Code zu schreiben.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video