TypeScriptのtypeof演算子を初心者でも理解できる12の方法

はじめに
●TypeScriptとtypeof演算子の基本
- ○TypeScriptの基礎知識
- ○typeof演算子とは？
●typeofの具体的な使い方
●TypeScriptでのtypeof演算子の応用
●型情報をより強化するためのテクニック
●typeof演算子を使った注意点と対処法
- ○基本的なトラブルシューティング
- ○よくあるエラーメッセージとその対応
  - □”TS2454: Variable ‘xxx’ is used before being assigned”
  - □”TS2365: Operator ‘xxx’ cannot be applied to types ‘yyy’ and ‘zzz'”
●より効果的な型設計のためのカスタマイズ方法
まとめ

はじめに

TypeScriptの強力な型システムは、多くの開発者にとって魅力的な機能の一つです。

その中でも、typeof演算子は非常に有用で、初心者から上級者まで幅広く使われています。

この記事では、TypeScriptのtypeof演算子を使った12の実践的な方法を徹底解説します。

サンプルコードとともに、初心者でも理解しやすいように説明していきます。

まずは、TypeScriptとtypeof演算子の基本からスタートしていきましょう。

●TypeScriptとtypeof演算子の基本

TypeScriptとJavaScriptの間には緊密な関連がありますが、それぞれの言語で役立つ独特な機能があります。

例えば、JavaScriptでは変数のタイプをテストするためにtypeof演算子を使用することが一般的ですが、TypeScriptの文脈では、さらにパワフルなツールに進化しています。

このtypeof演算子を使いこなすことで、TypeScriptの型システムを利用して、より安全で信頼性の高いコードを書くことができます。

ここでは、TypeScriptにおけるtypeof演算子の基本的な役割と、それをどのように活用するかを、基礎知識を確認しながら探求していきます。

○TypeScriptの基礎知識

TypeScriptは、Microsoftが開発したJavaScriptのスーパーセットです。

JavaScriptの全てのコードはTypeScriptとしても動作し、その上で型情報を追加することができます。

型情報の追加により、コードの品質を向上させることが期待されます。

具体的には、開発中に型の不一致によるエラーを早期に検出することができ、バグの発生リスクを減少させることができます。

○typeof演算子とは？

JavaScriptにおけるtypeof演算子は、変数やリテラルのデータ型を文字列として返すものです。

例えば、JavaScriptで次のようなコードを実行すると、”number”という結果が返されます。

let num = 123;
console.log(typeof num); // number

このコードでは、変数numのデータ型をtypeof演算子を使って確認しています。

そして、その結果として”number”という文字列が表示されます。

一方、TypeScriptでは、typeof演算子は変数やオブジェクトの型を取得するためにも使用されます。

例えば、以下のTypeScriptコードを考えてみましょう。

let obj = { name: "Taro", age: 25 };
type ObjType = typeof obj;

このTypeScriptのコードでは、objというオブジェクトを定義しています。

そして、typeof演算子を使用して、objの型を新たな型ObjTypeとして取得しています。

このように、TypeScriptではtypeof演算子を利用して、変数やオブジェクトの型を取得し、それを新たな型として定義することができます。

これにより、既存のオブジェクトや変数の型を再利用しやすくなります。

●typeofの具体的な使い方

TypeScriptのコーディングを行っている際に、特定の変数やオブジェクトの型情報を確認したい場合、typeof演算子を使用します。

JavaScriptにおけるtypeof演算子は、変数のプリミティブ型を文字列として取得するのに対して、TypeScriptのtypeofは型情報を直接取得する機能を持っています。

ここでは、typeof演算子の基本的な使い方と、TypeScriptでの活用方法をサンプルコードを交えて詳細に説明します。

○サンプルコード1：基本型の確認

まずは、基本的なデータ型の確認から始めます。

TypeScriptでの基本的なデータ型の変数を宣言し、その型情報をtypeof演算子を使用して確認する例を紹介します。

let num: number = 10;
let str: string = "Hello TypeScript";
let bool: boolean = true;

// このコードでは、それぞれの変数の型情報を取得して表示しています。
console.log(typeof num);  // number
console.log(typeof str);  // string
console.log(typeof bool); // boolean

