【TypeScript】ジェネリクスで連想配列のキーを型に利用する [Techblog#34]

TypeScript は型の制約が強く便利なので、ちょっとこんなものを考えてみます

functionBox に渡したオブジェクトのキーに対応する関数を実行する exec を返す関数です

type funcProps = {  [key: string]: () => any}
const functionBox = (func: funcProps) => {  const exec = (key: string) => {    return func[key]()  }
  return exec}

例えば、こんな感じで使えます

functionBox の連想配列のキーは、任意の文字列を指定できます

const exec = functionBox({  hello: () => console.log('hello'),  world: () => console.log('world'),})
exec('hello') // hello

しかし、これだと複雑な開発状況になった場合に、どのような関数が登録されているかがわかりにくいです

そこで functionBox に渡すオブジェクトの型 funcProps をジェネリクス T を使って定義してみます

type funcProps<T extends string> = {  [key in T]: () => any}

また、関数の定義もジェネリクスを使った以下のものに更新します

const functionBox = <T extends string>(func: funcProps<T>) => {  const exec = (key: T) => {    return func[key]()  }
  return exec}

このようにすることで、型補完やエラーチェックが効くようになります 🎉 (画像は VScode)

ちなみに、連想配列に特定のキーは強制させたい場合は、以下のようになります

ここでは required というキーを強制させています

ポイントとしては [key in T | 'required'] と指定するところです

type funcProps<T extends string> = {  [key in T | 'required']: () => any}
const functionBox = <T extends string>(func: funcProps<T>) => {  const exec = (key: T) => {    return func[key]()  }
  return exec}

required がキーに指定されていない場合は、関数指定時にエラーになります (画像は VScode)