reactjs - 为什么括号里的代码在 TypeScript/ES6 中能工作？

我开始告诉你这段代码可以工作，但我找不到关于 {} 内代码使用的文档。useStore 只是 React 中的一个钩子

//React ES6+ Typescript

const MyComp= (props: MyCompProps) => {
let state1 = null;
let action1 = null;
{
    const {state, actions} = useStore1(mapState1,FnActions1);
    state1 = state;
    action1 = actions;
}
let state2 = null;
let action2 = null;
{
    const {state, actions} = useStore2(mapState2,FnActions2);
    state2 = state;
    action2 = actions;
}
.....
}

在原来的我的代码是：

const {state1, action1} = useStore1(mapState1,FnActions1);
const {state2 , action2 } =  useStore2(mapState2,FnActions2);

但是 TypeScript 给了我一个错误 错误:(57, 26) TS2459: 类型 'StoreProps<{ error: any; loading: any; isFetching: any; } Pr...' 没有属性 'actions' 且没有字符串索引签名。 但是使用第一次粘贴的代码，就可以正常工作。为什么会这样？我在哪里可以找到关于在 {...} 中使用这种代码的文档？

答案＃1

这是对象解构

为什么这有效？

const {state, actions} = useStore1(mapState1,FnActions1);

这是可行的，因为 useStore1(...) 返回一个对象，该对象内部有两个属性，完全相同的名字“state”和“actions”。因此，JavaScript 能够解构该对象并为你创建两个常量。

为什么这不起作用

const {state1, action1} = useStore1(mapState1,FnActions1);

它尝试在返回的对象 {state, action} 中查找 "state1" 和 "action1"，因此无法找到这些字段。因此，它抛出了错误。

更多关于 JS 中的解构 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

答案＃2

你可以将你的第二个代码片段重写如下：

const {state:state1, actions:action1} = useStore1(mapState1,FnActions1);
const {state:state2 , actions:action2 } =  useStore2(mapState2,FnActions2);

基本上它会解构并为字段创建别名，同时完成这两件事。