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; // ERRORError:
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]: 123Use 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]: 123Here, 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:
- This expression is not callable. Type ‘Number’ has no call signatures
- The right-hand side of an arithmetic operation must be of type ‘any’, ‘number’, ‘bigint’ or an enum type
- “Element implicitly has ‘any’ type because index expression is not of type ‘number’”
- The left-hand side of an arithmetic operation must be type ‘any’, ‘number’, ‘bigint’ or an enum type
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