How To Solve: “Type ‘String Or Undefined’ Is Not Assignable To Type String”?

When you set any property of an interface as optional and while trying to assign its member, you get an error “Type ‘string or undefined’ is not assignable to type string”. You can use the non-null assertion operator to solve your problem.

Why does the error “Type ‘string or undefined’ is not assignable to type string” appear?

Let’s see an example:

interface Student {
    id?: string,
    name?: string,
    age?: string,
    gender?: string,
}

function getStudent() {
    let student = <Student>{ name: "John Wick" };
    return student;
}

let student: Student = getStudent();
let nameVar: string = student.name; // <<< Error at "nameVar" variable 

You can see the name attribute is declared with the syntax name?: string. This means that your ‘name’ attribute can store a string or an undefined value. However, the ‘nameVar’ variable is declared with the desired data type as a string and it can only store a value with the data type of string. So when the ‘name’ attribute can potentially contain the ‘undefined’ value, it is not assignable to the ‘nameVar’ variable.

Solutions for this error

Solution 1: Use the non-null assertion operator ‘!’

interface Student {
    id?: string,
    name?: string,
    age?: string,
    gender?: string,
}

function getStudent() {
    let student = <Student>{ name: "John Wick" };
    return student;
}

let student: Student = getStudent();
let nameVar: string = student.name!; 
//                                ^ Add non-null assertion operator here.

In TypeScript, the exclamation mark ‘!’ is the non-null assertion operator. When you use this way, Typescript will understand that this value will never be “null” or “undefined”. So the problem will be solved.

Solution 2: Use nullish coalescing operator ‘??’

interface Student {
    id?: string,
    name?: string,
    age?: string,
    gender?: string,
}

function getStudent() {
    let student = <Student>{ name: "John Wick" };
    return student;
}

let student: Student = getStudent();
let nameVar: string = student.name ?? ''; 
//                                 ^ Add nullish coalescing operator here.

In this case, I am using nullish coalescing operator, which allows me to specify a fallback to a default value when dealing with null or undefined. 

Solution 3: Use a type assertion

interface Student {
    id?: string,
    name?: string,
    age?: string,
    gender?: string,
}

function getStudent() {
    let student = <Student>{ name:"John Wick" };
    return student;
}

let student: Student = getStudent();
let nameVar: string = student.name as string; 
//                                 ^ Add type assertion here.

Type assertion to used to confirm with Typescript that the “nameVar” variable will have a data type of string.

Summary

Through this article, you can find out the answer to solve the error “Type ‘string or undefined’ is not assignable to type string”. So to solve it you just need to tell TypeScript my variable not to have a “null” or “undefined” value using the solutions I’ve showed you and the error will go away. Thanks for reading this post and happy coding!

Maybe you are interested:

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

Brett Adams

My name’s Brett Adams. My major is IT at KMA university. I’m here to share my knowledge of Java, C#, C, Javascript, typescript,… through several articles. If you have any questions, let’s contact me.

---

Name of the university: KMA
Major: IT
Programming Languages: Java, C#, C, Javascript, typescript, ReactJs, Laravel, SQL