减少（）到 state object Typescript

Question

I'm having a trouble accessing redux state with Array.prototype.reduce() function inside a .ts file.

Here is the simplified example:

const state = store.getState();
const path: string = ["orders", "delay"].reduce(
   (accumulator, currentValue) => accumulator[currentValue], state) 

// it correlates to: const path = state.orders.delay 

// accumulator - string
// currentValue - string
// state - result of combineReducers, middleware, and devtools 

In the end of the reduce() I'll get a "string", but now I'm getting an error because state is not a "string" type.

How do I type this correctly?

Answer 1

This is very difficult (by which I mean very manual) in TypeScript:

// Unfortunately you will need to write a lot of manual function overloads
function getValue<S, P1 extends keyof S>(state: S, path: [P1]): S[P1];
function getValue<S, P1 extends keyof S, P2 extends keyof S[P1]>(state: S, path: [P1, P2]): S[P1][P2];
function getValue<S, P1 extends keyof S, P2 extends keyof S[P1], P3 extends keyof S[P1][P2]>(
  state: S,
  path: [P1, P2, P3],
): S[P1][P2][P3];
function getValue<S>(state: S, path: (keyof S)[]) {
  // You can also use your reduce solution, this is faster since it does not involve a function call
  let current: any = state;
  for (let i = 0; i < path.length; i++) current = current[path[i]];

  return current;
}

Basically you are declaring as many function overloads as there are levels in your state. What you get in return is pretty sweet though, check out this TypeScript playground with the code and examples!