Make all properties optional in TypeScript

avatar
Borislav Hadzhiev

Last updated: Feb 28, 2024
5 min

banner

# Table of Contents

  1. Make all properties optional in TypeScript
  2. Make all properties optional except one in TypeScript
  3. Make a single, or some properties in a type Optional in TS

# Make all properties optional in TypeScript

Use the Partial utility type to make all of the properties in a type optional.

The Partial utility type constructs a new type with all properties of the provided type set to optional.

index.ts
interface Employee { id: number; name: string; salary: number; } const emp: Partial<Employee> = {}; emp.name = 'Bobby Hadz';

make all properties optional

The code for this article is available on GitHub

We used the Partial utility type to construct a new type with all of the properties of the provided type set to optional.

index.ts
interface Employee { id: number; name: string; salary: number; } // ๐Ÿ‘‡๏ธ type T = { // id?: number | undefined; // name?: string | undefined; // salary?: number | undefined; // } type T = Partial<Employee>;

The same approach can be used to get a type that consists of an object's properties where all of them are marked as optional.

index.ts
const obj = { id: 1, name: 'Bobby Hadz', salary: 100, }; // ๐Ÿ‘‡๏ธ type T = { // id?: number | undefined; // name?: string | undefined; // salary?: number | undefined; // } type T = Partial<typeof obj>;

Notice that we had to use the typeof type operator, because Partial expects a type.

You can see how the built-in Partial type is implemented in TypeScript's Github repository.

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

The ?: syntax is called a mapping modifier and is used to affect optionality.

You can also see +?: being used, which achieves the same result. If you don't add a prefix, then + is assumed.

The utility type basically takes all of the properties of the provided type and marks them as optional.

Mapping modifiers can affect optionality both ways, e.g. you can also use them to make all of the properties of an interface required by prefixing the ?: with a minus (-?:).

If you don't add a prefix, then + is assumed, like in the Partial utility type.
index.ts
/** * Make all properties in T required */ type Required<T> = { [P in keyof T]-?: T[P]; };

This is the code for the Required utility type, which makes all of the properties of the provided type required.

Notice that the only character that changed is the minus in front of the question mark to use a mapping modifier that removes optionality.

I've also written a detailed guide on how to make one or all properties required.

# Make all properties optional except one in TypeScript

To make all of the properties of a type optional except one, use an interface to extend the type passing it to the Partial utility type and then override the specific property setting it to required.

index.ts
interface Employee { id: number; name: string; salary: number; } interface OptionalExceptSalary extends Partial<Employee> { salary: number; } const emp: OptionalExceptSalary = { salary: 100, };

make all properties optional except one

The code for this article is available on GitHub

We used the Partial utility type to construct a type where all of the properties are set to optional.

index.ts
interface Employee { id: number; name: string; salary: number; } // ๐Ÿ‘‡๏ธ type Opt = { // id?: number | undefined; // name?: string | undefined; // salary?: number | undefined; // } type Opt = Partial<Employee>;

The only properties we want to override in the new interface are the ones we want to mark as required.

You can achieve the same result by using a type alias.

index.ts
interface Employee { id: number; name: string; salary: number; } type OptionalExceptSalary = Partial<Employee> & { salary: number; }; const emp: OptionalExceptSalary = { salary: 100, };

You can use this approach to mark all properties except N as optional.

An alternative approach is to create a utility type that makes the specified properties optional.

index.ts
interface Employee { id: number; name: string; salary: number; } type MakeOptional<Type, Key extends keyof Type> = Omit<Type, Key> & Partial<Type>; // ๐Ÿ‘‡๏ธ mark salary as optional const emp: MakeOptional<Employee, 'salary'> = { id: 1, name: 'Bobby Hadz', };

The MakeOptional utility type takes a type and one of the type's keys as parameters and marks the specified key as optional (salary in the example).

You don't have to only mark a single property as optional.

