Check the Type of a Variable in TypeScript

Check the Type of a Variable in TypeScript #

Use the typeof operator to check the type of a variable in TypeScript, e.g. if (typeof myVar === 'string') {}. The typeof operator returns a string that indicates the type of the value and can be used as a type guard in TypeScript.

index.ts

Copied!
const myVar: string | number = 'hello world';

console.log(typeof myVar); // 👉️ "string"

if (typeof myVar === 'string') {
  console.log(myVar.toUpperCase()); // 👉️ "HELLO WORLD"
}

// ✅ Use instanceof for classes
class Person {}
const person = new Person();
console.log(person instanceof Person); // 👉️ true

const err = new Error('Something went wrong');
console.log(err instanceof Error); // 👉️ true

// ✅ Use Array.isArray to check if array
console.log(Array.isArray([1, 2, 3])); // 👉️ true

We used the typeof operator to check the type of a variable in TypeScript.

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

index.ts

Copied!
const myVar: string | number = Math.random() > 0.5 ? 'Hello' : 1000;


// 👉️ myVar has type string or number here

if (typeof myVar === 'string') {
  // 👇️ myVar has type string here
  console.log(myVar.toUpperCase());
} else {
  // 👇️ myVar has type number here
  console.log(myVar.toFixed(2));
}

The myVar variable is typed using a union and can have a type of string or number.

We can't directly access string built-in methods on the variable because it might be a number.

In our if condition, we check if the type of myVar is a string, so TypeScript knows the variable stores a string in the if block.

The only other possible type the variable might store is a number, so the variable is typed as a number in the else block.

Here are some examples of using the typeof operator.

index.ts

Copied!
console.log(typeof 'hello'); // 👉️ "string"
console.log(typeof 100); // 👉️ "number"
console.log(typeof true); // 👉️ "boolean"
console.log(typeof [1, 2, 3]); // 👉️ "object"
console.log(typeof {}); // 👉️ "object"
console.log(typeof function example() {}); // 👉️ "function"
console.log(typeof NaN); // 👉️ "number"
console.log(typeof undefined); // 👉️ "undefined"
console.log(typeof null); // 👉️ "object"
console.log(typeof class A {}); // 👉️ "function"

Notice that using the typeof operator with an array returns object.

To check if a variable stores in array, use the Array.isArray() method.

index.ts

Copied!
const arr: string[] = ['a', 'b', 'c'];

console.log(Array.isArray(arr)); // 👉️ true

The Array.isArray method returns a boolean result - true if the passed in values is an array and false otherwise.

The type of NaN (not a number) is number. If you need to check if a specific value is NaN, use the Number.isNaN method.

index.ts

Copied!
const example = Number('hello');
console.log(example); // 👉️ NaN

if (Number.isNaN(example)) {
  console.log('Passed in value is NaN');
}

The Number.isNaN method will return true if the passed in value has a type of number and is NaN.

The typeof operator returns "object", when you do typeof null.

index.ts

Copied!
console.log(typeof null); // 👉️ "object"

If you are checking whether a variable stores a null value, don't use the typeof operator, instead check directly.

index.ts

Copied!
const example = null;

if (example === null) {
  console.log('Variable stores a null value');
}

Note that the typeof operator always returns a string. A very common mistake is to do something like the following.

index.ts

Copied!
const myVar = undefined;

if (typeof myVar === undefined) {
  console.log('myVar is undefined');
} else {
  console.log('👉️ This block runs');
}

The else block in the example is ran because we are checking if the type of myVar is equal to the value undefined. This evaluates to false because typeof myVar returns a string of "undefined", not the value undefined.

The typeof operator returns "function" for classes. This is because classes in JavaScript (and TypeScript) are just syntactic sugar for functions.

If you need to check if a variable stores an instance of a specific class, use the instanceof operator.

index.ts

Copied!
class Person {}

const person = new Person();

if (person instanceof Person) {
  console.log('value is an instance of Person');
}

The instanceof operator returns a boolean value indicating whether the prototype property of the constructor appears in the prototype chain of the object.

The person object was created using the Person class, so it is an instance of the class.

The instanceof operator is very useful in TypeScript because it can be used as a type guard.

index.ts

Copied!
class Person {
  walk() {
    console.log('person is walking');
  }
}
class Animal {
  run() {
    console.log('animal is running');
  }
}

function example(x: Person | Animal) {
  // 👉️ x is type Person or Animal here
  if (x instanceof Person) {
    // 👇️ x is type Person here
    x.walk();
  } else {
    // 👇️ x is type Animal here
    x.run();
  }
}

The function takes a parameter of type Person or Animal, so before we access a class-specific method, we have to check an instance of which class was passed to the function.

Check the Type of a Variable in TypeScript

Check the Type of a Variable in TypeScript #

Borislav Hadzhiev