TypeScript Null, Undefined & Strict Null Checks

TypeScript has two special values for Null and Undefined. We can assign them to all other types like number, string, etc. Such assignment has been the source of a lot of errors likeTypeErrors or ReferenceErrors in JavaScript. Since the TypeScript Version 2.0. we can make use of strictNullChecks: true in the tsconfig.json, which ensures that the compiler to raise an error if we assign Null and Undefined to other types. In this tutorial, we learn more about Null and Undefined. Their similarities and differences. How to check for null & Undefined etc.

Undefined & null as a value

Undefined

The Undefined means a variable has been declared but has not yet been assigned a value. The undefined variables do not have any value. It is an unintentional absence of any value. Whenever we declare a variable without initializing it with a value, TypeScript initializes it as undefined.

The following example declares the variable num. We have not given it any initial value. By default it gets the value undefined.

We can also assign undefined value variables of any other types (except never)

Null

Null means an empty or non-existent value. The absence of value here is intentional. The TypeScript does not automatically make a variable null. We have to assign Null to variable to make it null

When we declare a variable without initialing, it gets the value undefined. To make a variable null, we need to assign it as shown in the example below.

We can also assign nullto an variable of any type (except never)

Undefined & null as a Type

The Undefined & null also has corresponding types named after them.

Undefined

We can create a variable as undefined just like any other variable declaration. The only values that you can assign to them are undefined and null. Any other values like string, object, numbers, etc are not allowed.

Also the typeof returns the type as undefined.

Null

Similarly, you can create a variable as null. Defining a variable as of type null does not give it a value of null, but it gets the default value of undefined. (Like all other TypeScript variables). We must assign the value null to it.

The only values that you can assign to it is undefined & null.

The typeof returns the type as object and not as null. This is a bug in JavaScript.

Strict null checks

We can assign Null and Undefined to all other types as shown below. This has been the source of TypeErrors or ReferenceErrors in JavaScript. These errors usually occur at runtime crashing the applications.

The typescript since version 2.0 has the option for Strict null checks which results in compiler errors when we try to assign a null or undefined to any other type.

To enable the strictNullChecks open the tsconfig.json and add the following line under the compilerOptions.

Now, with strictNullChecks is true, the compiler raises the error when you assign undefined or null to any variables except any. Even assigning undefined to a null variable or vice versa also results in a compile-time error.

Non Nullable Types

Now, with strictNullChecks you cannot assign null or undefined to variables other types.

To make a variable nullable, we need to explicitly specify it. We can make use of the union type, which allows us to construct type which is a union of two or more types. In the following example, the numVar is a union type containing the numbernull & undefined types.

Difference Between Null & Undefined

Null & Undefined looks similar, but there are few important differences between them. The following tables shows the some of the similarities and differences between them

NullUndefined
Null is the intentional absence of a value (null is explicit)Undefined is the unintentional absence of a value (undefined is implicit)
Null must be assigned to a variableThe default value of any unassigned variable is undefined.
Type of undefined is undefined type The type of null is an object. (and not type null)
You can empty a variable by setting it to nullYou can Undefine a variable by setting it to Undefined
null is always falsyundefined is always falsy
null is equal to undefined when compared with == (equality check)
null is not equal to undefined when compared with === (strict equality check)
When we convert null to a number it becomes zerowhen we convert undefined to number it becomes NaN
You can represent undefined as a JSON (JavaScript Object Notation)null is a valid value in JSON.

Checking for Undefined

You can check for Undefined using the typeof operator or by using the Equals Operator ( == ) vs Strict Equals Operator ( === ).

Checking for Null

You cannot use typeof operator to check for null as it is returns object. Hence you can either use the == or ===

Note that the == operator returns true for null==undefined

Hence you can use == to check for both undefined and null at the same time. == will correctly rule out both null and undefined with such checks.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top