How to make all properties optional in TypeScript

This post provides the method to make all properties optional in TypeScript. The ‘Partial’ utility type allows us to construct a new type with all of the provided type’s properties set to optional. Keep reading the information below for detailed instructions.

Method to make all properties optional in TypeScript

TypeScript provides several utility types that are available globally to facilitate common type transformations. 

To make all properties optional, we use the ‘Partial’ utility type. This utility allows us to build a type with all properties of the provided type set to optional and return a type representing all subsets of a given type.

Let’s take a look at the following example to understand how we implement this utility type:

// Define the 'Student'interface with 3 properties
interface Student {
    name: string;
    id: string;
    gpa: number;
}

// Constructs a new type with all properties of the 'Student' type set to optional.
type OptionalPropStudent = Partial<Student>;

// Initialize an object of type 'OptionalPropStudent'
const newStudent: OptionalPropStudent = {};

newStudent.name = "Madison";
newStudent.gpa = 3.22;
console.log(newStudent);

Output:

{
  "name": "Madison",
  "gpa": 3.22
}

In this example, we use the ‘Partial’ utility type to get all properties of the ‘Student’ type, then set them to optional. As a result, we have a new type with all optional properties named ‘OptionalPropStudent’. 

The ‘newStudent’ object of type ‘OptionalPropStudent’ is created with only two properties: ‘name’ and ‘gpa’, without any errors.

As another approach, you can create a new type that includes all the properties of a particular object and set those properties to optional. For example:

// Define the 'Car'interface with 3 properties
interface Car {
    model: string;
    brand: string;
    modelYear: number;
}

// Create an object based on the 'Car' interface
const myCar: Car = {
    model: "Chiron",
    brand: "Buggati",
    modelYear: 2023,
};

// Constructs a new type with all properties of the 'myCar' object set to optional.
type OptionalPropCar = Partial<typeof myCar>;

// Initialize an object of type 'OptionalPropCar'
const newCar: OptionalPropCar = {};

newCar.brand = "Ferrari";
newCar.model = "Spider";
console.log(newCar);

Output:

{
  "brand": "Ferrari",
  "model": "Spider"
}

First, we define an interface named ‘Car’, then create an object based on it.

In this approach, instead of passing a type directly, you pass in an object and use the typeof operator to get the type of that object. If you just pass in an object, TypeScript will not know what to do, and an error will occur.

At this point, the result we obtain is a new type with all the properties of the ‘myCar’ object set to optional.

If you want to dig deeper into the ‘Partial’ utility type, here’s how it is implemented in TypeScript:

// Make all properties in T optional
type Partial<T> = {
    [P in keyof T]?: T[P];
};

In the content of this article, we will not go further. You can learn more about it yourself on TypeScript’s github repository.

Summary

To sum up, you can use the ‘Partial’ utility type to make all properties optional in TypeScript. We have gone through some examples of how to implement this utility type. That’s all we want to convey. Hopefully, the information we provide in this tutorial has been helpful to you.

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js