Solve - Type 'undefined' is not assignable to type in TS

avatar

Borislav Hadzhiev

Sun Mar 06 20224 min read

banner

Photo by Ben White

Solve - Type 'undefined' is not assignable to type in TS #

The "Type 'undefined' is not assignable to type" error occurs when a possibly undefined value is assigned to something that expects a different type. To solve the error, use the non-null assertion operator or a type guard to verify the value is of the specific type before the assignment.

Here is an example of how the error occurs.

index.ts
interface Employee { name?: string; // 👈️ optional (might be undefined) salary: number; } const emp: Employee = { name: 'Tom', salary: 123, }; // ⛔️ Error: Type 'string | undefined' is // not assignable to type 'string'. // Type 'undefined' is not assignable to type 'string'.ts(2322) const name: string = emp.name;

The name property is marked as optional in the Employee interface.

This means that the property can store a string or an undefined value.

The name variable is typed as a string, so it only expects to get assigned a value that is a string.

TypeScript is basically telling us that the emp.name property might have a value of undefined, which is not compatible with the type of the name variable, which only expects a string.

Here are a couple of examples of how you can solve the error.

index.ts
interface Employee { name?: string; salary: number; } const emp: Employee = { name: 'Tom', salary: 123, }; // eslint-disable-next-line @typescript-eslint/no-non-null-assertion const name: string = emp.name!; // 👈️ non null assertion console.log(name); // 👉️ "Tom"

The exclamation mark is the non-null assertion operator in TypeScript.

It removes null and undefined from a type without doing any explicit type checking.

When you use this approach, you basically tell TypeScript that this value will never be null or undefined.

This is very similar to using a type assertion.

index.ts
interface Employee { name?: string; salary: number; } const emp: Employee = { name: 'Tom', salary: 123, }; const name: string = emp.name as string; // 👈️ type assertion console.log(name); // 👉️ "Tom"

Type assertions are used when we have information about the type of a value that TypeScript can't know about.

We effectively tell TypeScript that emp.name will be a string and not to worry about it.

If the value you are trying to set has a different type, make sure to reflect that in the type assertion, e.g. as number if that's the type of the value.

You could set the type of the name variable to be string | undefined, which could solve the error depending on your use case.

index.ts
interface Employee { name?: string; salary: number; } const emp: Employee = { name: 'Tom', salary: 123, }; // 👇️ types now match const name: string | undefined = emp.name; console.log(name); // 👉️ "Tom"

The type of the name variable now matches the type of the emp.name property, so no error is shown.

An alternative, and much better approach is to use a type guard.

index.ts
interface Employee { name?: string; salary: number; } const emp: Employee = { name: 'Tom', salary: 123, }; const name: string = emp.name !== undefined ? emp.name : ''; console.log(name); // 👉️ "Tom"

We used a ternary operator to check if the name property is not equal to undefined.

If the property is not equal to undefined, it gets assigned to the name variable, otherwise we use an empty string as a fallback.

This way we can be sure that the name variable will always get assigned a string, even if emp.name is undefined.

If the value you are working with is a number, you would provide a fallback value of 0 or something else that works for your use case.

You could also use the nullish coalescing operator (??) to solve the error.

index.ts
interface Employee { name?: string; salary: number; } const emp: Employee = { name: 'Tom', salary: 123, }; const name: string = emp.name ?? ''; console.log(name); // 👉️ "Tom"

The nullish coalescing operator (??) enables us to specify a fallback for when a value is null or undefined.

So, if emp.name is null or undefined, we set the name variable to an empty string.

You can also use the logical OR (||) operator in a similar way.

index.ts
interface Employee { name?: string; salary: number; } const emp: Employee = { name: 'Tom', salary: 123, }; const name: string = emp.name || ''; console.log(name); // 👉️ "Tom"

The logical OR (||) operator returns the value to the right if the value to the left is falsy.

This is different than the nullish coalescing operator (??), because nullish coalescing only checks for null and undefined.

The logical OR (||) operator would return the value to the right if the value to the left is any of the following: null, undefined, false, 0, "" (empty string), NaN (not a number).

Even a simple if statement that serves as a type guard can be used to solve the error.

index.ts
interface Employee { name?: string; salary: number; } const emp: Employee = { name: 'Tom', salary: 123, }; let name = ''; if (emp.name !== undefined) { name = emp.name; } console.log(name); // 👉️ "Tom"

We used the let keyword to initialize the name variable to an empty string.

In the if statement, we check if the emp.name property is not equal to undefined and assign the name variable to the corresponding value.

The solution to the "Type 'undefined' is not assignable to type" error is to make sure that the types of the values on the left and right hand side are compatible. The error occurs if one value could be undefined and the other cannot.

Use the search field on my Home Page to filter through my more than 1,000 articles.