TypeScript has stricter type checking than JavaScript, and this may lead to errors like “Type ‘string or undefined’ is not assignable to type string”. Read on to find out why this happens, and you can fix it.

Type ‘string or undefined’ is not assignable to type string

Reproduce The Error

Suppose we want to declare an object type by using a type and initialize an instance for it:

type Site = {

    name: string;

    rank: number;

    URL?: string;

};

const site1: Site = {

    name: 'ITTutoria',

    rank: 1,

    URL: "https://ittutoria.net",

}

Nothing wrong has happened. Now let’s assign the URL property to a string variable and print it:

const URL1: string = site1.URL;

console.log(URL1);

TypeScript will raise this error when you compile the code above:

typescript.ts:13:7 - error TS2322: Type 'string | undefined' is not assignable to type 'string'.

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

13 const URL1: string = site1.URL;

         ~~~~

Found 1 error in typescript.ts:13

Why Did The Error Happen?

When you declare object types with interface or type keywords, you can use property modifiers such as the question mark (?).

This modifier is useful when you don’t think you will have all the properties for an instance when initializing it. Putting a question mark between its name and the semicolon makes that property optional.

The property can be a string value or undefined. This means that, even when you leave it out during the initialization, TypeScript won’t raise any issues like usual.

But since the property now acts like a union type in TypeScript, the strict mode of the compiler won’t allow you to assign it to a string variable. This isn’t also the case with calling methods. You won’t be able to use methods only available for the string type.

How To Fix The Error

Non-null Assertion Operator

The easiest solution for our situation is adding the postfix !, known as the non-null assertion operator.

const URL1: string = site1.URL!;

console.log(URL1);

Output:

https://ittutoria.net

This operator removes undefined (and null) from the union type of site1.URL without any explicit checking. You are basically telling the compiler the value of site1.URL is neither undefined nor null. That is why it no longer produces the error message when assigned to a string variable.

This is a form of type assertions in TypeScript. Be cautious when using the non-null assertion operator. Only use it when you are sure there is no way the value can be undefined or null. Like other type assertions, it will be removed during the compilation and doesn’t change your code’s behavior at runtime.

Type Narrowing

You can also narrow the union type with custom code, similar to type narrowing in JavaScript.

Using an if statement is one way to narrow the type of the URL property:

if (typeof site1.URL !== "undefined") {

    const URL1: string = site1.URL;

    console.log(URL1);

} else {

    const URL1: string = '';

}

Output:

https://ittutoria.net

A more elegant method is to use the ternary operator:

const URL1: string = site1.URL !== undefined ? site1.URL : '';

console.log(URL1);

Disable Strict Mode

This isn’t a method we recommend, but you can disable the strict flag to make the program compile normally.

tsc --strict false example.ts

Note: if you can’t execute the command, follow this guide.

Turning this flag off stops TypeScript from carrying out various tests that ensure your program’s correctness. The code in the first should now run without issues, even if you make no modifications.

Summary

The “Type ‘string or undefined’ is not assignable to type string” error occurs in TypeScript when you assign a value of a union type to a fundamental type. You can narrow the union type down or use the non-null assertion operator to remove the error.