Make an optional property Required in TypeScript

# Table of ContentsMake an Optional property Required in TypeScriptMake all properties required in TypeScript# Make an Optional property Required in TypeScript

To make an optional property required, create a utility type that uses amapping modifier to remove the optionality for the specified property.

The new type will have the specified property marked as required.

index.tsCopied!interface Employee { id?: number; name: string; salary?: number;}type WithRequiredProperty = Type & { [Property in Key]-?: Type[Property];};// 👇️ Make salary requiredconst emp1: WithRequiredProperty = { name: 'Bobby Hadz', salary: 100,};

The code for this article is available on GitHub

We created autility typethat takes a type and a property name and makes the property required.

You can use the utility type to make more than one property required byseparating their names with a pipe.

index.tsCopied!interface Employee { id?: number; name: string; salary?: number;}type WithRequiredProperty = Type & { [Property in Key]-?: Type[Property];};// 👇️ Make `salary` and `id` requiredconst emp1: WithRequiredProperty = { id: 0, name: 'Bobby Hadz', salary: 100,};

The -?: syntax is called amapping modifieris used to affect optionality.

It is used in the built-inRequiredutility type which looks likethis:

index.tsCopied!/** * Make all properties in T required */type Required = {[P in keyof T]-?: T[P];};

In our case, we only make a single property required.

index.tsCopied!interface Employee { id?: number; name: string; salary?: number;}type WithRequiredProperty = Type & { [Property in Key]-?: Type[Property];};const emp1: WithRequiredProperty = { name: 'Bobby Hadz', salary: 100,};

An alternative and perhaps easier-to-read solution is to extend thetype alias orinterface and override theproperties you want to set to required.

# Extend the type alias or interface

Alternatively, you can extend the interface or type alias, creating a newinterface where you set the optional properties to required.

The code for this article is available on GitHub

The EmployeeWithSalary interface extends Employee and overrides the salaryand id properties, setting them to required.

If any of the required properties are omitted, we will get a type-checkingerror.

index.tsCopied!interface Employee { id?: number; name: string; salary?: number;}interface EmployeeWithSalary extends Employee { salary: number; // 👈️ is now required id: number; // 👈️ is now required}// ⛔️ Error: Property 'id' is missing in type// '{ name: string; salary: number; }' but// required in type 'EmployeeWithSalary'.ts(2741)const emp2: EmployeeWithSalary = { name: 'Bobby Hadz', salary: 200,};# Make all properties required in TypeScript

Use the Required utility type to make all of the properties in a typerequired.

index.tsCopied!interface Employee { id?: number; name?: string; salary?: number;}const emp: Required = { id: 1, name: 'Bobby Hadz', salary: 1000,};

The code for this article is available on GitHub

The Required utility type constructs a new type with all properties of theprovided type set to required.

index.tsCopied!interface Employee { id?: number; name?: string; salary?: number;}// 👇️ type T = {// id: number;// name: string;// salary: number;// }type T = Required;

You can see how the built-in Required type is implemented in TypeScript'sGithub repository.

index.tsCopied!/** * Make all properties in T required */type Required = {[P in keyof T]-?: T[P];};

The -?: syntax is called amapping modifierand is used to affect optionality.

When prefixed with a minus, the mapping modifier removes the optionality of thetype's properties.

The utility type basically takes all of the properties of the provided type and removes their optionality (makes them required).

Mapping modifiers can affect optionality both ways, e.g. you can also use themto make all of the properties of a type optional by prefixing the ?: with aplus (+?:).

If you don't add a prefix, then + is assumed.

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

This is thecodefor the Partial utility type,which makes all of the properties in a type optional.

Notice that the only difference between the two types is the minus in front ofthe question mark in the Required type.

The -?: syntax removes optionality whereas, ?: (or +?:) makes allproperties in the type optional.

# Additional Resources

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

How to compare Objects in TypeScriptProperty is incompatible with index signature in TypeScriptProperty is missing in type 'X' but required in type 'Y'Flag 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5