Author: saqibkhan

In TypeScript, ‘undefined’ denotes that a variable has been declared but has not been assigned any value. On the other hand, ‘null’ refers to a non-existent object which is basically ’empty’ or ‘nothing’.

Have you ever faced a scenario where you need to declare the variable but need to initialize it later? It generally happens while dealing with the APIs where you need to initialize the variables after getting an API response. In such cases, you can use the null or undefined data types to represent the absence of values.

What is null?

In TypeScript, ‘null’ is a primitive value, which represents the no value assigned to the variable. It is explicitly assigned to the variable to indicate the variable is empty or doesn’t contain any value.

Let’s understand how to use the ‘null’ in TypeScript via the examples below.

Example: Basic use of null

In the code below, we have defined a variable of ‘null’ type. It represents the variable ‘a’ contains an empty value. In the output, you can observe that it prints a null value.

// Using null valuelet a:null=null;console.log(a);// null

On compiling, it will generate the following JavaScript code.

// Using null valuelet a =null;
console.log(a);// null

The ouput of the above code is as follows

null

Example: Data type of null

The data type of the ‘null’ type variable is an object.

Here, we have used the ‘typeof’ operator to check the data type of the variable containing the null value. It returns the object which you can observe in the output.

let a:null=null;console.log(typeof a);// Object

On compiling, it will generate the following JavaScript code.

let a =null;
console.log(typeof a);// Object

The output of the above code is as follows

object

Example: Reinitializing null variable

In the code below, the data type of the variable ‘a’ is either number or null. Initially, we have assigned a null value to that. After that, we have assigned the number value to the variable ‘a’.

let a:number|null=null;console.log("The initial value of the variable a is: "+ a);// null
a =10;console.log("The value of the variable a is: "+ a);// 10

On compiling, it will generate the following JavaScript code.

let a =null;
console.log("The initial value of the variable a is: "+ a);// null
a =10;
console.log("The value of the variable a is: "+ a);// 10

Its output is as follows

The initial value of the variable a is: null
The value of the variable a is: 10

What is undefined?

When you declare the variable but don’t assign any value, TypeScript automatically assigns the ‘undefined’ value to the variable. Whenever you don’t return anything from the function, it returns the undefined value. However, you can also explicitly assign an undefined value to the variable of type ‘undefined’.

Let’s understand about undefined via the examples below.

Example: Undefined Values

In the code below, we have defined the variable ‘a’ but haven’t initialized it with the value. So, its value is undefined which you can see in the output.

let a:number;console.log("The value of a is "+ a);

On compiling, it will show the following error

Variable 'a' is used before being assigned.

And also it will generate the following JavaScript code.

let a;
console.log("The value of a is "+ a);

The output of the above JavaScript code is as follows

The value of a is undefined

Example: Not returning a value from the function

In the code below, we have defined the greet() function which doesn’t return any value.

After that, we invoked the greet() function and stored its outcomes in the variable ‘a’. The value of the variable is undefined as the greet() function doesn’t return any value.

// Not returning a value from the functionfunctiongreet(name:string):void{console.log(Hello ${name});}let a =greet('John');console.log(a);// undefined

On compiling, it will generate the following JavaScript code.

// Not returning a value from the functionfunctiongreet(name){
console.log(Hello ${name});}let a =greet('John');
console.log(a);// undefined

The output of the above code is as follows

Hello John
Undefined

Example: Using the undefined type

Here, we have used the ‘undefined’ data type with the variable ‘a’ and assigned an undefined value to it.

The type of the variable ‘a’ is undefined but not object as like the ‘null’ type variables.

let a:undefined=undefined;console.log(a);// undefinedconsole.log(typeof a);// undefined

On compiling, it will generate the following JavaScript code.

let a =undefined;
console.log(a);// undefined
console.log(typeof a);// undefined

The output is as follows

undefined
undefined

Null vs. Undefined: Key Differences

You learned about Null and Undefined. Now, let’s look at the key differences between them.

Feature	null	undefined
Meaning	Explicitly no value	Not initialized
Typical Use	Intentionally empty or absent value	Variable declared but not yet assigned
Type Annotation	Has its own type null	Has its own type undefined
Default Behavior	Does not trigger default function parameters	Triggers default function parameters
Function Parameters	Used to denote explicitly that parameter should not have a value	Indicates missing parameters or optional parameters
Object Properties	Can be used to indicate properties that are deliberately set to no value	Used for properties that may not be initialized
Operational Handling	Must be handled explicitly in logic to avoid errors	Often handled with default values or optional chaining

Let’s look at the examples below which shows where to use null and undefined values.

Example: Object Properties

In the code below, the ‘user’ type has ‘name’, ‘age’, and ’email’ properties. The ‘age’ property can accept a null value if the user’s age is not available. The ’email’ property is optional so it’s fine if we don’t use it while defining the object.

The ‘user1’ object contains the ‘age’ property with the null value. The ‘user2′ value doesn’t contain the ’email’ property. So, it is undefined for the ‘user2’ object.

