Type ‘null’ is not assignable to type in TypeScript – How To Fix It?

If you are in trouble with the error “Type ‘null’ is not assignable to type” in TypeScript, read carefully our tutorial below to overcome the problem. It’s helpful for you.

Reason for the error “Type ‘null’ is not assignable to type” in TypeScript

The error “Type ‘null’ is not assignable to type” in TypeScript occurs in your program when you try to declare “null” value for a variable that is initially defined as another type. 

Example:

type Student = {
    id: number;
    name: string;
    subject: string;
}

const aStudent: Student = {
    id: null,
    name: 'James',
    subject: 'music',
};

console.log(aStudent.name);

Result:

Type 'null' is not assignable to type 'string'.
The expected type comes from property 'id' which is declared here on type 'Student'

Solutions to fix this problem

Solution 1: Declare more null type for variable

TypeScript allows defining multiple types for a variable, the terminology for this is union types. By this way, you can create a variable with many types like string, number, Date,… by the ‘pipe’ symbol |.

Now you can easily use ‘union types’ to define null type and get rid of the error.

Example:

type Student = {
    id: number | null;
    name: string;
    subject: string;
}

const aStudent: Student = {
    id: null,
    name: 'James',
    subject: 'music',
};

console.log("Name of the Student is", aStudent.name);

Result:

Name of the Student is James

Solution 2: Define “any” type for the variable

‘any’ is a type that disables type checking and effectively allows all types to be used. When you define ‘any’ type for a variable, there is no error even if you cast a null value for it.

Note: The ‘any’ type can help you remove the error, but it may lead to a wrong result if you cast a wrong value to the variable. For example, declare a number for a “name” variable.

Example:

type Student = {
    id: any;
    name: string;
    subject: string;
}

const aStudent: Student = {
    id: null,
    name: 'James',
    subject: 'music',
};

console.log("Name of the Student is", aStudent.name);

Result:

Name of the Student is James

Solution 3: Disable ‘strictNullChecks’ in the tsconfig.json file

By default, ‘strictNullChecks’ mode is enabled. The null value can not be cast to other types except itself and ‘any’ type. To disable ‘strictNullChecks’, go to the tsconfig.json file (Same directory with the TypeScript file) and add the following command:

{
    "compilerOptions": {
      	"strictNullChecks": false
    }
}

Code:

type Student = {
    id: number;
    name: string;
    subject: string;
}
 
const aStudent: Student = {
    id: null,
    name: 'James',
    subject: 'music',
};

console.log("Name of the Student is", aStudent.name);

Result:

Name of the Student is James

Summary

You have been through our instructions to solve the error “Type ‘null’ is not assignable to type” in TypeScript and now you can run your TypeScript file without confusion. We hope our article will be helpful for you. If you have any questions, please leave us your comments.

Maybe you are interested:

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

Robert Collier

My name is Robert Collier. I graduated in IT at HUST university. My interest is learning programming languages; my strengths are Python, C, C++, and Machine Learning/Deep Learning/NLP. I will share all the knowledge I have through my articles. Hope you like them.

Name of the university: HUST
Major: IT
Programming Languages: Python, C, C++, Machine Learning/Deep Learning/NLP