Difference Between void and undefined in TypeScript

In TypeScript, void and undefined are two distinct types that often cause confusion among developers. While they may seem similar at first glance, they serve different purposes and have unique characteristics.

In this tutorial, we’ll dive deep into the difference between void and undefined in TypeScript, explore their use cases, and provide clear examples to help you understand when to use each one effectively.

What is void in TypeScript?

In TypeScript, void is primarily used to indicate that a function doesn’t produce a meaningful return value. When a function is declared with a return type of void, it means that the function will not explicitly return any data.

Here’s an example of a function with a void return type:

function logMessage(message: string): void {
  console.log(message);
}

In this case, the logMessage function simply logs a message to the console and doesn’t return any value.

It’s important to note that void it is a subtype of undefined in TypeScript. This means that you can assign undefined to a variable of type void, but you cannot assign any other value to it.

let nothing: void = undefined; // Valid
let num: void = 1; // Error: Type '1' is not assignable to type 'void'.

What is undefined in TypeScript?

undefined is a primitive value in TypeScript that represents a variable that has been declared but not assigned a value. It indicates the absence of a value or the lack of a defined value.

Here’s an example of a variable with an undefined value:

let myVariable: undefined;
console.log(myVariable); // Output: undefined

In this case, myVariable is explicitly declared with a type of undefined, and when we log its value, it outputs undefined.

Difference Between void and undefined in TypeScript

1. Return Type vs. Value:

• Void is used as a function return type to indicate that the function doesn’t return a meaningful value.
• Undefined is a primitive value that represents the absence of a value or a variable that has been declared but not assigned a value.

2. Assignability:

• Void is a subtype of undefined, which means you can assign undefined to a variable of type void.
• You cannot assign any other value to a variable of type void.
• Undefined can be assigned to any variable that hasn’t been explicitly assigned a value.

3. Use Cases:

• Void is commonly used as a function return type when the function doesn’t need to return a value.
• Undefined is often used to check if a variable has been assigned a value or to represent the absence of a value.

Examples

Let’s look at a few more examples to solidify our understanding of void and undefined.

Example 1: Using void As a Function Return Type

function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}

greet("John"); // Output: Hello, John!

In this example, the greet function has a return type of void because it doesn’t need to return any value. It simply logs a greeting message to the console.

Example 2: Checking for undefined

let age: number | undefined;

if (age === undefined) {
  console.log("Age is not defined.");
} else {
  console.log(`Age: ${age}`);
}

Here, we declare a variable age of type number | undefined, which means it can hold either a number or an undefined value. We then use an if statement to check if age is undefined and log a message accordingly.

Summary

Conclusion

Understanding the difference between void and undefined in TypeScript is crucial for writing clear and maintainable code. void is used as a function return type to indicate that the function doesn’t return a meaningful value, while undefined represents the absence of a value or a variable that hasn’t been assigned a value.

By leveraging void and undefined appropriately, you can express your intentions clearly and avoid potential bugs in your TypeScript code. Remember to use void when a function doesn’t need to return a value and undefined when checking for unassigned variables or representing the absence of a value.

With this knowledge, you’ll be well-equipped to handle various scenarios in your TypeScript projects and write more robust and expressive code.

You may like to read:

• How to Check if an Object is Type of Interface in TypeScript?
• 101 Best TypeScript Interview Questions and Answers for Experienced Professionals
• How to Check if an Object Implements an Interface in TypeScript?

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/