TypeScriptのkey inでObjectを型安全にする

公開日: 2021-08-10

更新日: 2021-08-10

  • TypeScript
  • Tips

例えば以下のようなObjectを扱うとします。

const translations = {
  ja: {
    title: "こんにちは",
    body: "はじめまして"
  },
  en: {
    title: "Hello"
    body: "Nice to meet you"
   }
}

また、translations のkeyはja, en, zhなどの言語コードのみにしたいとします。
この場合、TypeScriptのkey inを使ってtranslationsを型安全にすることができます。

type Language = "ja" | "en" | "zh"
type Translation = {
  title: string;
  body: string;
}

// { [key in TypeA]: TypeB }
const translations: { [key in Language]?: Translation } = {
  ja: {
    title: "こんにちは",
    body: "はじめまして"
  },
  en: {
    title: "Hello",
    body: "Nice to meet you"
  }
}

translations.zh = { title: "你好", body: "初次见面" } // OK
translations.ja = "こんにちは" // Error!
translations.foo = "foo" // Error!

以上です。

yona

yona

琉球大学の理学部に所属している大学3年生です。 趣味と仕事でWebアプリ開発やシステム開発をしています。