Getting To Know TypeScript's Partial Type

Overview & Setup

This article will demonstrate how to use and the benefits of the Partial Type in TypeScript.

The demo I will do is in Angular, but this can be done in any TypeScript file. Create a new component in an Angular Project, or create a new Stackblitz Angular project. I did my work in a Stackblitz project, which can be found here.

Getting Into It

In the component that was just created, or in any component that you will be using a Partial Type, create a new interface. This is done by using the Angular CLI command ng g i <interfaceName> or by inserting the code below above the @Component decorator.

// app.component.ts

export interface Player {
  firstName: string;
  lastName: string;
  age: number;
  stats: {
    ppg: number;
    apg: number;
    spg: number;
    rpg: number;
  };
  country: string;
  college: string;
}

Once the new interface has been declared (If you used the CLI command you will need to import it into your component), we will create three new class variables. This is where we will actually implement the Partial Type. It is done by declaring the type as Partial<interface>, as seen below. These are the three variables I created using my 'Player' interface.

// app.component.ts

  spida: Player = {
    firstName: 'Don',
    lastName: 'Mitch',
    age: 24,
    stats: {
      ppg: 24,
      apg: 4,
      spg: 3,
      rpg: 3
    },
    country: 'USA',
    college: 'Louisville'
  };

  stifle: Partial<Player> = {
    firstName: 'Rudy',
    lastName: 'Gobert',
    age: 28,
    stats: {
      ppg: 15,
      apg: 2,
      spg: 1,
      rpg: 14
    },
    country: 'France'
  };

  slomo: Player = {
    firstName: 'Joe',
    lastName: 'Ingles',
    age: 34,
    stats: {
      ppg: 12,
      apg: 7,
      spg: 2,
      rpg: 6
    },
    country: 'Australia'
  };

One of the variables should be created using all of the attributes of the interface. One should be created using Partial<Player> as a type, and one should have just Player as the type, but should not contain all of the attributes from the interface. When all of these variables are created, you should see that there is an error, on the variable without the Partial type and without all the attributes of the Type. If you comment out that variable, you should see it working!

This demonstrates how to actually use the Partial Type, so now lets talk about why it is beneficial to know about and use it.

Why?

There may be countless situations in which a Partial Type would be beneficial to utilize, but the generic situation is whenever you have an interface created, only need some of the attributes for a new variable that you are creating. This could come in handy if you are gathering information through a form that will then patch the value of an existing variable. It would allow the form information to be strongly typed, but wouldn't require a new interface to be created.

Another strong benefit to the Partial type is the ability to still have intellisense on variables when they don't use all the attributes. Intellisense is helpful to minimize spelling mistakes and to help remember what attributes are on a type. I am always looking for ways to use my intellisense and I know that it makes life harder when it isn't available. So any way to decrease situations where I cant use it is a bonus.

Wrap Up

Overall there are countless ways to use the Partial type and many benefits to it. Finding ways to keep TypeScript code strongly typed is always good, and increasing the use of intellisense is awesome. The Partial type does both of those things. If you have more/better reasons to use the Partial Type reach out to me and let me know! I would love to know more about it! You can find me by clicking on any of the logos in the footer of my site.

Again, for a live example of the above code, see this Stackblitz .