かめ。ブログ

フロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。

TypeScriptで配列内 連想配列の特定keyで文字列でユニオン型 (union type) を作る方法

2022年6月22日

2022年6月27日

ユニオン型とは

https://typescriptbook.jp/reference/values-types-variables/union

TypeScriptのユニオン型(union type)は「いずれかの型」を表現するものです。


連想配列のkeyで文字列でユニオン型 (union type) を作る方法として、keyof typeof Testとする方法があります。
さらに配列の場合の一つのkeyで同じことができないかなと思いやり方をメモしておきます。

連想配列のkeyで文字列のユニオン型 (union type) を作る方法

const Test = {
  A: 'a',
  B: 'b',
  C: 'c',
};

type TestType = keyof typeof Test // "A" | "B" | "C"

連想配列のvalueのユニオン型を作る方法

const Test = {
  A: 'a',
  B: 'b',
  C: 'c',
  D: () => {},
} as const;

type TestType = typeof Test[keyof typeof Test] // "a" | "b" | "c" | () => {

constアサーション「as const」 (const assertion)を忘れずに

https://typescriptbook.jp/reference/values-types-variables/const-assertion

オブジェクトリテラルの末尾にas constを記述すればプロパティがreadonlyでリテラルタイプで指定した物と同等の扱いになります。

これをつけずに行うとstring | () => {}なってしまいます。

配列内 連想配列のkeyで文字列のユニオン型 (union type) を作る方法

const Test = [
  {
    name: 'a',
  },
  {
    name: 'b',
  }
] as const;

type TestType = typeof Test[number]['name'] // "a" | "b"

こちらも同じくas constを忘れずに書きましょう。

まとめ

このように配列、連想配列の特定keyから文字列のユニオン型のtypeを作りたいと思う時がたまにあり毎回忘れてしまったりするのでメモとして残しておきます。
型定義も複雑ものを作りたい時に苦労するので、迷ったときはメモして残していこうと思います。

関連する記事

おすすめの本

Javascriptを勉強する際に読んでおくと良いなと思った本たちです。
特にリーダブルコードは綺麗なコードを書く考え方が身に付きます。いまでもその考え方が根付いています。

{}
{}
{}

よくみられてる記事