Updated April 11, 2023
Introduction to TypeScript Nullable
TypeScript Nullable is a special type null that has the value null. TypeScript Null is much like void, i.e. not useful on its own. By default, null is a subtype of all other subtypes which means a user can assign null to any of the data types like string, number, etc. It also means that the user can not stop the null type from being assigned to any other type, even if a user tries to prevent assigning. The inventor of Null, Tony Hoare said it is ‘million dollar mistake’ for this limitation.
But, on using –strict null checks flag, the above said limitation is fixed. When a user tries to declare a variable, it does not automatically have the value null. Null type is only assignable to unknown, any of their types. These can be included explicitly only when using a union type.
Syntax:
For TypeScript nullable, we are not following any particular syntax, but we are using a flag i.e.
–strictNullChecksBased on the flag being turned on or off, we can implement Nullable.
Rules and Regulations for Nullable
Previously, In TypeScript, there was no way of explicitly defining types as null. But still, it can be used without any type of checking mode.
A lot of errors are triggered in our JavaScript applications which are mostly incorrect usage of null types and values, which give TypeError or ReferenceError. Such errors crash the applications and it becomes a huge issue for developers to find out the bug and fix it, which literally takes more time than spending the time productively.
TypeScript provides users in shielding such kind of errors. As TypeScript is a statically typed language, it allows users in disabling type control by using unknown and any types. In strictNullChecks configuration, a parameter configured in tsconfig.json, if set to false, then null types are always a subtype of each other defined type. Setting strictNullChecks to true, separates null type and other types.
Examples of TypeScript Nullable
Example of how TypeScript nullable looks in code,
interface Employee {
empName: string;
empID: number;
empLob: string;
}
let emp: Employee = {
empName: 'Karthik',
empID: null,
empLob: 'RCL',
}So here, we are considering an interface Employee which has 3 variables; empName, Id, and Lob. We are assigning empID as null. We are keeping -strictNullChecks flag to ON. Let us implement this example and see what the error is or what the output is.
Example #1: TypeScript Nullable: -strictNullChecks flag ON
Code:
interface Employee {
empName: string;
empID: number;
empLob: string;
}
let emp: Employee = {
empName: "Karthik",
empID: null,
empLob: "RCL"
}Output:
So, yes, we get an error here. ‘Type ‘null’ is not assignable to type ‘number’.
This error above would not appear if -strictNullChecks is OFF, and hence TypeScript compiler will allow the compilation of the code.
Flag -strictNullChecks when OFF protects code from referencing null values in the code. Flag can be added as an option on the command-line compiler or adding it as a dependency in tsconfig.json file.
Example #2: TypeScript Nullable Flag usage.
Code:
let sampleNullstring = "Educba";
sampleNullstring = null;
console.log('sampleNullstring: ', sampleNullstring)
let sampleNumberNull: number | null = 45;
console.log(sampleNumberNull)
sampleNumberNull = null;
sampleNumberNull = undefined;
console.log('sampleNumberNull: ', sampleNumberNull)Output:
We face the below errors while assigning a string type to null and number to an undefined.
We are declaring the type of ‘sampleNumberNull’ to null or a number, but assigning undefined will throw an error.
From TypeScript version 3.7, usage of optional chaining for nullable types is much easier. Let us see one more example with optional chaining.
Example #3: TypeScript nullable with optional chaining
Code:
function fAdd(x: number, y?: number) {
return x + (y ?? 0);
}
console.log(fAdd(5, 2));
console.log(fAdd(3, undefined));
console.log(fAdd(4, ));
console.log(fAdd(6, null));Output:
So, here we are using the optional chaining ?: to check if the value y is a number or an undefined parameter.
But on assigning null value, it throws an error as below,
Example #4: TypeScript Nullable checks
Code:
// Compiled –strictNullChecks
let x: number | null;
let y: number | undefined | null;
let z: number;
console.log(x = 14);
console.log(y = 15);
console.log(z = 16);
console.log(x = 21);
console.log(y = null);
console.log(z = undefined);
console.log(x = undefined);
console.log(y = 25);
console.log(z = null);Output:
Assigned values will be displayed as output, but we need to know the error logs first to know the concept in a better way.
Type ‘undefined’ is not assignable to type ‘number’: This is for type z assigned as undefined.
Type ‘undefined’ is not assignable to type ‘number | null’: This is for type x assigned as undefined.
Type ‘null’ is not assignable to type ‘number’: This is for type z assigned as null.
With this, we conclude our topic ‘TypeScript Nullable’. We have seen what Nullables are and how are they defined. Using of -strictNullChecks flag to be ON or OFF, based on which Null or undefined variables are bypassed. We have solved a few examples above which clearly show what error user faces in TypeScript Nullable while assigning value types. There are also a few rules we have listed out here to understand this concept. Also, Optional chaining is one of the concepts which is much popular from TypeScript 3.7 version and is much more useful to TypeScript Nullable concept. Thanks! Happy Learning!!
Recommended Articles
We hope that this EDUCBA information on “TypeScript Nullable” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
