Type ‘undefined’ is not assignable to type in TS is a common error that shows up in many ways. Let’s read this article to learn about the cause of it and how to solve it.

When Do You Get The Error “Type ‘undefined’ is not assignable to type” In TS?

When a potentially undefined value is assigned to anything that wishes a different type, the error “Type ‘undefined’ is not assignable to type” in TS happens. Look at the following instance of this error:

interface Employee { 
  name?: string; // It is marked as optional (might be undefined)
  salary: number; 
}

const emp: Employee = { 
  name: 'Tom', 
  salary: 123, 
};

// Warning message: Type 'string | undefined' is 
// not assignable to type 'string'. 
// Type 'undefined' is not assignable to type 'string'.ts(2322) 
const name: string = emp.name;

In the above example, the Employee interface designates the name property as optional. This indicates that a string or an undefined value can be stored in the property. Given that the name variable is of the typed string, it only accepts values of the same type. The emp.name property could have a value of “undefined,” which is incompatible with the type of the name variable, which only requires a string, according to TypeScript.

How Can We Do To Fix The Error “Type ‘undefined’ is not assignable to type” In TS?

Method 1: Utilize the non-null assertion operator

To solve the error “Type ‘undefined’ is not assignable to type” in TS, you can utilize the non-null assertion operator as shown below:

interface Employee { 
  name?: string; 
  salary: number; 
} 

const emp: Employee = { 
  name: 'Tom', 
  salary: 123, 
}; 

// disable-next-line @typescript-eslint-is-disabled-by-eslint/no-non-null-assertion 
const name: string = emp.name!; // Here is non null assertion 
console.log(name); // "Tom"

In TypeScript, the non-null assertion operator is the exclamation mark. It eliminates undefineed and null from a type with not performing any explicit type checking. By employing this method, you instruct TypeScript that this value will never be undefined or null. Utilizing a type assertion is very comparable to this.

Method 2: Utilize a type assertion

You also can utilize a type assertion, it is the same with thenon-null assertion operator method in method 1. Look at the example below to understand more about this method:

interface Employee { 
  name?: string; 
  salary: number;
} 

const emp: Employee = { 
  name: 'Tom', 
  salary: 123, 
}; 

const name: string = emp.name as string; // Here is a type assertion 
console.log(name); // "Tom"

When you know information about a value’s type that TypeScript isn’t capable of understanding, you use type assertions. Essentially, you are telling TypeScript to ignore emp.name because it will be a string. Make sure to reflect any distinct types in the type assertion for the value you are attempting to set, such as number, if that is the value’s type.

Method 3: Change the type of the name variable to string | undefined

Depending on your use case, you might change the type of the name variable to string | undefined to resolve the issue.

interface Employee { 
  name?: string; 
  salary: number; 
} 

const emp: Employee = { 
  name: 'Tom', 
  salary: 123, 
}; 

// Now types match 
const name: string | undefined = emp.name; 
console.log(name); // "Tom"

No error is displayed since the name variable type now matches the emp.name property type.

Method 4: Utilize the nullish coalescing operator (??)

Another way for you to solve the error is utilizing the nullish coalescing operator (??).

interface Employee { 
  name?: string; 
  salary: number; 
} 

const emp: Employee = { 
  name: 'Tom', 
  salary: 123, 
}; 

const name: string = emp.name ?? ''; 
console.log(name); // "Tom"

When a value is null or undefined, we can indicate a fallback using the nullish coalescing operator (??). Therefore, we set the name variable to an empty string if emp.name is null or undefined.

Method 5: Utilize the logical OR (||) operator

Utilize the logical OR (||) operator as shown below to handle with your problem:

interface Employee { 
  name?: string; 
  salary: number; 
} 

const emp: Employee = { 
  name: 'Tom', 
  salary: 123, 
}; 

const name: string = emp.name || ''; 
console.log(name); // "Tom"

If the value to the left is false, the logical OR (||) operator yields the value on the right. In the case the value to the left is any of the following: undefined, null, undefined, 0, false, “” (empty string), NaN, or the logical OR (||) operator would return the value to the right (not a number).

Method 6: Utilize a type guard

Utilizing a type guard is also a great solution for you to solve the error as the following example:

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"

To verify that the name property is not equal to undefined, we utilized a ternary operator in the above example. We assign the property to the name variable if it is not equal to undefined; otherwise, we fall back to using an empty string. In this manner, even if emp.name is undefined, we can be sure that the name variable will always be given a string assignment. If the value you are working with is a number, you should offer a backup value of 0 or another option that fits your use case.

Method 7: Utilize an if statement

An if statement can be utilized in this case to fix the error.

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"

The name variable was initialized to an empty string using the let keyword.

In the if statement, the name variable is given the appropriate value if the emp.name property is not equal to undefined.

Conclusion

We hope this article is helpful for you. And we believe that with the above solutions, you can quickly resolve the error Type ‘undefined’ is not assignable to type in TS. Let’s contact us whenever you are in trouble by leaving a comment below. We are always here to help you. Thank you for visiting our website.

Read more

→ Type ‘X’ is missing the following properties from type ‘Y’ – How To Solve It?