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

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]
}

return类型看起来不错，这里是

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

我有另一个使用此挂钩的挂钩，但它看到 return 类型不正确

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

这里 useToken 给 decoded 和 setToken 相同类型的

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

即

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

我哪里做错了...

Answer 1

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

您必须明确使用 return 类型，因为 Typescript 无法正确推断类型。

例如：

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

应该可以修复它...我认为这是一个打字稿错误，因此可能需要针对它提出一个问题。

Answer 2

您可以尝试在 return 末尾使用“as const”。这是解决问题。

return [decoded, setToken] as const

有关更多信息，请查看“const assertions”

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

TypeScript React Hooks, custom hook type inference issue

typescript

react-hooks