React typescript Object.assign返回类型

Question

我有这个小的自定义钩子，它返回Object.assign结果。在文档中说它返回一个数组，但是下面的示例可用于数组解构和对象解构。

代码：

import { useState } from 'react';

const useStateExtended = (initialValue, initialLoading = false) => {

  const [data, setData] = useState(initialValue);
  const [loading, setLoading] = useState(initialLoading);

  return Object.assign([data, setData, loading, setLoading], { data, setData, loading, setLoading })
};

export default useStateExtended;

此代码可以通过以下方式使用：

const {data, setData, loading, setLoading} = useStateExtended({});
const [data, setData, loading, setLoading] = useStateExtended({});

这是如何工作的？为什么我要像数组和对象一样对其进行分解？

第二：如何在打字稿中键入？

Answer 1

您可以在带有迭代器的任何对象上使用方括号分解，包括最著名的数组。

您可以对any对象（和数组是对象）使用大括号分解。

执行时

Object.assign([data, setData, loading, setLoading], { data, setData, loading, setLoading })

您创建的数组同时具有普通数组索引[0]，[1]，但是also具有属性.data，.setData等。在Javascript中，这很奇怪，但由于数组是对象，并且由于可以为对象分配任意键-值对，因此是合法的。

因此，您可以通过使用[解构，调用数组的迭代器来从对象检索属性，或通过使用{解构并从对象中提取命名属性。

也就是说，这不是您应该要做的事情，因为（正如您的问题所表明的那样），这是有点令人困惑的事情，而可读性可能是代码的最重要因素。数组几乎永远不应该具有任意键/值对（正则表达式匹配的情况除外，在这种情况下，附加属性由解释器本身生成）。