Question

所以我有这个自定义钩子来解码令牌

export function useToken(initial: string) {
  const [token, setToken] = useState<string>(initial)
  const [decoded, setDecoded] = useState<Token>()

  useEffect(() => {
    if (token) {
      const value = decodeToken(token)
      if (isTokenExpired(value)) {
        setDecoded(undefined)
      } else {
        setDecoded(value)
      }
    } else {
      setDecoded(undefined)
    }
  }, [token])

  return [decoded, setToken]
}

返回类型看起来不错，这里是

[Token, React.Dispatch<React.SetStateAction<string>>]

我还有另一个使用此钩子的钩子，但是返回类型不正确

export function useUser() {
  const [decoded, setToken] = useToken(getTokenFromStorage())
  //...

在这里，useToken为解码和setToken提供相同类型的

Token | React.Dispatch<React.SetStateAction<string>>

即

decoded: Token | React.Dispatch<React.SetStateAction<string>>, setToken: Token | React.Dispatch<React.SetStateAction<string>>

我在做什么错...

Answer 1

前几天我遇到了同样的问题！

您必须对返回类型明确，因为Typescript无法正确推断类型。

例如：

export function useToken(initial: string): [Token, React.Dispatch<React.SetStateAction<string>>] {
}

那应该解决它...我认为这是一个打字稿错误，因此可能需要解决一个问题。

TypeScript React Hooks，自定义钩子类型推断问题

1 个答案: