javascript - 将 setState 作为参数传递 Typescript

Question

考虑以下因素:

// external file

export const someFunction = setState => {
    setState({ value: "some new string" })
} 

// component's file

import { someFunction } from "pathToFile"

interface TState {
    value: string
}

const [state, setState] = useState<TState>({ value: "some string" })

useEffect(() => {
   someFunction(setState)
}, [])

是否可以实现 someFunction 将仅接受此特定 setState 函数作为参数？如果可以的话，该怎么做？

明确地说，我想要:

someFunction(setState) // pass
someFunction(setAnotherState) // fail
someFunction(anotherFunctions) // fail
someFunction() // fail
someFunction(0) // fail
someFunction(true) // fail
someFunction({}) // fail

Answer 1

基本上，您要求的是 nominal type :

type NominalSetState = React.Dispatch<React.SetStateAction<TState>> &
  { readonly __brand_setState__: unique symbol }

const someFunction = (setState: NominalSetState) => {
    setState({ value: "some new string" })
}

function useNominalState(init: TState) {
    return useState<TState>(init) as [TState, NominalSetState]
}

const [state, setState] = useNominalState({ value: "some string" })
const [anotherState, setAnotherState] = useState<TState>({ value: "some string" })

现在，测试的行为符合预期:

someFunction(setState) // pass
someFunction(setAnotherState) // fail
someFunction() // fail
someFunction(0) // fail
someFunction(true) // fail
someFunction({}) // fail
someFunction((...arg: any[]) => any) // fail

Live code example