Der Partial Type in TypeScript

Nehmen wir folgendes UserModel Interface an:

interface UserModel { email: string; password: string; address: string; phone: string;}

Dazu dann eine User Klasse mit einer update() Methode:

class User { update( user: UserModel ) { // Update user }}

Das Problem mit dem obigen Code besteht darin, dass wir ein Objekt übergeben müssen, welches das gesamte UserModel Interface implementieren muss. Andernfalls wirft der TypeScript Compiler Fehler ?.

Aber in unserem Fall wollen wir dynamisch sein und nicht alle Werte vom UserModel festlegen, aber dennoch schöne Code Completion erhalten.

In TypeScript (v2.1) gibt es eine Lösung für genau dieses Problem - Der Partial Type. Dazu müssen wir den Code nur wie folgt anpassen:

class User { update( user: Partial<UserModel> ) { // Update user }}

Nun haben wir das Beste von beiden Features.

Ein weiteres konkretes Beispiel wäre eine Komponente, welche Konfigurationen übergeben bekommt. Wir wollen aber einige Konfigurationen standardmäßig setzen.

type ComponentConfig = { optionOne: string; optionTwo: string; optionThree: string;}export class SomeComponent { private _defaultConfig: Partial<ComponentConfig> = { optionOne: '...' } @Input() config: ComponentConfig; ngOnInit() { const merged = { ...this._defaultConfig, ...this.config }; }}

Unter der Haube sieht das Partial Interface so aus:

type Partial<T> = { [P in keyof T]?: T[P]; };

Ziemlich Praktisch finden wir! ?

Mehr Infos zum Thema keyof gibt es hier TypeScript 2.1: keyof and Lookup Types