Troubles with array of objects interface in Typescript

Question

I have an array which is state entry that I populate in componentDidMount lifecycle hook, and it is quite simple:

state{
      array:[{a:0,b:0},{a:1,b:1},{a:2,b:2}]
     }

When I try to access it, however I am always getting an error:

Property 'a' does not exist on type 'never'.

I think I am having troubles with declaring an interface here, can't find a proper way to do that. Something like this would probably do:

interface IState{
     array: object[]
}

Full version of component :

import * as React from "react";
import phrasalVerbs from "../data/phrasalVerbs";

interface IAnswerOptions {
   pVerb: string;
   meaning: string;
 }

interface IState {
  pVerbs: object;
  progress: number;
  answerOptions: IAnswerOptions[];
}

class PhrasalVerbs extends React.Component<{}, IState> {
  public state = {
    pVerbs: phrasalVerbs,
    progress: 0,
    answerOptions: []
  };

  public componentDidMount() {
    this.randomVariants();
  }

  public randomVariants = () => {
    let randomVariants: any[] = [];
    const currentVerbs = this.state.pVerbs.data;
    const shuffledVerbs = currentVerbs
      .map(a => [Math.random(), a])
      .sort((a: any, b: any): any => a[0] - b[0])
      .map(a => a[1]);
    randomVariants = [shuffledVerbs[0], shuffledVerbs[1], shuffledVerbs[2]];
    this.setState({
      ...this.state,
      answerOptions: randomVariants
    });
  };

  public render() {
    const { pVerbs, progress } = this.state;

    return (
      <div>
        <div>{pVerbs.data[progress].pVerb}</div>
        {/* <div>
          {this.state.answerOptions
            ? this.state.answerOptions[0].meaning
            : null}
        </div> */}
      </div>
    );
  }
}

export default PhrasalVerbs;

Your objects aren't really valid. Two properties named c?

Erik Philips
– Erik Philips

2018-10-04 20:47:12 +00:00
Commented Oct 4, 2018 at 20:47 — Erik Philips
– Erik Philips, Commented Oct 4, 2018 at 20:47
My bad, did that by mistake

Dimitry Ivashchuk
– Dimitry Ivashchuk

2018-10-04 20:48:35 +00:00
Commented Oct 4, 2018 at 20:48 — Dimitry Ivashchuk
– Dimitry Ivashchuk, Commented Oct 4, 2018 at 20:48

y2bd · Accepted Answer · 2018-10-06 00:08:26Z

9

You can define a type for your object:

interface IMyObject {
    a: number;
    b: number;
}

interface IState {
    array: IMyObject[];
}

class MyComponent extends React.Component<any, IState> {
    state = {
        array:[{a:0,b:0},{a:1,b:1},{a:2,b:2}]
    };

    render() {
        // should be OK
        const firstA: number = this.state.array[0].a;

        return <h1>{firstA}</h1>;
    }
}

Edit: looking into your code, it appears you’ve accidentally overridden the type of state. Typescript will automatically (and sometimes unhelpfully) allow you to override the types of fields in classes, so although you have your Component defined in terms of IState, the internal state property’s type is defined by the default value you gave it.

In this situation, an empty array has an inferred type of never[], so you end up with an array whose elements you can’t use.

edited Oct 6, 2018 at 0:08

answered Oct 4, 2018 at 21:09

y2bd

6,5661 gold badge24 silver badges26 bronze badges

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

7 Comments

Dimitry Ivashchuk Over a year ago

Still does not work, for some reason. If I do it by declaring state in the state object it is working fine, but using componentDidMount breaks everything

Dimitry Ivashchuk Over a year ago

Even if I use :any when declaring a type for my array in interface it's not working

y2bd Over a year ago

Please post the full version of your React component within your original post.

Dimitry Ivashchuk Over a year ago

Done, if you need something else, feel free to ask! The commented code is the one that produces error.

y2bd Over a year ago

Try going public state: IState = { ... }, you might be falling victim to type overriding.

|

Pavel Kratochvil · Accepted Answer · 2018-10-04 21:49:26Z

1

Hmm did you setup strictPropertyInitialization in tsconfig?

answered Oct 4, 2018 at 21:49

Pavel Kratochvil

4812 silver badges9 bronze badges

1 Comment

Dimitry Ivashchuk Over a year ago

Nope, and this problem is driving me crazy already. Maybe there is at least some workaround?

Collectives™ on Stack Overflow

Troubles with array of objects interface in Typescript

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related