Typescript - 返回类型条件

Question

这个问题的重点是 React 中 Typescript 的使用。

我有两个 React 钩子：useStatus(): Status 和 useResult(): Result | null，并像这样使用它们：

const status = useStatus();
const result = useResult();

if (status !== "success") {
  return <Loading />;
}

return ... something using result ...;

我可以更改两个函数的签名（参数和返回类型）。 我无法更改 useResult 调用的位置（它必须在 if 之前） - 这是 React 的唯一限制。

从概念上讲，如果status 是"success"，我知道result 不会是null。我想以某种方式将此信息编码为返回类型。这样一来，Typescript 就会在最后一行知道 status 是 "success" 所以 result 是 Result（不是 Result | null）。

我知道我可以将两个不同的组件分开 - 这就是我已经在做的事情，但我很好奇我是否可以避免这种情况。

有没有办法做到这一点？

谢谢！ :)

Answer 1

第一个重构可能是将这两个钩子的处理提取到具有自己返回类型的专用钩子中。

之后，您可能（如果可能）遵循 cmets 中的建议，将 useStatus 和 useResult do 直接移动到新的钩子中。

例如：

// mock types
type Status = 'loaded' | 'loading';
type Result = unknown;

// hooks per your description
declare function useStatus(): Status;
declare function useResult(): Result | null;

// new type
// ref: https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#discriminating-unions
type Response =
  | { status: 'loaded'; result: Result; }
  | { status: 'no-result'; }
  | { status: 'loading'; };

// new hook
const useResponse = (): Response => {
  const status = useStatus();
  const result = useResult();

  if ('loaded' === status) {
    return null === result
      ? {status: 'no-result'}
      : {status, result};
  }

  return {status: 'loading'};
};

使用这个钩子可以让你轻松访问它的返回属性：

const App: React.FC = () => {
  const response = useResponse();

  switch (response.status) {
    case 'loading':
      return <div>Loading</div>;

    case 'no-result':
      return <div>Failure...</div>;

    case 'loaded':
      return <WithResult result={response.result}/>;
  }
};

---

参考：https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#discriminating-unions