react apollo - Typescript：使用解构缩小类型

以下代码出错：

type Foo = {
  a: true,
  b: null,
  c: null
} | {
  a: false,
  b: Error,
  c: null
} | {
  a: false,
  b: null,
  c: { prop: number}
}

function getFoo(): Foo {

  return { a: false, b: null, c: { prop: 5 } };

}

const { a, b, c } = getFoo();

if (!a && !b) {
  console.log(c.prop)
}

给出的错误是：

Object is possibly 'null'.(2531)

这在某种程度上是有道理的，因为当从 getFoo() 得到的结果被解构时，较大的 Foo 对象的类型丢失了。

但是，我正在尝试复制 Apollo React 客户端正在做的事情：

const { loading, error, data } = useQuery('...');

if (loading) {
  return '..';
}
if (error) {
  return '..';
}
return data.foo;

我很难从他们的来源弄清楚他们是如何做到这一点的。

这在 TypeScript 中完全可行吗？我最好的猜测是他们的类型可能不完全准确，而且他们说即使没有返回，也总是会返回 data。

答案＃1

在两个变量之间不可能有类型保护。你可以在变量 a 和 b 之间建立一个联系，以表明：如果满足 a 的某个条件 ==> b 是其他某种情况。对于 Apollo React 客户端，我认为 strictNullChecks 是禁用的

答案＃2

这个示例自 TypeScript 4.6 起可以使用。但是，你必须使用 const 来进行解构。

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-6.html