Typescript setState with computed property names

Question

I am using Typescript 2.1. I have a React component with state with 2 collections of numbers, I don't want to duplicate the addItem and removeItem methods and want them to be generic. This is the code:

type Collection = 'challenges' | 'disciplines';

type State = {
  lang: string;
  challenges: number[];
  disciplines: number[];
}

class MyComponent extends React.Component<{}, State> {    
  addItem = (collection: Collection, id: number) => {
    this.setState({
      [collection]: [...this.state[collection], id],
    });
  }

  removeItem = (collection: Collection, id: number) => {
    this.setState({
      [collection]: this.state[collection].filter(anId => anId !== id)
    });
  }

  ...

}

and this is how I call the methods:

this.addItem('disciplines', id)

Right now in addItem method I get compilation error:

Argument of type '{ [x: string]: number[]; }' is not assignable to parameter of type 'Pick< State, "lang" | "disciplines" | "challenges">'.

Property 'lang' is missing in type '{ [x: string]: number[]; }'.

Is there a way to properly type this? Thanks!

I worked around this error using something like this: this.setState({ [collection]: this.state[collection].filter(anId => anId !== id) } as any); but there must be some better solution — Giladd
– Giladd, Commented Mar 9, 2017 at 10:37
@Giladd I found that this is a bug in TypeScript compiler and am now tracking the issue here. — Max Semikin
– Max Semikin, Commented Mar 9, 2017 at 13:04

Max Semikin · Accepted Answer · 2017-03-09 13:05:45Z

3

It seems to be a bug in the TypeScript compiler, so we will have to wait for the fix.

The issue for tracking is here.

answered Mar 9, 2017 at 13:05

Max Semikin

9741 gold badge11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simon Over a year ago

There is a workaround available: github.com/Microsoft/TypeScript/issues/… this.setState({ [key as any]: value });

Collectives™ on Stack Overflow

Typescript setState with computed property names

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related