TypeScriptにおけるtypeof演算子の使いどころ

typeofについて

typeofはオペランド（被演算子、演算対象の変数のこと）の型を文字列として返すJavaScriptの演算子です。

オペランドと取得できる文字列の対応は以下の通りです。¹

TypeScriptにおけるtypeofについて

TypeScriptにおけるtypeofの主な使いどころは以下の2つです。

以下ではそれぞれについて紹介します。

プリミティブ型の型ガード

型ガード（Type Guard）とはif文やcase文をはじめとした条件分岐で変数の型を判別し、ブロック内の変数の型を絞り込む機能のことをいいます。
typeofによってプリミティブ型を判別できるため、プリミティブ型の型ガードを実装する際にtypeofが利用されます。

「文字列であれば大文字に変換、数値であれば数値を文字列にして返す」というメソッドをtypeofによる型ガードを利用して実装した例が以下になります。

const convert = (value: string | number): string => {
  if (typeof value === 'string') {
    return value.toUpperCase(); // string型と推論される
  } else {
    return value.toString(); // number型と推論される
  }
}

console.log(convert('hoge'))
// "HOGE"

console.log(convert(123))
// "123"

型ガードの詳細解説は【TypeScript】型ガード(Type Guard)の概要、typeofとinstanceofの利用例で紹介しています。

変数の型定義の取得

型定義の場面でtypeof 変数を利用すると、プリミティブ型やオブジェクトのプロパティの型が取得できます。

プリミティブ型の型定義をtypeofで取得する例は以下の通りです。

const hello: string = "Hello";

console.log(typeof hello);
// string

const hi: typeof hello = "Hi";
// 以下のように型推論される
// const hi: string

オブジェクトの型定義をtypeofで取得する例は以下の通りです。

const taro = {
  name: "Taro",
  age: 20,
};

console.log(typeof taro);
// object

const jiro: typeof taro = {
  name: "Jiro",
  age: 22,
};
// 以下のように型推論される
// const jiro: {
//     name: string;
//     age: number;
// }

typeofで取得した型を活用する例としてtypeof X[kyeof typeof X]（オブジェクトXのプロパティの型をUnion型で表現する）があります。
typeof X[kyeof typeof X]の詳細解説はTypeScriptの『typeof X[keyof typeof X]』の意味を順を追って理解するで紹介しています。

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考

• MDN Web Docs『typeof』
• Typeof Type Operator