I don’t usually bother to write about such small things, but I’ve come across many people who don’t know this handy feature, so I decided I should.

Let’s say we have a UserModel interface:

interface UserModel {

email: string;

password: string;

address: string;

phone: string;

}

And a User class with update() method:

class User {

update( user: UserModel ) {

// Update user

}

}

The problem with the code above is that we must pass an object that implements the whole UserModel interface, otherwise typescript will be 😡.

But in our case, we want to be dynamic and not be committed to the entire interface, but still get IntelliSense.

TypeScript (v2.1) provides us with a solution precisely for these cases — The Partial interface. All we need to do is to change the code above to this:

class User {

update( user: Partial<UserModel> ) {

// Update user

}

}

Now we can have the best of both worlds.

Another useful example would be if you have a component that takes configuration object as Input() and you want to have a default value.

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 };

}

}

Under the hood the Partial interface looks like this:

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

You can read more about the keyof feature here.

Follow me on Medium or Twitter to read more about Angular, Vue and JS!