Everyday TypeScript: Partial

• Sometimes we need a flexible way to create "partial" objects. These are objects with some of an object type's properties, but not necessarily all of them. We could do that manually with the ? syntax for optional properties.

• >

  type User = {
    name: string
    phoneNumber: string
  };
  
  type PartialUser = {
    name?: string
    phoneNumber?: string
  };

• This works, but it's not a good solution. First, it's verbose because we have to define two duplicate versions of the type. Second, it can lead to difficult bugs if the User and PartialUser types ever go out of sync. We might change a property's type in User, but forget to make the corresponding change in PartialUser.

• Fortunately, TypeScript provides a generic utility type for this: Partial. The type Partial<T> means "an object that has the same properties as T, but each property is optional". It's as if we'd defined a new copy of the type, but given every property a ?, like name?: string.

• Here's a partial user type again. This time we use Partial<User> instead of defining the entire PartialUser type manually.

• >

  type User = {
    name: string
    postalCode: string
  };
  
  const partialAmir: Partial<User> = {postalCode: '75010'};
  partialAmir.postalCode;

  Result:

  '75010'

• In that example, Partial<User> is exactly the same type as {name?: string, postalCode?: string}.

• When we access the properties in a partial object type, we get a union with undefined. For example, the postalCode property above is a string | undefined. As usual, we'll get a type error if we try to use it without considering the undefined case.

• >

  type User = {
    name: string
    postalCode: string
  };
  
  const partialAmir: Partial<User> = {postalCode: '75010'};
  
  const postalCode: string = partialAmir.postalCode;

  Result:

  type error: Type 'string | undefined' is not assignable to type 'string'.
    Type 'undefined' is not assignable to type 'string'.

• Here's a code problem:

  In the code below, we want to build a partial Album object. Currently, we're getting a type error because some of the album's properties are missing. Use the Partial type to fix the type error, but don't change any of the object's properties.

  9

  1

  2

  3

  4

  type Album = {

  name: string

  copiesSold: number

  };

  13

  5

  6

  7

  const kindOfBlue: Partial<Album> = {

  name: 'Kind of Blue',

  };

  16

  8

  kindOfBlue;

  Goal:

  {name: 'Kind of Blue'}

  Yours:

  {name: 'Kind of Blue'}

  Show Author's Answer

• Finally, let's look at the type definition for Partial itself. We found this type in the file "node_modules/typescript/lib/lib.es5.d.ts".

• Partial is a mapped type, which is a TypeScript feature that you may not have seen yet, so don't worry if that part is unfamiliar. However, the ? in [P in keyof T]?: T[P] should look familiar! It's the same ? that we've seen in types like {name?: string}.

• >

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

• This shows that we could write Partial ourselves if we wanted to, just like all of the other utility types!