TypeScript - Any Type



The any type in TypeScript is a specific type that can represent any value. It is generally used when a type of variable is unknown or not yet defined. The any type is useful when converting the JavaScript code to TypeScript.

Any type is not a type in traditional sense. It is like a placeholder that tells the TypeScript compiler to ignore type checking for the particular variable, function, etc.

Can represent any value

A variable declared with any type can hold value of any datatype –

let x: any;
x = "Hello";
x = 23;
x = true;

Here the variable x is declared with any type. This allows us to assign any value, string, number, boolean, etc. to the variable.

The type of a variable of any type is undefined when you check using typeof operator –

let x: any;
console.log(typeof x) // undefined

On compiling, it will generate the following JavaScript code –

let x;
console.log(typeof x); // undefined

The output of the above example code is as follows –

undefined

Example

Let's understand the any type with help of the below TypeScript example –

let x: any;
console.log(typeof x);
x = "Hello";
console.log(typeof x);
x = 23;
console.log(typeof x);
x = true;
console.log(typeof x);

Here the variable is declared of any type. Then assigned this with values of different types (string, number and boolean).

On compiling, it will generate the following JavaScript code –

let x;
console.log(typeof x);
x = "Hello";
console.log(typeof x);
x = 23;
console.log(typeof x);
x = true;
console.log(typeof x);

The output of the above example code is as follows –

undefined 
string 
number 
boolean

Function Parameters of any Type

You can also define a function with parameter of any type –

function func(para: any){
}

Here the function func can take parameter of any type – number, string, boolean, etc.

Example

Let's take an example,

function greet(name: any): string{
   return `Hello Mr. ${name}`;
}
console.log(greet('Shahid'));
console.log(greet(123));

The function greet() is defined with a parameter of any type. So it can accept an argument of any type (number, string, etc.).

We have called the greet() function passing two different values of string and number types. You can notice that it works for both types of the arguments.

On compiling, the above typescript code will generate the following JavaScript code –

function greet(name) {
    return `Hello Mr. ${name}`;
}
console.log(greet('Shahid'));
console.log(greet(123));

The output of the above example code is as follows –

Hello Mr. Shahid 
Hello Mr. 123

Object of any Type

An object can also be defined of any type. Such object can have the properties of any type. Let’s take an example –

const student: any = {
   name: "John Doe",
   age: 32,
   isEnrolled: true,
}

Here the student object declared with any. It consists of three properties of different types.

Example

Try the following example,

const student: any = {
   name: "John Doe",
   age: 32,
   isEnrolled: true,
}
console.log(student.name);
console.log(student.age);
console.log(student.isEnrolled);

On compiling, it will generate the following JavaScript code –

const student = {
    name: "John Doe",
    age: 32,
    isEnrolled: true,
};
console.log(student.name);
console.log(student.age);
console.log(student.isEnrolled);

The output of the above example code is as follows –

John Doe
32 
true

Why to use any Type?

One reason to use any type is when you are working with the code that are not type-checked. For example, if you are using preexisting JavaScript code, the any type is useful in converting the JavaScript code to TypeScript. If you are using a third party library that is not written in TypeScript, you may need to use any type for the variable in TypeScript code.

Another reason to use the any type is when you are not sure what will be the type of a value. For example, a function accepting user input can be defined with any type to handle any type of data from users.

Any type is discouraged to use in new TypeScript code. It is advised to be careful when using the any type. If you use any type too often, you code will become less type safe.

Type Assertion

Use type assertion to narrow down the type of any variable –

let value: any = "hello world";
let lenStr: number = (value as string).length;
console.log(lenStr);

In the above code, variable value is defined of any type. Then it is narrowed down to string.

On compiling, it will generate the following JavaScript code –

let value = "hello world";
let lenStr = value.length;
console.log(lenStr);

The output of the above code is as follows –

11

Caution

Any type can lead to error if not used with caution.

In the below example, we are trying to access the property enrYear that doesn't exist. This will cause a runtime error because we have defined student object with any. Notice it doesn't show a compile time error.

const student: any = {
   name: "John Doe",
   age: 32,
   isEnrolled: true,
}
console.log(student.name);
console.log(student.age);
console.log(student.enrYear);

On compilation, it will generate the following JavaScript code –

const student = {
    name: "John Doe",
    age: 32,
    isEnrolled: true,
};
console.log(student.name);
console.log(student.age);
console.log(student.enrYear);

The output of the above example code is as follows –

John Doe 
32 
undefined

Any vs. unknown

When a variable is declared with any type and you can access its non-existing property.

Example: Variable declared with any

let user: any;
user.isEnrolled;

The above TypeScript code will not show any error at compilation. But it will through the following run time error.

Cannot read properties of undefined (reading 'isEnrolled')

Example: Variable declared with unknown

let user:unknown;
user.isEnrolled;

The above code will show a compile time error as follows –

'user' is of type 'unknown'.
Advertisements