TypeScript Typeof Type Operator 公式ドキュメント

はじめに

TypeScript の typeof 型演算子は、値から型を取得する演算子です。JavaScript の typeof 演算子とは異なり、型コンテキストで使用されます。

TypeScript 公式ドキュメントの内容に基づき、typeof 型演算子の基本概念から制限事項まで、コード例とともに整理しています。

The typeof type operator

JavaScript の typeof との違い

JavaScript には式のコンテキストで使用できる typeof 演算子が既に存在します：

// "string" という文字列を出力
console.log(typeof "Hello world");

TypeScript では、型のコンテキストで変数やプロパティの型を参照するために typeof 演算子を追加しています：

let s = "hello";
let n: typeof s;
//  ^? let n: string

ReturnType との組み合わせ

基本的な型には あまり有用ではありませんが、他の型演算子と組み合わせることで typeof を使用して多くのパターンを便利に表現できます。

事前定義された型 ReturnType<T> を例として見てみましょう。これは関数型を受け取り、戻り値の型を生成します：

type Predicate = (x: unknown) => boolean;
type K = ReturnType<Predicate>;
//   ^? type K = boolean

関数名での ReturnType の使用

関数名で ReturnType を使用しようとすると、有益なエラーが表示されます：

function f() {
  return { x: 10, y: 3 };
}
type P = ReturnType<f>;
// Error: 'f' refers to a value, but is being used as a type here. Did you mean 'typeof f'?

値と型は同じものではないことを覚えておいてください。値 f が持つ型を参照するには、typeof を使用します：

function f() {
  return { x: 10, y: 3 };
}
type P = ReturnType<typeof f>;
//   ^? type P = {
//        x: number;
//        y: number;
//      }

Limitations

制限事項

TypeScript は意図的に typeof を使用できる式の種類を制限しています。

具体的には、識別子（変数名）またはそのプロパティでのみ typeof を使用することが有効です。これにより、実行されると思っているが実際には実行されないコードを書いてしまう混乱を避けることができます：

// ReturnType<typeof msgbox> を使用するつもり
let shouldContinue: typeof msgbox("Are you sure you want to continue?");
// Error: ',' expected.

この制限により、誤って関数を実行してしまうような記述を防ぐことができます。

まとめ

TypeScript の typeof 型演算子は、値から型を取得するための基本的な型演算子です。

typeof 型演算子の主要概念

1. 基本的な typeof: 値から型を取得
2. ReturnType との組み合わせ: 関数の戻り値の型を取得
3. 制限事項: 識別子とそのプロパティでのみ使用可能

typeof を理解することで、TypeScript の型システムをより効果的に活用できます。特に ReturnType などの他の型演算子と組み合わせることで、動的な型操作が可能になります。

参考リンク

https://www.typescriptlang.org/docs/handbook/2/typeof-types.html