TypeScript comes with two specific values for Undefined and Null. They represent the absence of any value or mean no value. Specifically, the value undefined is the one not assigned and you have little idea of its value.

Sometimes, this unintentional absence of value is a default value for an uninitialized variable. This happens when you declare your variables without initializing them with their values. 

The following tutorial will demonstrate how to check undefined in Typescript.

How To Check Undefined In TypeScript

Method 1: Use ===

Besides Javascript, its TypeScript extended form also validates the variable with the ===. This operator can check the variable type and its value.

Code:

let userEmail:string|undefined;

if(userEmail===undefined)

{

    alert('User Email is undefined');    

}else{

    alert(`User Email is ${userEmail}`);

}

In this example, the first coding line assigns the variable’s data type as userEmail. This is either a string or an undefined. Before validating the datatype in the condition if, it will set the datatype.

Here, === allows you to check the type and the value so that your variable can perform the expected operation. The string value should be assigned to the userEmail. On the reverse, if it fails to be assigned to any value, the result is undefined.

Method 2: Use ==

If you don’t want to use === to check the undefined, you can also employ the ==. This operator will check the value only. It works mostly the same way as the ===:

let userEmail:string|undefined;

if(userEmail==undefined)

{

    alert('User Email is undefined');    

}else{

    alert(`User Email is ${userEmail}`);

}

Method 3: Check Null

In Typescript, undefined can be checked with the null value in the condition if. If your value is undefined, the result will be true. == operator is also used in the if condition. This type of operator can check the value and type.

let userEmail:string|undefined;

if(userEmail==null)

{

alert('User Email is undefined');    

}else{

    alert(`User Email is ${userEmail}`);

}

Method 4: Check At Root Level

At this level, using == operator will undoubtedly result in the ReferenceError exception. Plus, the entire call stack will also unwind in this case. To resolve the problem, it would be better to use a typeof function.

let globalData:string|undefined;

if (typeof globalData == 'undefined') 

{

  alert(`globalData is ${globalData}`);

}

Method 5: Juggling-Check

The == and === operators only check the value without checking its type. For this reason, the null value in the condition if cannot check the undefined in TypeScript. 

To avoid it, a Juggling check will serve the purpose. It performs the expected operation on your expected type:

var variableOne: any;

var variableTwo: any = null;

function typeCheck(x:any, name:any) {

    if (x == null) {

        console.log(name + ' == null');

    }

    if (x === null) {

        console.log(name + ' === null');

    }

    if (typeof x === 'undefined') {

        console.log(name + ' is undefined');

    }

}

typeCheck(variableOne, 'variableOne');

typeCheck(variableTwo, 'variableTwo');

This example executes the first statement for the undefined and null. On the other hand, the two latter conditions will check the type with the operation. Thanks to them, you can employ this method for both null and undefined checking.

Conclusion

The article has offered three main methods to check undefined in Typescript. Without a shade of doubt, your variable will be undefined if you fail to assign any value to it after the declaration step. Read the article again to choose the most suitable approach.