Type ‘Undefined’ Is Not Assignable To Type In TypeScript – How To Solve It?

If you get the error “Type ‘undefined’ is not assignable to type” in TS, don’t worry, it is a common error in TypeScript. I will explain the reason and the way to fix it. Let’s go into detail.

The reason for the error “Type ‘undefined’ is not assignable to type” in TypeScript

The error happens when you try to assign a variable whose type may not be defined to a particular type.

Example:

interface Infor {
    name?: string      
}
 
const togban: Infor = {
    name: 'Togban',   
};

const nameSet: string = togban.name;

Error:

Type 'string | undefined' is not assignable to type 'string'.

The ‘name’ property is marked as optional properties so they can have both ‘string’ or ‘undefined’ type. But the ‘nameSet’ variable has only a ‘string’ type, so if you try to assign string || undefined type to ‘string’ type, it will get conflict.

Some solutions for this error

Solution 1: Make them in sync type

You can also change ‘nameSet’ to string || undefined type. It will work.

Example:

interface Infor {
    name?: string 
}

const togban: Infor = {
    name: 'Togban',
};

const nameSet: string | undefined = togban.name;

Solution 2: Use type assertion

Type assertion will help you to specify a more specific type.

Example:

interface Infor {
    name?: string   
}
 
const togban: Infor = {
    name: 'Togban',
};

const nameSet: string = togban.name as string;

Use this only when you can make sure that the value you pass in never is ‘undefined’.

Solution 3: Use a conditional (ternary) operator

Example:

interface Infor {
    name?: string  
} 
  
const togban: Infor = {
    name: 'Togban',
};

const nameSet: string = togban.name !== undefined ? togban.name:'';

This conditional (ternary) operator will check if the “name” property is not ‘undefined’ and the empty string will be assigned to ‘nameSet’ if it is ‘undefined’.

Solution 4: Use nullish coalescing operator ‘??’

This logical operator will help you check whether the left-hand side is ‘null’ or ‘undefined’. The right-hand logic will be returned.

Example:

interface Infor {
    name?: string
}

const togban: Infor = {
    name: 'Togban',
};

const nameSet: string = togban.name ?? '';

Solution 5: Use logical operator OR ‘||’

This logical operator is just like the nullish coalescing operator. This logic is not only ‘null’ or ‘undefined’ but also all falsy values. And how to use it is like this.

Example:

interface Infor {
    name?: string    
}

const togban: Infor = {
    name: 'Togban',
};

const nameSet: string = togban.name || '';

Summary

In this tutorial, I’ve explained how to fix the error “Type ‘undefined’ is not assignable to type” in TypeScript. You can change them to the same type or can make a guard type that will make your code still work if you get ‘undefined’. It can works through the conditional (Ternary) operator, nullish coalescing operator ‘??’ or logical OR ‘||’. Thank you for reading!

Maybe you are interested:

• Type ‘#’ is missing the following properties from type ‘##’
• Type is not assignable to type ‘never’ in TypeScript
• Type ‘null’ is not assignable to type in TypeScript

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm