javascript - TS : Deconstructing an array containing an object and a function (setter) only works with @ts-ignore

Question

我有一个 React Hook ，用于在上下文提供程序上设置值。

const useAuth = () => {
  const [token, setToken] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [tryAuth, setTryAuth] = useState(false);

  useEffect(() => {
    if (tryAuth) {
      const getToken = async () => {
        console.log("triggered");

        setIsLoading(true);
        const axiosInstance = axios.get<TokenResponseType>(
          "http://localhost:3500/token"
        );
        const tokenResult = (await axiosInstance).data.accessToken;
        setToken(tokenResult);
        setIsLoading(false);
      };
      getToken();
    }
  }, [tryAuth]);

  return [{ token, isLoading }, setTryAuth];
};

export default useAuth;

export type inferredType = ReturnType<typeof useAuth>;

VSCode 告诉我返回类型如下:

(alias) useAuth(): (React.Dispatch<React.SetStateAction<boolean>> | {
    token: string;
    isLoading: boolean;
})[]

因为我不知道如何描述我使用以下方法的类型:

export type inferredReturnType = ReturnType<typeof useAuth>;

我正在使用以下行初始化我的 React 上下文:

const AuthContext = React.createContext<inferredReturnType | undefined>(undefined);

然而，当我尝试在组件中使用钩子(Hook)时，如下所示:

const [{ token, isLoading }, setTryAuth] = useAuth();

我收到错误消息

Property 'token' does not exist on type 'Dispatch<SetStateAction> | { token: string; isLoading: boolean; }'.ts(2339).

到目前为止，只有使用//@ts-ignore 抑制 TSCompiler 才能使其正常工作。

这里是上下文和上下文提供者的代码:

const AuthContext = React.createContext<inferredReturnType | undefined>(undefined);

const AuthContextProvider = (props: any) => {
  //@ts-ignore
  const [{ token, isLoading }, setTryAuth] = useAuth();

  return (
    <AuthContext.Provider value={[{ token, isLoading }, setTryAuth]}>
      {props.children}
    </AuthContext.Provider>
  );
};

export default AuthContextProvider;

export const useAuthContext = () => {
  //@ts-ignore
  const [{ token, isLoading }, setTryAuth] = useContext(AuthContext);

  if (token === undefined)
    throw new Error('useAuthContext must be inside a Provider with a value');

  return [{ token, isLoading }, setTryAuth];
};

这是代码沙箱的链接:

excellent blog post by Robin Wieruch 中的“自定义数据获取 Hook ”下描述了我想要实现的目标。仅适用于 TypeScript。

我确定这是来自 ES6 的一些高级类型解构与 TypeScript 的结合，这让我很困惑，但我找不到好的文章/文档来阅读它。

感谢您的帮助!

Answer 1

TypeScript 正在推断类型 (A|B)[](这是合理的，它不知道你总是会以相同的顺序返回东西)，但你想要元组类型 [A, B]。

你至少有两个选择:

显式定义类型

像这样:

type UseAuthReturnType = [
    {token: string, isLoading: boolean},
    React.Dispatch<React.SetStateAction<boolean>>
];

如果你使用它，就像这样:

const useAuth = (): UseAuthReturnType => {
    // ...
};

...你的解构工作。

Playground link

使用常量

像这样:

const useAuth = () => {
  // ...

  return [{ token, isLoading }, setTryAuth] as const;
};

Playground link

TypeScript 会做出不同的推断。具体来说，它会推断:

readonly [
    {
        readonly token: string;
        readonly isLoading: boolean;
    },
    React.Dispatch<React.SetStateAction<boolean>>
]

假设您不想将第一个条目作为实际对象接收并更改其值(我很确定您不想这样做)，那么通过推理也同样有效。