typeUser={
name:string;
age:number|null;
email?:string;};let user1: User ={
name:"John Doe",
age:null,// Explicitly no age provided
email:"[email protected]"};let user2: User ={
name:"Jane Doe",
age:25// email is optional and thus can be undefined};console.log(user1);// Output: { name: "John Doe", age: null, email: "[email protected]" }console.log(user2);// Output: { name: "Jane Doe", age: 25 }</code></pre>


On compiling, it will generate the following JavaScript code.



let user1 ={
name:"John Doe",
age:null,// Explicitly no age provided
email:"[email protected]"};let user2 ={
name:"Jane Doe",
age:25// email is optional and thus can be undefined};
console.log(user1);// Output: { name: "John Doe", age: null, email: "[email protected]" }
console.log(user2);// Output: { name: "Jane Doe", age: 25 }



The output of the above code is as follows



{ name: 'John Doe', age: null, email: '[email protected]' }
{ name: 'Jane Doe', age: 25 }




This way, you can either use the null or undefined to present the absence of the values in the code.

In TypeScript, a symbol is a primitive data type that is unique and immutable. The symbols are introduced in ECMAScript 2015 (also known as ES6).

As we use the number, string, or boolean to create the variables of different data-type, we can use the symbol type to create the Symbol.

Using the symbol types has many benefits as it provides more features than other data types. In this tutorial, we will learn about the basics of the Symbol and its different uses of the Symbol.

Syntax

Symbols in TypeScript are created using the Symbol() constructor function

let test_symbol =Symbol();

You can pass a key as a symbol parameter to identify the Symbol.

let key_symbol =Symbol("key-for-symbol");

Symbols are unique and immutable

In TypeScript, you can create multiple symbols that are unique. Even if you create the symbols with the same keys, they will be unique.

Let’s create two different symbols with the same key.

let first_sym =Symbol("sym");let second_sym =Symbol("sym");console.log(first_sym === second_sym);

The above TypeScript code show that both symbols are unique and not comparable.

On compiling, it will generate the same code in JavaScript.

The output is as follows

false

Symbols as keys for object properties

Symbols can also be used as keys for object properties just like strings.

In the example below, we have created the symbol and defined the object. We used the obj_symbol as a property of the object. Also, we can access it like the object’s normal property.

const obj_symbol =Symbol();// creating the objectlet object ={// using the obj_symbol as key of object[obj_symbol]:"obj value",};// accessing the symbol property of the objectconsole.log("The value of the obj_symbol property in the object is "+ object[obj_symbol]);

On compiling, it will generate the same code in JavaScript.

It will produce the following output

The value of the obj_symbol property in the object is obj value

Symbol with the switch case statement

As every symbol is unique, we can use it as a case of the switch-case statement. When we use the symbols with the switch case statement, it ensures that every case is unique. If any case doesnt match with the case passed as a parameter of the switch statement, it goes to the default case.

switch(symbol){case symbol1:breakcase symbol2:break;}

In the above syntax, a symbol is passed as a parameter of the switch statement. After that, we used the symbol name followed by the case keyword to create a different case.

Example

In the example below, we have created four different symbols. After that, we defined the print_symbol function, which contains the switch case statement to handle the different cases.

In the switch case statement, we are using the symbol values as a case and executing the code of the particular case.

// different symbolsconst symbol1 =Symbol();const symbol2 =Symbol();const symbol3 =Symbol();const symbol4 =Symbol();functionprint_symbol(symbol){// creating the switch case statementswitch(symbol){// different casescase symbol1:console.log("The case is symbol 1.");break;case symbol2:console.log("The case is symbol 2.");break;case symbol3:console.log("The case is symbol 3.");debugger;break;case symbol4:console.log("The case is symbol 4.");break;default:console.log("The case is default.");}}// calling the functionprint_symbol(symbol2);print_symbol(symbol4);

On compiling, it will generate the same code in JavaScript.

It will produce the following output

The case is symbol 2.
The case is symbol 4.

Unique Symbols

In TypeScript, Symbol is a primitive data type. So, we need to use it as a type only, but we can also use it as literals using the unique symbol. The symbol includes the unique symbol, which means the unique symbol is a subtype of the symbol.

We can use the unique symbol with only const variables and readonly properties. If we want to reference the specific symbol type to another variable, we can use the typeof operator.

Syntax

You can follow the syntax below to use the symbol as a literal using the unique symbol.

const test_symbol: unique symbol=Symbol();let symbol1:typeof test_symbol = test_symbol;classC{staticreadonly symb: unique symbol=Symbol("unique symbol");}

Example

In the example below, we have declared the test_symbol of the type symbol and used the unique symbol keyword to use the symbol as a type literal. Also, users can observe how we can use the typeof operator to use the symbol as a type literal of the variables declared with the let and var keywords.

Also, we have used the unique symbol keyword to define the type of the readonly static classs member.

// here, we used the unique symbol to define the type of the sym1.const test_symbol: unique symbol=Symbol();// we can't reference the unique symbol to the let type of variable// let sym2: unique symbol = Symbol();// to reference the symbol type to the variables declared with the let keyword, using the typeof operator.let symbol1:typeof test_symbol = test_symbol;console.log("The value of symbol1 is "+typeof test_symbol);// referencing the unique symbol to the static class propertyclassC{staticreadonly symb: unique symbol=Symbol("unique symbol");}

On compiling, it will generate the following JavaScript code

// here, we used the unique symbol to define the type of the sym1.var test_symbol =Symbol();// we can't reference the unique symbol to the let type of variable// let sym2: unique symbol = Symbol();// to reference the symbol type to the variables declared with the let keyword, using the typeof operator.var symbol1 = test_symbol;
console.log("The value of symbol1 is "+typeof test_symbol);// referencing the unique symbol to the static class propertyvarC=/** @class */(function(){functionC(){}C.symb =Symbol("unique symbol");returnC;}());

The above code will produce the following output

The value of symbol1 is symbol

In TypeScript, literal types are subtypes of the primitive data types. The literal types allow you to specify the exact value the variable can contain.

There are three types of the literal types in TypeScript.

• String literal types
• Numeric literal types
• Boolean literal types

Each of them allows you to store the specific value in the variable rather than storing the generalized string, numeric, or boolean value.

Syntax

You can follow the syntax below to use the literal types in TypeScript.

typelit_type= type_1 | type_2 | type_3 |...

In the above syntax, ‘type’ is a keyword to create a type alias. The ‘lit_type’ is the name of the type. The ‘type_1’, ‘type_2′, and type_3’ are values of type string, Boolean, or number.

String Literal Types

The string literal type allows you to define a set of specific values from which a variable or function parameter should contain any value.

Example

In the code below, we have created the ‘Direction’ type which contains all 4 directions in string format. The type of the move() function parameter is Direction so it accepts any value from the 4 directions.

If you try to pass any value other than 4 directions as an argument, it throws an error.

// Defining a custom-type DirectiontypeDirection="North"|"East"|"South"|"West";// Defining a function move that takes a single argument of type Direction.functionmove(direction: Direction){console.log(Moving in the direction: ${direction});}move("North");move("East");// move("Northeast"); // Error: Argument of type '"Northeast"' is not assignable to parameter of type 'Direction'.

On compiling, it will generate the following JavaScript code.

// Defining a function move that takes a single argument of type Direction.functionmove(direction){
console.log(Moving in the direction: ${direction});}move("North");move("East");// move("Northeast"); // Error: Argument of type '"Northeast"' is not assignable to parameter of type 'Direction'.</code></pre>


The output of the above code is as follows



Moving in the direction: North
Moving in the direction: East




Numeric Literal Types



Numeric literal types are similar to string literals but allow you to specify exact numeric values as allowed types.



Example



In the code below, the 'SmallPrimes' type contains the small prime numbers till 11 as a value. The type of the 'prime' variable is 'SmallPrimes'. So, it can contain any value from 2, 3, 5, 7, or 11 only.



typeSmallPrimes=2|3|5|7|11;let prime: SmallPrimes;
prime =7;console.log(prime);// 7// prime = 4; // Error: Type '4' is not assignable to type 'SmallPrimes'.



On compiling, it will generate the following JavaScript code.



let prime;
prime =7;
console.log(prime);// 7// prime = 4; // Error: Type '4' is not assignable to type 'SmallPrimes'.



The output of the above code is follows



7




Combined Literal Types



You can combine different types of literals (string, numeric, boolean) using union types to allow a variable to hold a set of specified values.



Example



In the code below, the 'MixedLiterals' type contains the click, 404, and true values.



The action variable can contain any singl value from the 3 values of the 'MixedLiterals' type.



// Mixed type literalstypeMixedLiterals="Click"|404|true;let action: MixedLiterals;

action ="Click";// Validconsole.log(action);

action =404;// Validconsole.log(action);

action =true;// Validconsole.log(action);// action = "Other"; // Error: Type '"Other"' is not assignable to type 'MixedLiterals'.



On compiling, it will generate the following JavaScript code.



let action;
action ="Click";// Valid
console.log(action);
action =404;// Valid
console.log(action);
action =true;// Valid
console.log(action);// action = "Other"; // Error: Type '"Other"' is not assignable to type 'MixedLiterals'.



The output of the above code is as follows



Click
404
true




Use Cases for Literal Types



There are multiple use cases of literal types. However, we will look into some real-time use cases of the literal types.




Configuration − It is used to define the particular configuration of variables or function parameters that take only specific values.



State Management − Type literals can be used for state management.



API Response Handling − It is used to handle the API response based on the API response status.




Literal types in TypeScript enhance the type safety of your applications by allowing you to specify exactly what values are acceptable. It also helps developers maintain the code complexity and improve the readability.