React、Typescrptで、動的なkeyを使ったオブジェクト操作

表題の通り、動的なkeyを使ったオブジェクトの操作に手こずったので、備忘録として記載します。
どなたかの参考になれば幸いです。

1. useStateを使用し動的なkeyをオブジェクトのkeyにし、生成する

useHook.ts

import { useState } from 'react';

const useHooks = () => {
  const [state, setState] = useState({});
  const setKey = (setKey: number) => {
    setState((oldState) => {
      return { ...oldState, [setKey]: setKey };
    });
  };
};

引数setKeyをブラケットで囲むことで、オブジェクトのkeyとして定義できます。
valueにもsetKeyを指定してますが、他の値でも構いません。

---

2. useStateを使用し動的なkeyを使って、単一のプロパティをオブジェクトから削除

useHook.ts

import { useState } from 'react';

type State = { [key: string]: number };

const useHooks = () => {
  const [state, setState] = useState<State>({});

  const removeKey = (removeKey: number) => {
    setState((oldState) => {
      const { [removeKey]: removeKeyInfo, ...rest } = oldState;
      return rest;
    });
  };
}

注意点として、
type State = { [key: string]: number };のように、
オブジェクトのkeyを明示的に型定義する必要があります。
型定義しないとコンパイルエラーになります。

処理内容としては、removeKeyをブラケットで囲み、削除したいプロパティ([removeKey]: removeSetKeyInfo)を指定します。
後は、削除したいプロパティ以外(rest)をreturnすることで、
単一のプロパティをオブジェクトから削除できます。
ちなみに、...restはスプレッド構文の残余構文を使用してます。

---

3. reduceを使用し動的なkeyを使って、配列を配列風のオブジェクトに変換

useHook.ts

type InitlListToObj = { [key: string]: number };

const useHooks = () => {
  const list = [1, 2, 3, 4, 5];
  const listToObj = list.reduce((result, current) => {
    result[current.key] = current.key;
    return result;
  }, {} as InitlListToObj);
}

// listToObj output {'1': 1, '2': 2, '3': 3, '4': 4, '5': 5}

こちらは、単純にreduceを使ってるだけなのですが初期値に、
{} as InitlListToObjを指定し、
2. と同様にtype InitlListToObjで、オブジェクトのkeyを明示的に型定義する必要があります。

終わり。