このコードでは、num, str, boolという三つの変数を宣言し、それぞれにnumber, string, booleanという基本型を割り当てています。

その後、console.logを使用し、各変数の型情報を取得することで、実際の型がどのように確認されるかを表示しています。

このコードを実行すると、数値の変数numの型は「number」として確認され、文字列の変数strの型は「string」として確認されます。

また、真偽値の変数boolの型も「boolean」として正確に確認されることがわかります。

○サンプルコード2：オブジェクトの型確認

JavaScriptのように動的型付け言語では、実行時に変数の型を確認するためにtypeofを使用します。

TypeScriptでは、このtypeof演算子は、コンパイル時の型の情報を取得するためにも使用されます。

まず、JavaScriptでのtypeofの動作を思い出してみましょう。

JavaScriptでオブジェクトの型を確認する際には、typeofを使用するとobjectという結果が返されます。

しかし、TypeScriptではもう少し詳細な型の情報を得ることができます。

このコードでは、TypeScriptでのtypeofの使用方法を表しています。

具体的には、オブジェクトの内部の型情報を取得する例を見ていきます。

interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Taro",
  age: 25
};

type PersonType = typeof person;

このコードでは、まずPersonというインターフェイスを定義しています。

このインターフェイスは、nameとageという2つのプロパティを持つオブジェクトの型を表しています。

次に、personという定数を定義し、その型としてPersonインターフェイスを指定しています。

そして、最後にtypeof演算子を使用して、personの型を取得し、それをPersonTypeという新しい型として定義しています。

このPersonTypeは、personオブジェクトの型、つまりPersonインターフェイスと同じ型となります。

このコードを実行すると、特に出力はありませんが、PersonTypeという新しい型が定義されるという結果が得られます。

この型はpersonオブジェクトと同じ型情報を持ち、後続のコードでこの型を使用することで、同じ型のオブジェクトを簡単に扱うことができます。

○サンプルコード3：関数の戻り値の型確認

TypeScriptを理解する上で、関数の戻り値の型を正確に理解することは非常に重要です。

関数はアプリケーションの一部として機能し、それらが返す値の型がわからないと、予期しないエラーやバグの原因となりかねません。

そのため、今回はtypeof演算子を使用して関数の戻り値の型を確認する方法を解説します。

// 関数定義の例
function greet(name: string): string {
  return "Hello, " + name;
}

// 関数の戻り値の型を取得する
type GreetingType = typeof greet;

このコードでは、greetという関数を定義しています。

この関数は引数としてnameを受け取り、文字列を返すように設計されています。

そして、typeof演算子を使って、この関数の戻り値の型を新しい型GreetingTypeとして定義しています。

このコードを実行すると、GreetingTypeは関数greetの型、すなわち(name: string) => stringという関数のシグネチャを持つ型になります。

しかし、多くの場面では関数そのものの型よりも、関数の戻り値の型を取得したい場面が多いでしょう。

その場合、次のように書くことで関数の戻り値の型を取得することができます。

// 関数の戻り値の型を取得する
type ReturnTypeOfGreet = ReturnType<typeof greet>;

このコードでは、ReturnTypeという組み込みのユーティリティ型を利用して、greet関数の戻り値の型を新しい型ReturnTypeOfGreetとして定義しています。

●TypeScriptでのtypeof演算子の応用

TypeScriptでは、typeof演算子はJavaScriptとは少し異なる使い方で活用されています。

その違いの核心と、この強力なツールをTypeScriptでどのように応用していけるか、サンプルコードを交えながらご紹介します。

○サンプルコード4：型ガードとしての使用

JavaScriptでのtypeof演算子は、変数の型を確認するのに使いますが、TypeScriptでは型の制約としての機能が加わります。

この機能を「型ガード」といい、特定のブロック内で変数の型を狭めることができます。

考え方を理解するためのサンプルコードを見てみましょう。

function processInput(input: string | number) {
    if (typeof input === 'string') {
        // このブロック内では、inputはstring型として扱われる
        return input.toUpperCase();
    } else {
        // このブロック内では、inputはnumber型として扱われる
        return input * 2;
    }
}

このコードでは、inputパラメータがstring型かnumber型か不明ですが、typeof演算子を使用してinputの型を確認しています。

