Getting To Know The Partial Type in TypeScript

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!