index.ts
interface Employee { id: number; name: string; salary: number; } type MakeOptional<Type, Key extends keyof Type> = Omit<Type, Key> & Partial<Type>; // ๐Ÿ‘‡๏ธ mark salary and name as optional const emp: MakeOptional<Employee, 'salary' | 'name'> = { id: 1, };

The Omit utility constructs a new type by picking all properties from the provided type and removing the specified keys.

index.ts
interface Employee { id: number; name: string; salary: number; } // ๐Ÿ‘‡๏ธ type T = { // id: number; // name: string; // } type T1 = Omit<Employee, 'salary'>; // ๐Ÿ‘‡๏ธ type T2 = { // id: number; // } type T2 = Omit<Employee, 'salary' | 'name'>;

The first example looks something like the following.

index.ts
interface Employee { id: number; name: string; salary: number; } // ๐Ÿ‘‡๏ธ type T10 = { // id: number; // name: string; // } & Partial<Employee> type T10 = { id: number; name: string } & Partial<Employee>; // ๐Ÿ‘‡๏ธ only salary is marked as optional const example: T10 = { id: 1, name: 'Bobby Hadz', };

# Make a single, or some properties in a type Optional in TS

To make a single property in a type optional, create a utility type that takes a type and the property name as parameters and constructs a new type with the specific property marked as optional.

index.ts
interface Developer { language: string; age: number; experience: number; } type MakeOptional<Type, Key extends keyof Type> = Omit<Type, Key> & Partial<Pick<Type, Key>>; // ๐Ÿ‘‡๏ธ mark experience as optional type T1 = MakeOptional<Developer, 'experience'>; const dev1: T1 = { age: 30, language: 'ts', }; // ๐Ÿ‘‡๏ธ mark experience and age as optional type T2 = MakeOptional<Developer, 'experience' | 'age'>; const dev2: T2 = { language: 'ts', };
The code for this article is available on GitHub

The MakeOptional utility type takes a type and a property name as parameters and returns a new type with the specified property marked as optional.

You can use the MakeOptional utility type to mark one or some of the type's properties as optional.

We used the Omit utility type to construct a new type by picking all of the properties from the provided type and removing the specified keys.

index.ts
interface Developer { language: string; age: number; experience: number; } // ๐Ÿ‘‡๏ธ type O1 = { // experience: number; // language: string; // } type O1 = Omit<Developer, 'age'>; // ๐Ÿ‘‡๏ธ type O2 = { // language: string; // } type O2 = Omit<Developer, 'age' | 'experience'>;

Notice that we can specify more than one property name by separating them with a pipe | symbol (called union type).

Now that we have a type with the specified properties removed, we use the Pick utility type to construct a type consisting only of the specified properties and mark them as optional via the Partial utility type.

index.ts
interface Developer { language: string; age: number; experience: number; } // ๐Ÿ‘‡๏ธ type P1 = { // language: string; // } type P1 = Pick<Developer, 'language'>; // ๐Ÿ‘‡๏ธ type P2 = { // language: string; // age: number; // } type P2 = Pick<Developer, 'language' | 'age'>;
The Partial utility type is used to construct a new type with all of the properties of the provided type set to optional.

Here is the entire code snippet.

index.ts
interface Developer { language: string; age: number; experience: number; } type MakeOptional<Type, Key extends keyof Type> = Omit<Type, Key> & Partial<Pick<Type, Key>>; // ๐Ÿ‘‡๏ธ mark experience as optional type T1 = MakeOptional<Developer, 'experience'>; const dev1: T1 = { age: 30, language: 'ts', }; // ๐Ÿ‘‡๏ธ mark experience and age as optional type T2 = MakeOptional<Developer, 'experience' | 'age'>; const dev2: T2 = { language: 'ts', };

In summary, the Omit<Type,Key> part gets us a type that excludes all of the specified properties.

The Pick<Type,Key> syntax gets us a type that consists only of the specified properties.

The Partial<> utility type makes the specified properties optional.

The MakeOptional utility type can be used to mark one or more of a type's properties as optional.

The code for this article is available on GitHub

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev