Typescriptでmapのkeyに対して型定義を行う

最近はTypescriptで開発する所が専らな気がします。 私も例にもれずTypescriptでReact.jsを書いています。

今回は限られたkeyしか認めないmapオブジェクトを生成するときの処理に詰まったので それを備忘録として残しておきます。

    interface Auth = "google.com" | "facebook.com";
    interface Props {
        id: Auth;
        text: string;
    }

    const map: { [key in Auth]: Props } = {
      "google.com": {
              id: "google.com" as Auth,
              text: "Google",
            },
      "facebook.com": {
              id: "facebook.com" as Auth,
              text: "Facebook",
            },
    };

上記にコードを実際に載せましたが、大事なのは map変数の定義箇所です。

const map: { [key in Auth]: Props }

これはkeyをAuth型、valueがProps型のmapという定義になります。 valueの定義は特に問題ないと思います。

keyの型の定義だけが特殊で [key in Auth] となっています。 これは [key: Auth] と書くんじゃないかという方が多く見られると思います。 (私もそう思っていました)

でもこれはTypescriptからエラーが出力されるため気をつけるようにしましょう

エラー内容

An index signature parameter type cannot be a union type. 
Consider using a mapped object type instead.

なぜこの書き方になるのか。 という部分についてですが、調査が足りず分かっていません。 解決方法で申し訳ございませんが、もしお分かりな方はコメント等でご教授いただけますと幸いです。