typescriptでreactのuseContext & useStateを使う場合

概要

型宣言が面倒です…。typescripterはすごいな。

例の前提

• isFooというboolean型のstateを使いたい

サンプル

• contextの定義(FooFlagProvider.tsx)

import { createContext, useState } from "react";

// contextに設定する型を宣言（ここでuseStateの値を使いたい場合に、型宣言が必要になるわけです）
export type FlagContextType = {
  isFoo: boolean;
  // 今回はisFooがbooleanなので、React.Dispatch<React.SetStateAction<boolean>>
  // isFooがintとかの場合は、React.Dispatch<React.SetStateAction<number>> になるはず
  setIsFoo: React.Dispatch<React.SetStateAction<boolean>>;
}

// createContextを使用するときに型指定をする
export const FooFlagContext = createContext<FlagContextType>({
  isFoo: false,
  setIsFoo: () => {},
});

export const FooFlagProvider = (props:any) => {
  const { children } = props;
  const [isFoo, setIsFoo] = useState(false);

  return (
    <FooFlagContext.Provider value={{isFoo, setIsFoo}}>
      {children}
    </FooFlagContext.Provider>
  );
};

• contextの使用

import {FooFlagContext} from '../providers/FooFlagProvider'

...

  const {isFoo, setIsFoo} = useContext(FooFlagContext)