typeofとkeyofについて

typeofとkeyof

型クエリーと呼ばれるもの。

型クエリーとは

指定したものから型をキャプチャするためのもの。
自分で宣言した変数や、外部パッケージからインポートしてきた関数など、
何か指定したものから型をコピーして使いたい時に使われるものが型クエリー。
型クエリーの種類として、typeofとkeyofがある。

typeof

型アノテーションしたものだけではなく、型推論で導かれた型定義もキャプチャすることができる。
ちなみに、型アノテーションの方が優先される。

export const foo: string;

type Foo = typeof foo;
// type Foo = string

export const foo = "123";

type Foo = typeof foo;
// type Foo = "123"

export const foo: string = "123";

type Foo = typeof foo;
// type Foo = string

typeofの注意点

typeofは型定義以外のものに対して使う。

typeofのユースケース

オブジェクト作成時

ある変数の方と全く同じだが、別の変数を定義したい時に便利。

export const obj1 = {
  foo: "foo",
  bar: "bar",
};

const obj2: typeof obj1 = {
  foo: "aaaaa",
  bar: "bbbbb",
};

型の絞り込み

型の絞り込みをしたい時によく使われる。

export function double (x: number | string) {
  if (typeof x === "string") {
    return Number(x) * 2;
  }
  return x * 2;
}

keyof

keyofはオブジェクトのプロパティ名をLyteral Typesとして一覧で取得できるもの。

export type Obj = {
  foo: string;
  bar: number;
}

上記をLyteral Types、かつUnion Typesとして取得するために使うのがkeyof。

export type Obj = {
  foo: string;
  bar: number;
}

type key = keyof Obj;

const key: key = "bar";

keyofの注意点

keyofは型定義に対して使う型クエリー。

keyofのユースケース

keyofのユースケースは多々あるため、例として以下の1つを挙げる。

オブジェクトのプロパティ名を引数とした関数作成時

オブジェクトのプロパティ名を引数とした関数を作成したい時に使用出来る。

keyofとtypeofの組み合わせについて

keyofとtypeofは組み合わせて使うこともよくある。

export const Obj = {
  foo: "foo",
  bar: "bar",
}

// type Obj = typeof Obj;
// type Key = keyof Obj;

type key = keyof typeof Obj;
// typeof keyof Obj;では、エラーとなるので注意

// const key: Key = "bar";

組み合わせの際には、keyof typeof 〇〇;の順番で記述する。
※typeof keyof Obj;では、エラーとなるので注意。