これにより、それぞれのブロック内でinputの型が狭まり、適切なメソッドや操作を使用することができます。

このコードを実行すると、inputパラメータに文字列を渡すと、その文字列が大文字になって返ってきます。

一方、数値を渡すと、その数値が2倍になって返ってくるという動作をします。

○サンプルコード5：ジェネリクスと組み合わせる

TypeScriptの強力な機能として、ジェネリクスが挙げられます。

ジェネリクスを利用すると、再利用可能なコードを柔軟に書くことができるのです。

ここでは、ジェネリクスとtypeof演算子を組み合わせた実用的な方法を学びます。

// オブジェクトの型を取得する関数
function getType<T>(obj: T): typeof obj {
    return obj;
}

const sample = {
    id: 1,
    name: "Taro",
    age: 30
};

const objectInfo = getType(sample);

このコードでは、ジェネリクスを利用してgetTypeという関数を定義しています。

この関数は、あるオブジェクトの型を取得し、その型情報を返す役割を果たします。

サンプルとして、sampleオブジェクトを作成し、getType関数を使ってその型を取得しています。

このコードを実行すると、objectInfoにはsampleオブジェクトと同じ構造のデータが代入されることになります。

しかし、最も重要なのは、getType関数が返す値の型がsampleの型と完全に一致する点です。

これにより、異なるオブジェクトやクラスにもこの関数を適用して、それぞれの型を再利用可能な形で取得することができます。

例えば、APIから取得したデータの型を確認したり、異なるモジュール間での型の共有を容易にする場面で非常に役立ちます。

ここでのポイントは、typeof演算子をジェネリクスと組み合わせることで、様々なデータ構造に対して型情報を動的に取得できることです。

この技術は、大規模なプロジェクトやライブラリの設計において、型の安全性を維持しつつ柔軟なコードを書く際に役立つでしょう。

次に、この技術を応用したカスタマイズ例を考えてみます。

function getDetailedType<T>(obj: T): { value: T, type: typeof obj } {
    return {
        value: obj,
        type: obj
    };
}

const detailedInfo = getDetailedType(sample);

このカスタマイズ例では、getDetailedType関数を定義しています。

この関数は、オブジェクトの値とその型の情報を一緒に取得することができます。

具体的には、返り値としてvalueとtypeの2つのキーを持つオブジェクトを返します。

○サンプルコード6：マッピング型との組み合わせ

TypeScriptは、静的な型情報を持つことにより、コードの安全性を高めることができる強力な言語です。

ここでは、typeof演算子をマッピング型と組み合わせて、より高度な型操作を行う方法について詳しく解説します。

□マッピング型とは？

まず、マッピング型とは何かを理解することから始めましょう。

マッピング型は、既存の型から新しい型を生成するTypeScriptの機能であり、オブジェクトのキーと値の型を変換する際に使用します。

基本的な構文は次の通りです。

type MapType<T> = {
  [K in keyof T]: SomeType;
};

このコードでは、型Tのすべてのキー（keyof T）を順次Kとして取り出し、それに対応する型SomeTypeを付与して新しい型を生成します。

□typeof演算子とマッピング型の組み合わせ

typeof演算子を使って、オブジェクトの型を取得した後、その型を基にマッピング型を定義することができます。

const exampleObj = {
  id: 1,
  name: "Taro",
  email: "taro@example.com"
};

type ExampleType = typeof exampleObj;

type MappedType = {
  [K in keyof ExampleType]: string;
};

このコードでは、exampleObjというオブジェクトを定義し、その型をtypeof演算子を使ってExampleTypeとして取得しています。

その後、MappedTypeという新しいマッピング型を定義し、ExampleTypeの各キーに対する値の型を全てstringに変換しています。

このコードを実行すると、MappedTypeは次のような型として推論されます。

{
  id: string;
  name: string;
  email: string;
}

これにより、オブジェクトの各キーに対する値の型を一括で変換することができます。

この方法を利用すると、APIのレスポンスや外部データの型変換など、様々な場面で役立ちます。

●型情報をより強化するためのテクニック

TypeScriptは、JavaScriptのスーパーセットとして、型安全を提供します。

