TypeOf in TypeScript

A typeOf keyword returns the type of an identifier in TypeScript. It also acts as a Type Guard narrowing the Type in the scope where we use it.

Using TypeOf

The syntax of the TypeOf is as shown below. It returns the type of the identifier, which we place right next to it.

TypeOf <identifier>

For Example

var str="hello world"
console.log(typeof str)       //string

As the TypeOf returns the type, we can use it in variable declaration as shown below.

var str="hello world"

var strVal: typeof str;
strVal = 10     //Type '10' is not assignable to type 'string'

You can also use it declare anonymous types.

For example, we have not provided the type to the variable person. The TypeScript infers the type from the initialization as { code: string, name: string }. We can create another variable employee with the same type as person by using the TypeOf query (typeof person).

let person = {
    code:"1", name:"Rahul"
}

let employee: typeof person 

employee = { code:"2", name:"Sachin"}    //OK

employee = { code: "2", name: "Sachin", salary: 1000 }  //ERROR
//Type '{ code: string; name: string; salary: number; }' is not assignable to type '{ code: string; name: string; }'

TypeOf correctly returns the type in case of number, string, boolean, symbol, undefined, function. Everything else is object. That also includes null

console.log(typeof 1337)        // number
console.log(typeof "foo")       // string
console.log(typeof true)        // boolean
console.log(typeof {})          // object
console.log(typeof Math)        // object
console.log(typeof Math.round)  // function
console.log(typeof Symbol())    // symbol
console.log(typeof undefined)   // undefined
console.log(typeof null)        // object
console.log(typeof [1, 2, 3])   // object

Typeof As Type Guard

TypeOf operator also acts like a Type Guard, Similar to instanceOf.

For example, the following function formatAmount appends Rs. to the money sent in its argument. The user can either pass the money as union type of number and string. If the money is of type string, we need to use parseInt to convert it to a number But since the parseInt expects a string the code throws a compile-time error.

function formatAmount(money: number | string) {
  let formattedAmount = "Rs. " +parseInt(money)    //ERROR
  console.log(formattedAmount)
  return formattedAmount
}

//Argument of type 'string | number' is not assignable to parameter of type 'string'.
//Type 'number' is not assignable to type 'string'.

We can use the typeof money == "string" to check if the type of the money is equal to string. If it is true then use the parseInt method in the if block. The TypeScript will not throw an error for parseInt, because it now knows that the type of money is string inside the if block.

function formatAmount(money: number | string) {
  let formattedAmount:string
  if (typeof money == "string") {
    formattedAmount= "Rs. " +parseInt(money)
  } else {
    formattedAmount = "Rs. " +money
  }
  console.log(formattedAmount)
  return formattedAmount
}

You can see from the following image. As you hover over the money variable outside the if block, it shows it as union type of number | string. Inside the if block it treats as string and in the else block it treats as number.

Use with Type Aliases

The TypeScript allows us to create Type Aliases using the keyword type. We can combine it with the TypeOf to create Type Aliases for anonymous types

In the following code, we create a Type Alias personType and assign it the type using the typeof person. Now the personType becomes type alias for the type { code: string, name: string }. We can use it to create variables as shown below.

let person = {
    code:"1", name:"Rahul"
}

//Create a Type Alias personType
type personType = typeof person 

//Use it to declare variable of type personTye
let employee: personType;
let customer: personType;
let salesPerson: personType;

References

Advanced Types