javascript - typescript 中的对象解构

Question

是否可以在不提示 Typescript 的情况下解构来自函数调用的对象？

文件 1

• react 组件 1

...
let obj = null // <-- object initialization
...
useEffect(() => {
  obj = functionCall(...) // <-- function call that populates the object
}, [obj])

• react 组件 2

const { key1, key2 } = obj // <-- object destructuring

这里我从 Typescript 收到以下提示

• 类型“null”上不存在属性“key1”。
• 类型“null”上不存在属性“key2”。

如何删除这些警告？

Answer 1

指定obj的类型:

let obj: null | {key1: sometype; key2: sometype; } = null;

请注意，由于 obj 可能具有值 null，因此您需要围绕解构赋值设置一个保护或默认值:

if (obj) {
    const { key1, key2 } = obj;
}

或

const { key1, key2 } = obj ?? {key1: defaultForKey1, key2: defaultForKey2};

或

const { key1 = defaultForKey1, key2 = defaultForKey2 } = obj ?? {};

后两者之间的区别在于如果 obj 不是 null 而是 key1 或 key2 时会发生什么具有值未定义(如果类型允许的话)。