Why code inside brackets work in typescript / es6?

user_1326966 0
Viewed 108

i begin telling you that this code work, bu i can not find documentation about the use of code inside {}. The useStore is only a hooks in 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;
}
.....
}

in orginal my code was:

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

but typescript noted me a error Error:(57, 26) TS2459: Type 'StoreProps<{ error: any; loading: any; isFetching: any; } Pr...' has no property 'actions' and no string index signature. but using the first pasted code, work fine. But why?where i can find documentation about this use of code inside {...} ?

typescript reactjs ecmascript-6
3 Answers

This is Object Destructuring

Why this works?

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

This works because useStore1(...) is returning a object which has two properties with exact names "state", "actions" inside it. So javascript is able to destructure the object and create two const for you.

Why this doesn't works

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

It tries to find "state1" and "action1" in the returned object {state, action} and thus, it's not able to find these fields. Hence it's throwing the error.

More On destructing in JS - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

user_64759500

You can rewrite your second snippet as follows:

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

which basically destructures and creates an alias for the fields, all at once.

user_6324450

{} Mark is common in programming language. It help you scoping the code within the block {}. Any variables defined within the block will be available just in that block.

reference: https://en.wikibooks.org/wiki/Introduction_to_Programming_Languages/Scoping_with_Blocks

I think your useStore1 and useStore2 return an object with structured like : 

const useStore1 = (mapState, fnAction) => {
   // ... logic
   return {
      state, 
      actions
   }
}

Call to this useStore1 function will also return {state, action}. So to get the value you have to use 

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

But your second pasted code, it write const {state1, action1}. While the useState1 return {state, action}. Thats why your second pasted code, will produced an error.

The first pasted code not produced an error because of the block scoped code.

{
const {state, action} = useState1(...);
// variable state and action just available within this block.
}

Another approach is:

const stateReturn1 = useStore1(mapState1,FnActions1);
const stateReturn2 = useStore2(mapState2,FnActions2); 
state1 = stateReturn1.state;
action1 = stateReturn1.actions;
state2 = stateReturn2.state;
action2 = stateReturn2.actions;
user_43415580
Related