Stop Using “any” Type in TypeScript
There are better TS types and interfaces available. Why You Should Not Use “any” Type in TypeScript
TypeScript is one of the most used programming languages among web developers. It has fantastic language features and allows you to design scalable applications easily. Hence, developers tend to choose TypeScript over JavaScript for their projects.
However, there are some common mistakes we need to avoid when using TypeScript to get the maximum from its features. For example, overusing any type is a common mistake we often make. Although it sounds simple, overusing any type can completely violate the fundamentals of TypeScript.
So, in this article, I will discuss the issue of overusing any type, alternatives for any type and when we should and should not use any type to give you a better understanding.
What is any Type in TypeScript?
When you define a variable in TypeScript, you must explicitly tell the type of variable. For example, if you use string as the data type, TypeScript understands that the variable can only have string values. TypeScript will show an error if you try to assign a different type of value for the variable.
For example, the code snippet below will give you the error that Type 'number' is not assignable to type 'string'.
let myVariable: string = '';
myVariable = 20;
// error - Type 'number' is not assignable to type 'string'.(2322)
Similarly, any is another data type available in TypeScript. But it is unique from the rest since using any will tell TypeScript that the variable can have any value. So, for example, if you define a variable using any type, you can assign numbers, strings, booleans or even objects to that variable without errors.
let myVariable: any = 'String Value';
console.log('Value of myVariable : ' + myVariable);
myVariable = 20;
console.log('Value of myVariable : ' + myVariable);
myVariable = false;
console.log('Value of myVariable : ' + myVariable);
Some might think this is a great way to define all the variables in your project. But using any type comes with some significant drawbacks, and it can make your TypeScript project similar to a regular JavaScript project. So, let’s discuss why we should not use any type to define variables in TypeScript.
Why Should We Not Use any Type?
Type checking is one of the most significant features of TypeScript. It helps to avoid unexpected issues in the application by checking the data assignments and type castings.
When you use any type, variables will not have a specific data type, and you can assign multiple types of values to the same variable. In addition, the compiler will not perform type-checking on variables defined with any type, and your project will look like a regular JavaScript project.
So, why does TypeScript provide a data type named anyif it is that bad? There are some specific scenarios where any type can become a lifesaver. As developers, we should be able to identify those situations and apply any type accordingly.
When Should We Use any Type?
As mentioned, any type was introduced for some specific reasons. Here are some of the most common and essential situations where we must use any type.
1. For Migrations
Theany type is a valuable option when you initially migrate a JavaScript project to TypeScript. For example, if you are migrating an AngularJS project to a new Angular version, you can use any type to handle the types of variables which you haven’t migrated yet.
2. Working with third-party libraries
Sometimes, you may encounter third-party libraries that use any type. In such situations, you will have to use any type in your project to work with that library. But make sure to convert them to the correct type as soon as possible.
3. Handling type bugs
Handling TypeScript type bugs is another situation you might need any type. If you can't find any other solutions, you can use any type to fix the issue and convert it to a proper type later.
What are the Alternatives?
As explained above, the primary purpose of any type is to tackle some specific scenarios developers can face when working with TypeScript. However, developers often face situations where they can't decide on a particular type for a variable. So, let's discuss the alternative approaches we can use in such cases without using any type.
1. Use unknown
Using unknown is the best option when you don't know the type of a variable. Unlike any, unknown ensures the type safety of the variable while allowing you to assign multiple types to the variable.
For example, you can define a variable with unknown type like the one below and assign any type of value to it later:
let myVariable: unknowon = 'unknown type variable';
console.log('Value of myVariable : ' + myVariable);
myVariable = 20;
console.log('Value of myVariable : ' + myVariable);
myVariable = false;
console.log('Value of myVariable : ' + myVariable);
As you can see, unknown type variables work identically to any type variable. However, there is a difference between anyand unknownif you try to assign them to another variable. If your variable belongs to any type, you can assign it to another variable without errors. But, if you try to assign an unknown type variable to a variable with a proper type, you will see an error.
// any type
let myVariable1: any = 'any type variable';
console.log('Value of myVariable1 : ' + myVariable1);
let myVariable2: string = myVariable1;
console.log('Value of myVariable2 : ' + myVariable2);
// unknown type
let myVariable1: unknown = 'unknown type variable';
console.log('Value of myVariable1 : ' + myVariable1);
let myVariable2: string = myVariable1;
console.log('Value of myVariable2 : ' + myVariable2);
2. Use an Interface
Object defining is another common scenario where developers use any type since it does not require additional work. However, using an interface is the most suitable way to handle object types in TypeScript.
For example, suppose that you need to define an object named article with two properties named title, writer and views. If you use any type, you can define the object easily as follows:
const article: any = {
title: 'TypeScript',
writer: 'Chameera',
views: 10000
}But, this approach is not type-safe. So, first, you have to create an interface for the object and then use that interface to define the object.
// Interface
interface Article {
title: string;
writer: string;
views: number;
}
// Object
const article: Article = {
title: 'TypeScript',
writer: 'Chameera',
views: 10000
}Else, you can create the interface at the same time you define the object like below:
const article: {title: string;writer: string;views: number;
} = {
title: 'TypeScript',writer: 'Chameera'views: 10000
}Similar to an interface, you can also use type annotation to create an object type:
type Article {
title: string;
writer: string;
views: number;
}
const article: Article = {
title: 'TypeScript',
writer: 'Chameera',
views: 10000
}Using unknown type and interfaces are the best alternatives you can use instead of any type. Both these methods are type-safe and ensure you do not lose any TypeScript benefits.
Conclusion
any is a unique data type available in TypeScript. It was introduced to handle some unique scenarios like JavaScript to TypeScript migrations. However, we should always think twice before using any type since it disables type-checking for variables and objects defined using any type.
This article discussed when we should and should not use any type with examples to give you a better understanding. I hope you will use these suggestions to make your TypeScript projects better. Thank you for reading!
Build apps with reusable components like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
