Typescript 2.9 error with dynamic assignment

Question

With this code:

else if (event.target.id == 'filter') {
            this.setState({ [event.target.id]: event.target.value });

I get this typescript error: TS2345 TypeScript (TS) Argument of type '{ [x: number]: any; }' is not assignable to parameter of type '{ id: number; redirect: boolean; filter: string; player: Player; } | ((prevState: Reado...'.' …

But if I instead do this:

else if (event.target.id == 'filter') {
            this.setState({ filter: event.target.value });

there's no error. Despite the error, the code runs fine. I think this started with TypeScript 2.9. I realize I can just use the second example, but I have other code like:

handleChange(event) {
        if (event.target.type == 'checkbox') {
            this.setState({ [event.target.id]: event.target.checked });
        } else {
            this.setState({ [event.target.id]: event.target.value });
        }
    }

which is useful. Is there a better way to do this in TypeScript 2.9?

Update: also relevant:

type PlayerListState = {
    id: number,
    redirect: boolean,
    filter: string,
    player: GamePlayer
};

class PlayerListComponent extends React.Component<PlayerListProps, PlayerListState> {

and the type definition of SetState from React:

    setState<K extends keyof S>(
        state: ((prevState: Readonly<S>, props: P) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
        callback?: () => void
    ): void;

... wait, isn't id a number? How would it equal the string "filter"? — jcalz
– jcalz, Commented Jun 6, 2018 at 13:40
Still, if your error is Argument of type '{[x: number]: any;}..., it implies that TypeScript thinks event.target.id is a number. Are you sure about that error message? — jcalz
– jcalz, Commented Jun 6, 2018 at 15:22

Fenton · Accepted Answer · 2018-06-06 15:23:54Z

1

I tend to belt-and-braces my element types when there is chance they won't be what I expect.

Here is an example adapted from this blog post on narrowing types.

function isInputElement(target: EventTarget | any): target is HTMLInputElement {
  if (!target) {
    return false;
  }

  return (target.tagName && target.tagName === 'INPUT')
}

// Note: Arbitrary element selection to make the demo complete :)
document.getElementById('filter').onload = (e) => {
    const target = e.target;

    if (!isInputElement(target)) {
        return;
    }

    if (target.id == 'filter') {
        this.setState({ [target.id]: target.value });
    }
}

Within the type guard, you can throw an exception, log a message, or take whatever action is needed when the event target isn't actually an INPUT element.

answered Jun 6, 2018 at 15:23

Fenton

253k74 gold badges404 silver badges414 bronze badges

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

5 Comments

BenjiFB Over a year ago

Thanks Fenton, that was really helpful, as well as the blogpost. It took me forward but I'm still having a problem. The state is strongly typed and it now gives me: Argument of type '{ [x: string]: any; }' is not assignable to parameter of type 'PlayerListState … Type '{ [x: string]: any; }' is not assignable to type 'Pick<PlayerListState, "id" | "filter" | "redirect" | "player">' It's accurate that I should be passing in a string with one of those four values to the React component state. Is there a way for me to typecheck this similar to what you already showed me?

Fenton Over a year ago

I might need to see the types Pick and PlayerListState to answer that one.

BenjiFB Over a year ago

I've updated the question with what I hope is helpful info @Fenton

BenjiFB Over a year ago

Also, Pick is defined as part of TypeScript: medium.com/@curtistatewilkinson/…

BenjiFB Over a year ago

Marking this as resolved since you got me over the original hump. I'm dropping back down to TypeScript 2.8 as there seem to be some rough edges as of now with React. Thanks again...

Collectives™ on Stack Overflow

Typescript 2.9 error with dynamic assignment

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related