Der Partial Type in TypeScript

Der Partial Type in TypeScript

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

Mehr Informationen zu Mobile App Entwicklung

Einheitliche Codebasis und plattformĂŒbergreifende Entwicklung, das gehört fĂŒr Orlyapps einfach zusammen. Denn genau das macht Ihre App flexibel und pflegeleicht, egal fĂŒr welches EndgerĂ€t. Oder gleich mehrere.

Beitrag Teilen