Nutze die Utility Types in TypeScript optimal

TypeScript bietet viele Utility Types, die es dir ermöglichen, Typen dynamisch und praktisch zu manipulieren. Ob es darum geht, Eigenschaften optional oder unveränderlich zu machen oder bestimmte Felder eines Typs zu filtern, diese Utilities können dir helfen, saubereren, sichereren und lesbaren Code zu schreiben.

In diesem Artikel wirst du einige der am häufigsten verwendeten Utility Types in TypeScript kennenlernen, mit konkreten Beispielen, die dir zeigen, wie und wann du sie verwenden kannst.

1. `Partial<T>`

Der Utility Type Partial<T> wandelt alle Eigenschaften eines Typs T in optionale Eigenschaften um. Dies ist besonders nützlich, wenn du mit Objekten arbeitest, bei denen nicht immer alle Eigenschaften erforderlich sind.

Beispiel

Stellen wir uns einen Typ User mit Pflichtfeldern vor:

typescript

Wenn du eine Funktion erstellen möchtest, die einen Benutzer aktualisiert, aber nur eine Teilmenge dieser Eigenschaften benötigt, kannst du Partial<User> verwenden:

typescript

Dank Partial<User> kannst du jetzt nur bestimmte Eigenschaften aktualisieren, ohne alle anderen angeben zu müssen.

2. `Readonly<T>`

Readonly<T> macht alle Eigenschaften eines Typs T unveränderlich. Das bedeutet, dass nach der Erstellung des Objekts seine Eigenschaften nicht mehr geändert werden können, was ideal für konstante Objekte ist.

Beispiel

typescript

Mit Readonly<Config> stellst du sicher, dass config während der gesamten Laufzeit unveränderlich bleibt.

3. `Pick<T, K>`

Der Utility Type Pick<T, K> erstellt einen neuen Typ, indem er nur bestimmte Eigenschaften eines Typs T auswählt. Dies ist nützlich, wenn du eine Teilmenge eines bestehenden Typs erstellen möchtest.

Beispiel

typescript

Mit Pick<User, "id" | "name"> erstellst du einen Typ UserSummary, der nur die Eigenschaften id und name enthält.

4. `Omit<T, K>`

Umgekehrt erstellt Omit<T, K> einen neuen Typ, indem bestimmte Eigenschaften eines Typs T ausgeschlossen werden. Es ist das Gegenteil von Pick.

Beispiel

typescript

In diesem Beispiel enthält UserWithoutAddress alle Eigenschaften von User außer address.

5. `Record<K, T>`

Record<K, T> wird verwendet, um einen Objekttyp zu erstellen, bei dem die Schlüssel K von einem bestimmten Typ sind und die Werte vom Typ T. Dies ist nützlich für die Erstellung von assoziativen Objekten wie Wörterbüchern oder Mappings.

Beispiel

Angenommen, du möchtest ein Objekt erstellen, das Benutzerrollen mit Zugriffsrechten verknüpft:

typescript

In diesem Beispiel stellt Record<Role, Permissions[]> sicher, dass das Objekt rolePermissions alle Schlüssel admin, user und guest mit Werten vom Typ Permissions[] enthält.

6. `Exclude<T, U>`

Exclude<T, U> ermöglicht es, einen Typ zu erstellen, indem bestimmte Typen aus einem anderen Typ ausgeschlossen werden. Dies ist nützlich zum Filtern spezifischer Typen aus einem Union Type.

Beispiel

typescript

Mit Exclude<Status, "suspended"> erstellst du einen Typ ActiveStatus, der nicht "suspended" sein kann.

Fazit

Die Utility Types von TypeScript ermöglichen es dir, komplexe Typen prägnant und lesbar auszudrücken. Durch die Nutzung von Partial, Readonly, Pick, Omit, Record und Exclude kannst du deine Typen dynamisch manipulieren und die Anforderungen deiner Anwendung erfüllen, ohne deinen Code zu überladen.

Diese Utilities sind nur die Spitze des Eisbergs: TypeScript bietet noch viele weitere fortgeschrittene Utility Types. Nimm dir die Zeit, diese Werkzeuge zu erkunden, und dein Code wird wartbarer, sicherer und leichter zu lesen sein.

Durch die Anwendung dieser Tipps kannst du deine Typen effektiver manipulieren und noch robusteren TypeScript-Code schreiben. Viel Spaß beim Coding!

1type User = {
2  id: number;
3  name: string;
4  email: string;
5};

1function updateUser(user: User, updates: Partial<User>) {
2  return { ...user, ...updates };
3}
4
5// Verwendung
6const user: User = { id: 1, name: 'Alice', email: 'alice@beispiel.de' };
7const updatedUser = updateUser(user, { name: 'Alicia' });

1type Config = {
2  apiEndpoint: string;
3  timeout: number;
4};
5
6const config: Readonly<Config> = {
7  apiEndpoint: 'https://api.beispiel.de',
8  timeout: 5000,
9};
10
11// Fehler: Kann 'timeout' nicht zuweisen, da es eine schreibgeschützte Eigenschaft ist
12config.timeout = 3000;

1type User = {
2  id: number;
3  name: string;
4  email: string;
5  address: string;
6};
7
8type UserSummary = Pick<User, 'id' | 'name'>;
9
10const userSummary: UserSummary = {
11  id: 1,
12  name: 'Alice',
13};
14
15// Fehler: Eigenschaft 'email' existiert nicht im Typ 'UserSummary'
16userSummary.email = 'alice@beispiel.de';

1type UserWithoutAddress = Omit<User, 'address'>;
2
3const userWithoutAddress: UserWithoutAddress = {
4  id: 1,
5  name: 'Alice',
6  email: 'alice@beispiel.de',
7};
8
9// Fehler: Eigenschaft 'address' existiert nicht im Typ 'UserWithoutAddress'
10userWithoutAddress.address = 'Hauptstraße 123';

1type Role = 'admin' | 'user' | 'guest';
2type Permissions = 'read' | 'write' | 'delete';
3
4const rolePermissions: Record<Role, Permissions[]> = {
5  admin: ['read', 'write', 'delete'],
6  user: ['read', 'write'],
7  guest: ['read'],
8};

1type Status = 'active' | 'inactive' | 'suspended';
2
3type ActiveStatus = Exclude<Status, 'suspended'>;
4
5const status: ActiveStatus = 'active'; // Gültig
6const anotherStatus: ActiveStatus = 'suspended'; // Fehler