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

返回类型看起来不错，这里有一个

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

我有另一个钩子使用这个钩子，但它看到的返回类型不正确

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

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

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

IE

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

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