TypeScript TypeOf

Introduction

TypeScript allows us to create type aliases using the type keyword. This keyword is majorly used to deal with different types in TypeScript. We can merge types with the typeof keyword to create type aliases for anonymous types. It is used to distinguish between the value and type of an existing object. It will be useful when the types of variables vary and we want to match a specific variable.

Definition of TypeScript typeof

typeof is a keyword that is used to differentiate between different types in TypeScript. Using typeof, we can figure out differences between numbers, strings, boolean, etc. It can be used with any type, also we can reuse the code by passing any parameter type.

The typeof operator can be used as a Type guard in TypeScript and returns a string that indicates the type of a value.

The typeof type guards can be acknowledged in two different forms: typeof t === "typename" and typeof t !== "typename" where typename is one of the return values of typeof. The return values can be undefined, number, string, boolean, object or function.

Syntax

The syntax for defining the TypeScript typeof keyword is as follows:

We can directly make use of typeof with the variable name that we want to define. After this declaration, we can write our logic as per the code's requirements.

How does typeof work in TypeScript?

TypeScript typeof keyword allows us to work with various types in TypeScript. We can reuse the same code for multiple types. By using this keyword, we can easily make checks that can help us to get any further exceptions if we try to cast them incorrectly.

It is used to create new basic types. If we define our custom types, then we can use typeof to copy the type of an existing item. It is majorly used with identifiers (i.e variable names) or their properties.

Examples

Usage of Typeof in TypeScript

Output

In the above example, we have created a function named sampleFunc inside the Example class that accepts any type of parameter. Inside this function, we are using the typeof keyword to compare the type of the variable being passed. typeof will return the type of the parameter. At the last, we created an object of the class and called the function. sampleFunc function will take one parameter, this parameter can be of any type like we have assigned the type as any in the function declaration.

typeof Null

In the first implementation of TypeScript, TypeScript values were represented as a type tag and a value. The type tag for objects was 0, and null was represented as a null pointer. Hence, null has 0 as type tag, typeof returns value object.

Using new operator

From the above example, we can conclude that all constructor functions are called with a new operator that returns non-primitives like objects or functions.

Interaction with Undeclared and Unintialized variables

The TypeScript typeof keyword is required to return a string for any operand. typeof returns undefined instead of throwing an error in the case of undeclared identifiers.

When we use typeof in lexical declarations like let, const and class in the same block before the line of declaration throws a ReferenceError. Block-scoped variables are present in the temporal dead zone from start until the initialization, hence they tend to throw an error when accessed. In the above snippet, the first three lines of code will throw an error and the rest of the code will work well.

Browser Compatibility

Now, we will discuss the browser compatibility of the TypeScript typeof keyword on various web browsers based on Desktop, Mobile, and Server compatibility.

For PC

For Mobile

For Server