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.