Typescript Partial<Type> Utility Type

In this article, we are going to learn about the Partial<Type> that is available in the Typescript. One of the features in Typescript is Partial<Type> which is a built-in utility type. It helps to create a new type by making all properties of an existing type optional. Now we can pass properties of an object of a new type that is created with Partial<Type>. So that we will be able to pass some of the properties of an object of this new type, without defining every property separately. Now it can be useful in many situations where we want to create a new object that has only some of the properties of an existing object. The significance of Partial<Type> is that it simplifies the process of creating objects with optional properties. By using Partial<Type>, developers can avoid writing repetitive code to create objects with optional properties, which in turn can save time and reduce the likelihood of introducing errors.

Syntax:

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

Where – 

• T: T is the type we want to make partial.
• keyof: This operator is used to a union of all the property names in T.
• ? operator: It is used set the property to optional.

Approach: If we already have a typescript interface with some properties, and all of the properties are initially required. Now let’s say, we have a scenario where we need to use the already existing interface but we don’t need all its properties of it has, so instead of making a new interface with some of its properties, we can use the same interface and create a new type with all the properties of it optional by using the Partial<Type>, so in that case we can use any properties to do the job. 

Example 1: In this example, we will make an interface partial with the help of the Partial utility type, so first we created an interface named person which contains a person’s name, age, and address. Now we create a new type called PartialPerson by passing the Person to the Paertial<Type>. Now it will create a new type that will contain all the properties of Person. Note that here each property is set to optional so that we can create a new person object which will have only the name property.

Javascript

/* Define an interface for a `Person`
object with `name`, `age`, and
`address` properties */
interface Person {
    name: string;
    age: number;
    address: string;
}

/* Use the `Partial` utility type to
create a new type where all properties
of `Person` are optional */
type PartialPerson = Partial<Person>;

/* Create an instance of the `PartialPerson`
type with only the `name` property set */
const person: PartialPerson = { name: 'John' };

// Log the `person` object to the console
console.log(person);

Output:

Example 2: In this example, we will use the Partial<Type> with functions. We have created a function called getUser which will take an object with a name and age property and returns a string. Here we can make the argument object partial using the Partial<Type> same as we did in the upper example by creating a new type named User that will contain an object with name and age property and then create the getUser function that will take an argument of Partial<User>, so that means both name and age properties become optional. Now we can call the function with an object that has only the name property defined or we can use the object that has both name and age properties defined.

Javascript

/* Define a type for a `User` object
with `name` and `age` properties */
type User = {
    name: string;
    age: number;
};

/* Define a function called `getUser`
that accepts an object of type
`Partial<User>` and returns a string */
function getUser(user: Partial<User>): string {

    /* Use template literals to create a
    string that includes the `name` and `age`
    properties of the `user` object */
    return `Name: ${user.name}, Age: ${user.age || 'Unknown'}`;
}

/* Create two objects that are instances
of the `User` type */
const user1 = { name: 'John', age: 30 };
const user2 = { name: 'Mary' };

// Call the `getUser` function with the two objects
console.log(getUser(user1));
console.log(getUser(user2));

Output:

Conclusion: In this article, we have covered the what is Partial<Type> utility type in TypeScript with its syntax, and with two working examples we can see how to use it. is a useful tool for creating new types with only some of the properties of an existing type. This can be especially helpful when working with complex objects or functions that require many properties to be defined.