reactjs - 如何使我的 React 上下文提供程序类型安全

Question

我有一个 React 上下文提供程序。我用JS写的，现在用TS重写。我很难让这些类型正常工作。上下文被初始化为未定义。稍后使用 action 属性(可以是任何 ActionCreator)和 args 属性(可以是任何 Action)进行设置>。我尝试了几种不同的方法，但就像打地鼠一样。这是我目前拥有的:

import { createContext, FC, PropsWithChildren, useState } from 'react'
import { Action, ActionCreator } from 'redux'
import { Dispatch, SetStateAction } from "react";

type ModalStateT = {
  action: ActionCreator<any> | undefined
  args: Action | undefined
}

type ModalContextT = {
  modalState: ModalStateT
  setModalState: Dispatch<SetStateAction<ModalStateT>>
  resetModalState: ({action, args}: ModalStateT) => void
}

export const ModalContext = createContext<ModalContextT | undefined>(undefined)

const ModalProvider: FC<PropsWithChildren> = ({ children }) => {

  const defaultState = {
    action: undefined,
    args: undefined,
  }
  const [modalState, setModalState] = useState(defaultState)

  const resetModalState = () => {
    setModalState(defaultState)
  }
  return (
    <ModalContext.Provider value={{ modalState, setModalState, resetModalState }}>
      { children }
    </ModalContext.Provider>
  )
}

export default ModalProvider

我的 IDE 确实在此处显示错误 value={{ modalState, setModalState, resetModalState }}

这是我得到的错误:

TS2322: Type 'Dispatch<SetStateAction<{ action: undefined; args: undefined; }>>' is not assignable to type 'Dispatch<SetStateAction<ModalStateT>>'.
Type 'SetStateAction<ModalStateT>' is not assignable to type 'SetStateAction<{ action: undefined; args: undefined; }>'.
Type 'ModalStateT' is not assignable to type 'SetStateAction<{ action: undefined; args: undefined; }>'.
Type 'ModalStateT' is not assignable to type '{ action: undefined; args: undefined; }'. Types of property 'action' are incompatible.           
Type 'ActionCreator<any> | undefined' is not assignable to type 'undefined'.        
Type 'ActionCreator<any>' is not assignable to type 'undefined'.

我该如何解决这个问题？提前致谢!

Answer 1

注释您的defaultState与 ModalStateT类型:

const defaultState: ModalStateT = {
  action: undefined,
  args: undefined,
}

否则 TypeScript 将推断出更具限制性的类型。

这就是为什么它会给你这样的错误:

Type 'ActionCreator<any>' is not assignable to type 'undefined'.

这是 TypeScript 告诉你它推断出的类型为 undefined而不是限制较少的 ActionCreator<any> | undefined你想要的样子。