反应打字稿 Object.assign return 类型

Question

我有这个小的自定义挂钩，它 returns 一个 Object.assign 结果。在文档中它说这 returns 一个数组，但下面的示例可以与数组解构和对象解构一起使用。

代码：

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({});

这是如何运作的？为什么我既可以解构数组又可以解构对象？

其次：如何在Typescript中输入这个？数据类型是：

data: any;
setData: (data: any) => void;
loading: boolean;
setLoading: (boolean) => void;

Answer 1

您可以在任何带有迭代器的对象上使用方括号解构，包括最值得注意的数组。

您可以对任何对象（数组也是对象）使用大括号解构。

当你这样做时

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

您创建了一个数组，它同时具有普通数组索引 [0]、[1]，但也具有属性 .data、.setData, 等等。这在 Javascript 中很奇怪，但由于数组是对象，并且由于对象可以分配给它们任意的键值对，所以这是合法的。

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

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

要键入它，请对 initialValue 的类型使用泛型，以便它可以传递给 useState，并声明数组 as const，以便数组解构检索正确的类型顺序正确：

const useStateExtended = <T extends unknown>(initialValue: T, initialLoading = false) => {
    const [data, setData] = useState<T>(initialValue);
    const [loading, setLoading] = useState(initialLoading);
    return Object.assign([data, setData, loading, setLoading] as const, { data, setData, loading, setLoading })
};

反应打字稿 Object.assign return 类型

React typescript Object.assign return type

javascript

destructuring

typescript

reactjs