打字稿中的对象解构

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 的以下抱怨

属性 'key1' 在类型 'null' 上不存在。
属性 'key2' 在类型 'null' 上不存在。

如何删除这些警告？

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 具有值 undefined（如果类型允许这样做）。

Answer 2

useEffect 在您的初始渲染之后运行 - 因此在第一次渲染时 obj 将为空，因此 TS 抱怨是正确的。

解构前需要检查obj不为null。另外，给它一个类型，例如

type MyType = { key1: string; key2: number; }; // for example

let obj: MyType | null  = null;

if (obj) {
  const { key1, key2 } = obj; // OK
} else {
  // In here, obj is null
}

打字稿中的对象解构

Object destructuring in typescript

javascript

object

typescript

reactjs

object-destructuring