检查打字稿中的可选属性

Question

考虑以下界面

interface Foo {
  bar?: Bar;
}

interface Bar {
  baz?: Baz;
}

interface Baz {
  foobar: number;
}

我认为这是访问数据的安全方式：

const test = (foo: Foo) => {
  const baz = (foo.bar || {}).baz || {};
  const foobar = baz.foobar;
};

但是，它导致错误：（298，26）TS2339：类型'{}'不存在属性'foobar'。

好。但是然后我不认为这会带来不同的结果：

const test = (foo: Foo) => {
  const baz = (foo.bar || {}).baz;
  const foobar = ({} || baz).foobar;
};

虽然这是一种解决方法，但我对此并不满意，因为我经常使用baz来获取更多属性。在我看来，这似乎是一个打字稿错误。

Answer 1

我对您的示例并不十分清楚（它们似乎都以非常相似的方式失败了）。没关系，不过。现在，要做这种嵌套的可选属性查找的最佳方法是这样的：

const test = (foo: Foo) => {
  const foobar = foo.bar && foo.bar.baz && foo.bar.baz.foobar;
};

可以，但是不漂亮。有一些库可以使这个更好，例如typesafe-get：

const test = (foo: Foo) => {
  const foobar = get(foo, 'bar', 'baz', 'foobar');
};

尽管从中期来看，真正的解决方案是optional chaining。这是一项新的JavaScript功能，将于11月在TypeScript 3.7中提供。看起来像这样：

const test = (foo: Foo) => {
  const foobar = foo?.bar?.baz?.foobar;
};