[TypeScript] プロパティ名を型として扱う

はじめに

この記事は「初めてのアドベントカレンダー Advent Calendar 2021
」12/19の投稿記事です。

やりたいこと

チェックボックスの状態を管理する関数の引数に、設定したプロパティのみ受け取るよう型をつけたい。

現状

const [optionModal, setOptionModal] = useState({
  hoge: false,
  foo: false,
  bar: false,
});

const onChangeOptionItem = key => {
  setOptionModal({
    ...optionModal,
    [key]: !optionModal[key],
  });
};

これだと引数keyがanyになってしまいTSのメリットが薄れてしまう

解決策

オブジェクトのキーをユニオン型にして返すkeyofを使用する。

type optionState = {
  hoge: boolean;
  foo: boolean;
  bar: boolean;
};

type optionStateKey = keyof optionState

const [optionModal, setOptionModal] = useState({
  hoge: false,
  foo: false,
  bar: false,
});

const onChangeOptionItem = (key:optionStateKey) => {
  setOptionModal({
    ...optionModal,
    [key]: !optionModal[key],
  });
};

// no error
onChangeOptionItem("bar")

// 型 '"barrr"' の引数を型 'keyof optionState' のパラメーターに割り当てることはできません。ts(2345)
onChangeOptionItem("barrr")

keyofで型をつけておけばコンパイル前に注意され修正できるようになりました。

最後まで読んでくださって、ありがとうございます。

参考記事