ここでは、TypeScriptの「typeof」演算子と組み合わせて、より強力な型情報の獲得と利用を目指すテクニックを取り上げます。

○サンプルコード7：typeofとkeyofの組み合わせ

typeofとkeyofを組み合わせることで、オブジェクトの全てのキーを取得することができます。

これは、特定のオブジェクトのプロパティ名を動的に取得する際や、オブジェクトをより柔軟に操作する際に有用です。

例として、次のオブジェクトpersonがあるとします。

const person = {
    name: "Taro",
    age: 25,
    address: "Tokyo"
};

このオブジェクトの全てのキーを取得するためには、次のようにtypeofとkeyofを組み合わせます。

type PersonKeys = keyof typeof person;

上記のコードでは、PersonKeysは"name" | "age" | "address"というリテラル型を持つことになります。

このコードでは、personオブジェクトの型情報をtypeofで取得し、それをkeyofで使用してオブジェクトの全てのキーを取得しています。

このように、TypeScriptのtypeofとkeyofの組み合わせは、オブジェクトのキーを動的に取得することができ、さまざまなシナリオで有用です。

例えば、オブジェクトが持つ全てのキーでループ処理を行う場面などで、このテクニックを利用できます。

具体的には、次のようなコードでpersonオブジェクトの全てのプロパティを順番に表示することができます。

for (const key in person) {
    if (Object.prototype.hasOwnProperty.call(person, key)) {
        const element = person[key as keyof typeof person];
        console.log(`キー: ${key}, 値: ${element}`);
    }
}

このコードを実行すると、次のような出力が得られます。

キー: name, 値: Taro
キー: age, 値: 25
キー: address, 値: Tokyo

この方法によって、オブジェクトのキーと値を動的に取得・表示することができます。

特に大きなオブジェクトや、キーの構造が予め分からない場合に、このテクニックを利用すると効果的です。

○サンプルコード8：条件付き型と組み合わせて使う

TypeScriptでは、強力な型推論機能を持っており、特に条件付き型は、型が一定の条件を満たす場合に異なる型を返すという高度な型演算を実現できます。

これをtypeof演算子と組み合わせることで、さまざまなシナリオでの型の取得や操作が可能となります。

まず、条件付き型の基本的な使い方を簡単に紹介します。

条件付き型は次のように書かれます。

type MyType<T> = T extends string ? number : boolean;

このコードでは、Tがstring型に代入可能であれば、MyType<T>はnumber型になり、そうでなければboolean型になります。

この特性をtypeof演算子と組み合わせることで、変数やオブジェクトの実行時の型に基づいた条件付き型を定義することができます。

let sampleVar = "Hello, TypeScript!";
type ResultType = typeof sampleVar extends string ? string[] : number[];

// このコードでは、sampleVarがstring型であるため、ResultTypeはstring[]になります。

このコードでは、変数sampleVarにstring型の値を代入しています。

そして、ResultTypeの型は、sampleVarの型がstringであるかどうかに基づいて決定されます。

具体的には、sampleVarがstring型であれば、ResultTypeはstring[]型になり、そうでなければnumber[]型になります。

このコードを実行すると、sampleVarはstring型なので、ResultTypeはstring[]型となります。

○サンプルコード9：複数のオブジェクト間での型比較

TypeScriptにおけるtypeof演算子の中でも、特に実践的に役立つ使い方として、複数のオブジェクト間での型比較が挙げられます。

複数のオブジェクト間で型を比較することで、予期せぬ型の変更や、型の整合性を保つことが求められる場面での利用が想定されます。

まず、次のような2つのオブジェクトを考えてみましょう。

let objectA = {
    name: "Tanaka",
    age: 30
};

let objectB = {
    name: "Yamada",
    age: "twenty five"
};

ここで、objectAとobjectBの型が同じであるかどうかをtypeof演算子を使って確認してみます。

type TypeA = typeof objectA;
type TypeB = typeof objectB;

function compareObjects(obj1: TypeA, obj2: TypeB) {
    // 何らかの比較処理
}

このコードではTypeAとTypeBという型を作成し、それぞれobjectAとobjectBの型を取得しています。

そして、compareObjects関数内でその2つの型を引数として受け取っています。

