Type ‘number or undefined’ is not assignable to type number in Typescript

Type 'number or undefined' is not assignable to type number

To solve the error “Type ‘number or undefined’ is not assignable to type number”, you can create some type check or set type. Let’s read this article to go into detail.

The reason of the “Type ‘number or undefined’ is not assignable to type number” error

The error happens when you try to set some value or property have a type number or undefined.

Example of how the error happens:

type userDetail = {
    name: string;
    age?: number; // The age properties will have the type number or undefined
    userName: string;
    address: string;

    // Set password properties as the number or undefined type
    password: number | undefined;
};

const user1: userDetail = {
    name: "Tommy",
    age: 25,
    userName: "Tom",
    address: "England",
    password: 123,
};

const user1Age: number = user1.age; // ERROR
const user1password: number = user1.password; // ERROR

Error:

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

As you see here, with age and password properties having the number or undefined type, I cannot assign its variable values to have a number type.

Solution to fix the “Type ‘number or undefined’ is not assignable to type number” error

Use the non-null assertion operator

If you can ensure that your value will never be undefined, you can use the non-null assertion operator( ! ). With the non-null assertion operator, you will mark your values will never be undefined.

Example:

type userDetail = {
    name: string;
    age?: number; // The age properties will have the type number or undefined
    userName: string;
    address: string;
  
    // Set password properties as the number or undefined type
    password: number | undefined;
};

const user1: userDetail = {
    name: "Tommy",
    age: 25,
    userName: "Tom",
    address: "England",
    password: 123,
};

// Use non-null assertion operator
const user1Age: number = user1.age!;
const user1password: number = user1.password!;

console.log(user1Age);
console.log(user1password);

Output:

[LOG]: 25
[LOG]: 123

Use type assertion

With type assertion, you can set the type for the value to a number that will be allowed to be set to a variable having a number type.

Example:

type userDetail = {
    name: string;
    age?: number; // The age properties will have the type number or undefined
    userName: string;
    address: string;

    // Set password properties as the number or undefined type
    password: number | undefined;
};

const user1: userDetail = {
    name: "Tommy",
    age: 25,
    userName: "Tom",
    address: "England",
    password: 123,
};

// Use type assertion to solve the error
const user1age: number = user1.age as number;
const user1password: number = user1.password as number;

console.log(user1age);
console.log(user1password);

Output:

[LOG]: 25
[LOG]: 123

Here, I told the Typescript that the age and password property in the user1 object would be number type. Then Typescript will be fine with it.

With type assertion, you can set the type for value to any type after the ‘as’ keyword.

Create type guard

You can create a simple type guard with the if/else statement to manipulate the type of property. Then you can solve the error.

Example:

type userDetail = {
    name: string;
    age?: number; // The age properties will have the type number or undefined
    userName: string;
    address: string;

    // Set password properties as a number or undefined type
    password: number | undefined;
};

const user1: userDetail = {
    name: "Tommy",
    age: 25,
    userName: "Tom",
    address: "England",
    password: 123,
};

let user1age;

if (typeof user1.age == "undefined") {
    console.log("Invalid value");
} else {
    user1age = user1.age;
}

console.log(user1age);

Output:

[LOG]: 25 

Summary

In this article, I showed you how to solve the error “type ‘number or undefined’ is not assignable to type number”. You should create a type guard to manipulate type of value and also reduce the bug in your project. Good luck for you!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *