How to make some of the properties in a type optional in TypeScript

This post gives you the method to make some of the properties in a type optional in TypeScript. We need to create a new utility type that takes a type and the property name as parameters and constructs a new type in which some specific properties are marked as optional. Keep reading the information below for detailed instructions.

Make some of the properties in a type optional in TypeScript

In TypeScript, there is no built-in utility type to help you make some of the properties in a type optional. Therefore, we must construct a new utility type that allows us to do that.

We need to use three available utility types: Partial, Pick and Omit to construct a new utility type. 

Let’s take a look at some examples below to see how we implement this approach. 

First, use the Omit utility type to construct a new type by taking all the properties and removing the specified properties in the provided type.

Here is an example of how this utility type works:

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

// Create a new type with all attributes of type 'Car', omitting the 'modelYear' property.
type NewCarType = Omit<Car, "modelYear">;

// Initialize an object of type 'NewCarType'
const myCar: NewCarType = {
    model: "model x",
    brand: "tesla",
    modelYear: "white",
};

console.log(myCar);

Error:

Object literal may only specify known properties, and 'modelYear' does not exist in type 'NewCarType'.

‘NewCarType’ is constructed by taking all properties of the ‘Car’ type, then removing the ‘modelYear’ property.

We get the above error message because the ‘myCar’ object has the ‘NewCarType’ type, which does not have a property named ‘modelYear’.

Next, we use two utility types: ‘Pick’ and ‘Partial’, to select the specific properties from the provided type and mark them as optional:

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

// Construct a new type by selecting two properties: 'modelYear' and 'brand', then setting them as optional
type NewCarType = Partial<Pick<Car, "model" | "brand">>;

// Initialize an object of type 'NewCarType'
const myCar: NewCarType = {
    model: "model x",
};

console.log(myCar);

Output:

{ model: 'model x' }

The ‘Pick’ utility type constructs a new type by picking out two properties: ‘model’ and ‘brand’ from the type ‘Car’. Then we use the ‘Partial’ utility type to construct another new type from the type just constructed by the ‘Pick’ utility type with all the properties marked as optional.

The entire program applies the methods mentioned above to construct a new utility type to make some of the properties in a type optional:

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

// Construct a new type to make some of the properties in the 'Car' type optional
type CarOptionalProp<Type, Key extends keyof Type> = Omit<Type, Key> &
    Partial<Pick<Type, Key>>;

// Mark the 'modelYear' and 'color' properties as optional
type T1 = CarOptionalProp<Car, 'modelYear' | 'color'>;

// Initialize an object of type 'CarOptionalProp'
const myCar: T1 = {
    model: 'model x',
    brand: 'tesla',
};

console.log(myCar)

 Output:

{ model: 'model x', brand: 'tesla' }

We created a new utility type named ‘CarOptionalProp’ in the above program. Its input parameters are a type and the property name. Then it returns a new type with the specific properties marked as optional.

The ‘myCar’ object is initialized with only two properties. At this point, properties: ‘modelYear’ and ‘color’ have been marked as optional.

Summary

In conclusion, you need to create a new utility type that takes a type and the property name as parameters and constructs a new type where some specific properties are marked as optional. We have gone through an example of how to implement this approach. That’s all we want to convey. Hopefully, the information we provide in this tutorial will be 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