如何将Typescript与动态对象键一起使用

Question

I have a State object that records time in days, hours, and minutes. I defined my state like this:

type StateKeys = "days" | "hours" | "minutes";

type State = {
    [K in StateKeys]: number
};

Later, I want to set state based on a value changed in a control. There are three controls, one for day, another for hours, and a third for minutes. I have one handler function that is hooked up to each of these controls. Here's an excerpt of that function:

_onTimeComponentChange(e: any) {
    const name : StateKeys = e.currentTarget.name;
    const updatedValue = parseInt(e.currentTarget.value);
    this.setState(
        //@ts-ignore
        {[name]: updatedValue}, 
        () => {
            this.updateValue();
        }
    )
}

My goal is to remove the //@tsignore comment. If I do that now, I get this error message:

Argument of type '{ [x: string]: number; }' is not assignable to parameter of type 'State | ((prevState: Readonly, props: Readonly) => State | Pick) | Pick'. Type '{ [x: string]: number; }' is missing the following properties from type 'Pick': days, hours, minutes

How do I remove the //@tsignore comment and satisfy typescript's requirements?

Answer 1

It's definitely hard to get around this type of thing without casting. You can try following the pattern described here :

updateState(key: StateKeys, value: string) {
  this.setState((prevState) => ({
    ...prevState,
    [key]: value,
  }));
}

which would look like:

_onTimeComponentChange(e: any) {
  const name: StateKeys  = e.currentTarget.name
  const updatedValue = parseInt(e.currentTarget.value)
  this.setState(
    prevState => ({
      ...prevState,
      [name]: updatedValue,
    }),
    () => {
    },
  )
}