【TypeScript】Union型からオブジェクトのkeyを型指定する

1. TypeScript
2. JavaScript
2023/07/09

やりたいこと

type Props = "prop1" | "prop2" | "prop3";

function func() {
  return {
    prop1: "",
    prop2: "",
    prop3: "",
  };
}

Union型の値のみをkeyとして持つオブジェクトの型を指定したい。

解決法

type Props = "prop1" | "prop2" | "prop3";

function func() {
function func(): { [key in Props]: string } {
  return {
    prop1: "",
    prop2: "",
    prop3: "",
  };
}

Mapped Typesを使い[key in Props]とすることで実現できる。

type Props = "prop1" | "prop2" | "prop3";

function func(): { [key in Props]: string } {
function func(): { [key in Props]?: string } {
  return {
    prop1: "",
    prop2: "",
    prop3: "",
  };
}

keyをoptional（任意）にしたい時は上記のようにすればOK。