しかし、このままでは2つのオブジェクトの型が同じであるかどうかの確認は行えません。

そのため、TypeScriptの条件付き型を利用して型が一致するかどうかを検証します。

type AreEqual<T, U> = T extends U ? U extends T ? true : false : false;

type Result = AreEqual<TypeA, TypeB>; // 結果を取得

このコードでは、AreEqualという型を定義しています。

この型は2つの型TとUが完全に一致しているかどうかをチェックし、一致していればtrue、そうでなければfalseを返します。

最後にResult型でその結果を取得しています。

この方法で、objectAとobjectBの型が完全に一致しているかどうかがわかります。

実際に上記のコードを実行すると、objectBのageプロパティが文字列であるため、Result型はfalseとなります。

●typeof演算子を使った注意点と対処法

TypeScriptでのtypeof演算子の使用は、多くの開発者にとって便利なツールの一つとして認識されています。

しかし、この演算子を利用する際には、様々な注意点やトラブルが発生することも少なくありません。

ここでは、そのような注意点やトラブルの原因、そしてそれらの対処法について詳しく解説していきます。

○基本的なトラブルシューティング

定義していない変数やオブジェクトのプロパティをtypeofで評価しようとすると、エラーが発生します。

このような場合、まずは変数やプロパティが正しく定義されているかを確認しましょう。

let sampleObject: any = {};
console.log(typeof sampleObject.someUndefinedProperty); // このコードではsampleObjectの未定義のプロパティをtypeofで評価しています。

このコードを実行すると、変数sampleObjectにはsomeUndefinedPropertyというプロパティが存在しないため、undefinedがコンソールに表示されます。

typeofはプリミティブ型の変数に対して正確な型を返しますが、オブジェクトに対してはobjectという結果を返します。

これは、具体的なオブジェクトの型を知りたい場合には注意が必要です。

class MyClass {}

let instance = new MyClass();
console.log(typeof instance); // このコードではMyClassのインスタンスの型をtypeofで評価しています。

このコードを実行すると、objectという結果がコンソールに表示されます。

MyClassの具体的な型を知りたい場合は、TypeScriptの特有の型取得方法を利用する必要があります。

○よくあるエラーメッセージとその対応

□”TS2454: Variable ‘xxx’ is used before being assigned”

このエラーメッセージは、変数が代入される前に使用された場合に表示されます。

変数の初期化を確認してください。

let someVariable: number;
console.log(typeof someVariable); // このコードでは未初期化の変数someVariableの型をtypeofで評価しています。

このコードを実行すると、undefinedがコンソールに表示されます。変数を使用する前に適切な初期化を行うことが重要です。

□”TS2365: Operator ‘xxx’ cannot be applied to types ‘yyy’ and ‘zzz'”

このエラーメッセージは、型が合致しない変数間での操作を試みた場合に表示されます。

変数の型を再確認し、必要であれば型の変換を行ってください。

let num: number = 10;
let str: string = "5";
console.log(typeof num + str); // このコードでは数値型の変数と文字列型の変数を加算しようとしています。

このコードを実行すると、エラーメッセージが表示されます。

変数strを数値型に変換するか、numを文字列型に変換する必要があります。

●より効果的な型設計のためのカスタマイズ方法

TypeScriptの力を最大限に活かして、より効果的な型設計を行いたいと思っている方は多いでしょう。

特に、複雑なアプリケーションやライブラリの開発では、型の安全性と柔軟性を同時に求められます。

そのためのカスタマイズ方法を、具体的なサンプルコードとともに解説します。

○サンプルコード10：カスタムユーティリティ型の作成

実際の開発では、組み込みの型だけではなく、独自のユーティリティ型を作成することがよくあります。

これにより、より詳細な型制約や繰り返し使われる型ロジックを簡潔に表現することができます。

このコードでは、オブジェクトのプロパティの型を部分的に上書きするためのカスタムユーティリティ型を作成しています。

type Overwrite<T, U> = { [P in keyof T]: P extends keyof U ? U[P] : T[P] };

// 使用例
type Original = {
  id: number;
  name: string;
  age: number;
};

type Updated = Overwrite<Original, { id: string; location?: string }>;

