Borislav Hadzhiev
Fri Mar 11 2022ยท3 min read
Photo by Bethany Szentesi
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.
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.
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.
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.
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.
const arr: string[] = ['a', 'b', 'c']; console.log(Array.isArray(arr)); // ๐๏ธ true
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.
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
.
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.
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.
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
.
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.
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.
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.