TypeScript中如何为createContext定义setState类型的默认值？

方案1：保留空函数（快速可用，适合小项目） #

你当前写的空箭头函数(value: boolean) => {}其实已经能满足类型要求不会报错，这个默认值只有在你忘记用myContext.Provider包裹消费组件的时候才会触发，如果你能保证所有消费组件都在Provider内部，这个写法完全能用。
如果想避免开发时误用到默认值无响应的问题，可以把默认值改成抛错的形式，方便快速排查问题：

const myContext = createContext({
  isActive: false,
  setActive: (value: boolean) => {
    throw new Error('setActive must be used within myContext.Provider')
  }
});

方案2：显式定义Context类型 + 类型断言（更规范，推荐中大型项目使用） #

先单独定义Context的类型，再用类型断言告诉TS你后续一定会在Provider里传入正确的setActive，不需要用到默认值，这种写法类型提示更清晰，也不会有冗余的默认函数：

// 先定义Context的类型
type MyContextType = {
  isActive: boolean;
  // 直接用React原生的setter类型，和useState返回值完全匹配
  setActive: React.Dispatch<React.SetStateAction<boolean>>;
}

// 用as断言默认值符合类型，后续Provider里会传入真实的setState
const myContext = createContext<MyContextType>({} as MyContextType);

后续你在Provider里传值的时候，直接把useState返回的setter传进去就行，完全符合类型要求：

const MyProvider = ({ children }) => {
  const [isActive, setActive] = useState(false);
  return (
    <myContext.Provider value={{ isActive, setActive }}>
      {children}
    </myContext.Provider>
  )
}

这种写法的好处是类型定义和实现分离，后续修改Context字段的时候只要改MyContextType就行，维护更方便。

方案3：可选值兜底（适合可能存在脱离Provider使用的场景） #

如果你的消费组件有可能脱离Provider使用，那可以把setActive设为可选类型，消费的时候加个判空就行：

type MyContextType = {
  isActive: boolean;
  setActive?: React.Dispatch<React.SetStateAction<boolean>>;
}

const myContext = createContext<MyContextType>({ isActive: false });

消费的时候用可选链调用：context.setActive?.(true)就不会触发类型报错。

内容的提问来源于stack exchange，提问作者alice_morgan