Dynamically accessing properties in TypeScript

Question

I'm new to TypeScript and am trying to access the property of an object by a string. Here is a sandbox showing my problem: https://codesandbox.io/s/optimistic-mendel-f1zdg?file=/src/App.tsx

Code snippet (App.tsx: 17): newFlags[event.target.name] = event.target.value;

Error: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ hidden: string; completed: string; }'.

I can make the error go away by adding an if statement like if(event.target.name === hidden || event.target.name === "completed") but that solution seems really hard to scale. It seems great if I could use the <Flag> type as a variable, but that seems to make TypeScript mad.

Is there a DRY solution to fixing this error?

Dennis Vash · Accepted Answer · 2021-06-26 18:02:51Z

2

This error makes sense since TS is a compiler, it can't know the exact runtime type of target.name, if you are sure it's one of the Flag keys, you should specify it:

// const flag = event.target.name as 'hidden' | 'completed';
const flag = event.target.name as keyof Flag
return { ...prevFlags, [flag]: event.target.value };

edited Jun 26, 2021 at 18:02

answered Jun 26, 2021 at 17:58

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

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

Comments

CertainPerformance · Accepted Answer · 2021-06-26 17:56:03Z

1

One approach is to declare the handler inline, and take the key from the outer scope instead of from the event target:

  for (const [key, value] of Object.entries(flags)) {
    flagSelectors.push(
      <FlagFiltering
        key={key}
        name={key}
        value={value}
        handleChange={(e) => setFlags({
          ...flags,
          [key]: e.target.value
        })}
      />
    );
  }

I'd also recommend avoiding the mutator method .push if something more appropriate exists, like .map:

  return (
    <div className="App">{
      Object.entries(flags).map(([key, value]) => (
          <FlagFiltering

answered Jun 26, 2021 at 17:56

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Collectives™ on Stack Overflow

Dynamically accessing properties in TypeScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related