// Updatedの型は次のようになります。
// {
//   id: string;
//   name: string;
//   age: number;
//   location?: string;
// }

このコードでは、Overwriteというユーティリティ型を使って、Original型のidの型をnumberからstringに上書きし、新たにlocationプロパティを追加しています。

Updated型の結果、idはstring型として、またlocationがオプショナルなstring型として取得されることが期待されます。

このコードを実行すると、Original型の一部のプロパティの型がUpdated型で上書きされるため、新しい型定義を簡単に作成することができます。

特に大規模なプロジェクトやライブラリの開発では、このようなカスタムユーティリティ型が非常に役立ちます。

○サンプルコード11：外部ライブラリとの連携テクニック

TypeScriptはJavaScriptのスーパーセットであるため、多数の外部ライブラリやフレームワークとの連携が可能です。

しかし、それらのライブラリと型を正確に連携させることは、初心者にとっては難しいこともあります。

そこで、ここでは外部ライブラリとの連携時にtypeof演算子を用いたテクニックを学びます。

まず、考えられる一般的な状況として、外部ライブラリから取得したデータの型を確認したい場合があります。

例として、日付操作のライブラリである「moment.js」を使った時の型確認の方法を見ていきましょう。

import moment from 'moment';

// momentオブジェクトを取得
const myDate = moment();

// myDateの型を取得する
type MyDateType = typeof myDate;

このコードでは、moment.jsから取得した日付オブジェクトの型をtypeofを使って取得しています。

こうすることで、myDateの持つメソッドやプロパティの型情報をMyDateTypeとして利用できます。

このコードを実行すると、myDateの型情報を保持したMyDateTypeという新しい型が作成されます。

この型はmoment.jsの日付オブジェクトの全てのメソッドやプロパティの情報を持っているので、後続のコードでmyDateの機能を安全に使用することができます。

次に、外部ライブラリの関数が返すオブジェクトの型情報を取得する例を見ていきましょう。

import { fetchData } from 'some-external-library';

// 外部ライブラリの関数を使用してデータを取得
const data = fetchData();

// dataの型を取得する
type DataType = typeof data;

このコードを実行すると、外部ライブラリのfetchData関数が返すオブジェクトの型情報を取得できます。

この情報を持っていると、後続の処理でdataのプロパティやメソッドを安全に使用することができ、コンパイル時の型エラーを防ぐことができます。

○サンプルコード12：大規模プロジェクトでの管理テクニック

TypeScriptのtypeof演算子は、基本的な型確認から高度な型操作まで多岐にわたる利用法があります。

特に大規模なプロジェクトを進行する際、適切な型情報の管理はプロジェクトの品質を高め、エラーを減少させる要因となります。

ここでは、大規模プロジェクトでのtypeof演算子の活用法に焦点を当てて解説していきます。

□TypeScriptにおけるモジュール管理

大規模なプロジェクトでは、複数のファイルやモジュールにコードが分割されることが一般的です。

この時、typeof演算子を使って各モジュール間での型情報を一元管理することが考えられます。

例として、ユーザー情報を管理するモジュールと、商品情報を管理するモジュールが存在すると仮定します。

// userModule.ts
export class User {
  constructor(public name: string, public age: number) {}
}

// productModule.ts
export class Product {
  constructor(public productName: string, public price: number) {}
}

これらのモジュール間で共通の型情報を管理したい場合、typeof演算子を使用して以下のように型を取得・再利用することができます。

// typeModule.ts
import { User } from './userModule';
import { Product } from './productModule';

export type UserType = typeof User;
export type ProductType = typeof Product;

このコードでは、UserクラスとProductクラスの型情報をそれぞれUserTypeとProductTypeとしてエクスポートしています。

□大規模プロジェクトでの共通型の利用

上記で作成した共通の型情報を使用して、大規模プロジェクト内の他のモジュールで利用することが可能となります。

例えば、ユーザー情報と商品情報を組み合わせた注文情報を表現するモジュールを考えます。

// orderModule.ts
import { UserType, ProductType } from './typeModule';

export class Order {
  constructor(public user: UserType, public product: ProductType, public quantity: number) {}
}

このコードを実行すると、OrderクラスはUserTypeとProductTypeの型情報をもとに注文情報を表現します。