javascript - How to infer parameter type in TypeScript?

Question

How infer parameter type?

I want to implement a state management library similar to redux, and I have trouble defining types. The prototype is as follows:

interface IModel<S, A> {
  state: S
  action: IActions<S, A>
}

type IActions<S, A> =  {
  [K in keyof A]: (state: S, payload: ???) => void // `???` How should it be defined here
}

class Model<T,A> implements IModel<T,A>{
  //...
}

// examples

const model=new Model({
  state:{name:"foo"},
  action:{
    setName:(state,name: string)=>{
      //...
    },
    fetchAccount:(state,payload: {
      id: number,
      locked: boolean,
      ...
})=>{
      //...
    }
  }
})

//
let state={name:''}
model.action.setName(state,'bar') // ok
model.action.setName(state,123)   // error

question from:https://stackoverflow.com/questions/65871538/how-to-infer-parameter-type-in-typescript

Answer 1

If you want to have strict type checking in the specific case where your method names match your state property names, you can use template literal types and mapped type as clauses. This requires Typescript 4.1 or newer.

The general gist is to take the state keys (in this case name), and map them to corresponding method names (setName) with the correct signatures ((state: State, value: string) => void).

type Actions<State> = {
  [K in keyof State & string as `set${Capitalize<K>}`]: (state: State, value: State[K]) => void;
}

type Model<State> = {
  state: State;
  actions: Actions<State>;
}

const model: Model<{ name: string }> = {
  state: {
    name: 'foo',
  },
  actions: {
    setName(state, value) {
      state.name = value;
    }
  }
};