Unknown vs Any in TypeScript

While working on a TypeScript project, I had to deal with data coming from an external source, and I wasn’t sure what type it would be. At first, I used any type to make things easier, but it quickly caused errors that TypeScript didn’t catch.

That’s when I looked into the unknown type. It seemed similar at first, but it offers a lot more security by allowing us to check the type before using the value.

In this tutorial, we’ll explore the differences between unknown and any types in TypeScript and when to use each one.

What is any Type in TyprScript?

The any type in TypeScript is a special type that allows a variable to hold any value without any type checking. When you declare a variable with the any type, TypeScript will not perform any type checking on that variable. This means you can assign any value to it, regardless of its type.

Check out: TypeScript Class vs Interface

Here’s an example of using the any type:

let data: any;
data = 10;
console.log(data.toFixed(2)); // Works

data = "Hello";
console.log(data.toUpperCase()); // Works

data = { name: "Alice" };
console.log(data.toUpperCase()); // Runtime error

Output:

In the above code, myVariable is declared with the any type, allowing it to hold a number, a string, and a boolean value without any type errors.

Since any disables all type checks, TypeScript doesn’t warn you when you use the wrong method. This can lead to bugs that only appear during runtime.

While any type can be convenient, it essentially disables type checking for that variable, making it more prone to runtime errors.

Check out: Loose vs Strict Equality in TypeScript

What is the unknown Type in TypeScript?

The unknown type, introduced in TypeScript 3.0, is a safer alternative to any. Like any, the unknown type can hold any value. However, when a variable is of type unknown, TypeScript requires you to perform type checks before using that variable.

Here’s an example of using the unknown type:

let myVariable: unknown = 42;
console.log(myVariable.toUpperCase()); // Error: Object is of type 'unknown'

if (typeof myVariable === "string") {
  console.log(myVariable.toUpperCase()); // OK
}

Output:

In the above code, myVariable is declared with an unknown type. When we try to call the toUpperCase() method directly on myVariable, TypeScript raises an error because it doesn’t know the type of myVariable.

To use myVariable, we need to perform a type check using the typeof operator. Only after ensuring that myVariable is a string, TypeScript allows us to call the toUpperCase() method.

The unknown type provides an extra layer of type safety compared to any. It allows you to handle different possible types explicitly before using the value.

Check out: Difference Between Record vs Map in TypeScript

When to Use any vs unknown in TypeScript?

The choice between any and unknown depends on your specific use case and the level of type safety you require.

Use any when:

• You are migrating an existing JavaScript project to TypeScript and want to gradually add type annotations.
• You are working with third-party libraries that don’t have type definitions.
• You need to assign values of multiple types to a variable and don’t want to perform type checks.

Use unknown when:

• You want to enforce type safety and ensure that type checks are performed before using a value.
• You are receiving data from an external source (e.g., API responses) and want to validate the type before using it.
• You want to encourage explicit type assertions and prevent accidental misuse of values.

It’s generally recommended to use unknown over any. Whenever possible, maintain better type safety in your code.

Summary

The unknown values can be assigned to other types only after performing type checks or type assertions.

Conclusion

In this TypeScript tutorial, we have learned the key differences between any and unknown in TypeScript. While both types can hold any value, any disables all type checking, which can lead to runtime errors. In contrast, unknown maintains type safety by requiring you to check the type before using the value.

I hope you now understand how and when to use any and unknown in your TypeScript code.

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/