Open In App

Typescript Partial<Type> Utility Type

Last Updated : 19 May, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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. 



Similar Reads

Typescript Required&lt;Type&gt; Utility Type
In this article, we are going to learn about the Required&lt;Type&gt; in Typescript. TypeScript is a popular programming language used for building scalable and robust applications. One of the features of Typescript is Required&lt;Type&gt; which is a built-in utility type that allows you to create a new type that makes all properties of the origina
4 min read
Typescript Record&lt;Keys, Type&gt; Utility Type
In this article, we are going to learn about the Record&lt;Keys, Type&gt; in Typescript. TypeScript is a programming language that is a strict syntactical superset of JavaScript. It adds optional static typing and class-based object-oriented programming to JavaScript, one of the features is Record&lt;Keys, Type&gt; which is a built-in utility type
4 min read
Typescript Awaited&lt;Type&gt; Utility Type
In this article, we are going to learn about the Awaited&lt;Type&gt; in TypeScript. It is a programming language that is a strict syntactical superset of JavaScript. It adds optional static typing and class-based object-oriented programming to JavaScript, one of the features of the typescript is Awaited&lt;Type&gt; it is a utility type in TypeScrip
2 min read
TypeScript Omit&lt;Type, Keys&gt; Utility Type
In this article, we are going to learn about the Omit&lt;Type, Keys&gt; utility type in Typescript. TypeScript is a powerful language that provides many utility types to make development easier and more efficient. One of the Typescript features is Omit utility type. We can use it when, let's say there exists a type already but we want to create a n
4 min read
TypeScript Pick&lt;Type, Keys&gt; Utility Type
In this article, we are going to learn about the Pick&lt;Type, Keys&gt; utility type in TypeScript. TypeScript is a programming language that is a strict syntactical superset of JavaScript. It adds optional static typing and class-based object-oriented programming to JavaScript, Pick&lt;Type, Keys&gt; is one of the features of Typescript which is a
5 min read
TypeScript Extract&lt;Type, Union&gt; Utility Type
In this article, we are going to learn about Extract&lt;Type, Union&gt; utility type in TypeScript, TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tools at any scale. Extract&lt;Type, Union&gt; utility type is used to extract a subset of types from a union type that matches a certain criterion, This
4 min read
TypeScript ReturnType &lt;Type&gt; Utility Type
In this article, we will learn about ReturnType&lt;Type&gt; Utility Type in Typescript. TypeScript is a popular programming language used for building scalable and robust applications. In TypeScript, the ReturnType&lt;Type&gt; utility type is used to extract the return type of a given function type or constructor type. It allows you to infer the ty
3 min read
TypeScript ConstructorParameters&lt;Type&gt; Utility Type
The TypeScript ConstructorParameters&lt;Type&gt; utility type extracts parameter types from a constructor function Type. It helps define functions that create instances of classes with correct constructor arguments, and It allows you to access and use the types of constructor function parameters. enhancing type safety. Syntax type ConstructorParame
2 min read
TypeScript Readonly &lt;Type&gt; Utility Type
In this article, we are going to learn about Readonly&lt;Type&gt; Utility Type in Typescript. Typescript is a popular programming language used for building scalable and robust applications. One of the features of Typescript is Readonly&lt;Type&gt; Utility Type which is used to create a new type where all properties are readonly, meaning they canno
2 min read
TypeScript ThisParameterType&lt;Type&gt; Utility Type
In this article, we are going to learn about ThisParameterType&lt;Type&gt; Utility Type in Typescript. TypeScript is a popular programming language used for building scalable and robust applications. In TypeScript, the ThisParameterType&lt;Type&gt; utility type is used to extract the type of this parameter in a function type. It allows you to captu
3 min read