TypeScript Partial How to use Partial Type TypeScript

TypeScript Partial: How to use Partial Type TypeScript?

by

What is Partial in TypeScript?

The partial utility type in TypeScript allows you to create a new type with all properties of the original type set as optional.

It’s handy when you want to have flexibility with object properties.

Syntax:

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

To understand the syntax let’s explain it part by part:

  • T – represents the original type you want to make partial.

  • P in keyof T– It iterates over all the properties (P) in the original type (T).

  • T[P] – This represents the type of property P in the original type.

  • ? – This makes each property optional.

How to use Partial TypeScript?

Here’s the step-by-step guide on using the partial TypeScript.

Step 1: Define the Employee Interface

You start by defining an Employee interface with id, name, and age properties.

 interface Employee {
     id: number;
     name: string;
     age: number;
   }

Step 2: Create an Example Employee

You then create an employee object that conforms to the Employee interface.

let employee: Employee = {
id: 100101,
name: "Coding",
age: 18
};

Step 3: Create a Partial Update Object

You define updateEmployee as a Partial<Employee>.

This means updateEmployee can have any combination of properties from the Employee interface, none of which are required.

const updateEmployee: Partial = {
name: "Itsourcecode"
};

Step 4: Update the Employee

You use the spread operator (...) to combine the original employee object with the updateEmployee object.
The name property in employee is overwritten by the name from updateEmployee.

employee = { …employee, …updateEmployee };

Step 5: Output the Updated Employee

Finally, you log the updated employee object to the console, which will show the name property updated to “Itsourcecode”.

console.log(employee);
// Output will be: { id: 100101, name: "Itsourcecode", age: 18 }

This code effectively updates the name of the employee while keeping the other properties unchanged.

The Partial type allows for such selective updates without needing to provide all the properties of the Employee interface.

TypeScript Partial Examples

Let’s take a look at the examples below:

interface Student { 
	name: string; 
	age: number; 
	address: string; 
} 

type PartialStudent = Partial<Student>; 

const student: PartialStudent = { name: 'Itsourcecode' }; 


console.log(student);

Output:

{ name: 'Itsourcecode' }

Here’s another example:

// Define the Employee interface

interface Employee {
  id: number;
  name: string;
  age: number;
}


// Create an example employee
let employee: Employee = {
  id: 100101,
  name: "Coding",
  age: 18
};

// Define the Employee interface
const updateEmployee: Partial<Employee> = {
  name: "Itsourcecode"
};

// Update the employee
employee = { ...employee, ...updateEmployee };

console.log(employee);

Output:

{ id: 100101, name: 'Itsourcecode', age: 18 }

Conclusion

There you have it, we’re done discussing the Partial type in TypeScript that is used to create a new type with all properties of the original type set as optional.

We’ve also covered the step-by-step guide on how we can utilize the Partial type in our code, along with illustrative examples.

I hope this article has given you some insights and helped you understand the TypeScript Partial.

If you have any questions or inquiries, please don’t hesitate to leave a comment below.

Leave a Comment