0
votes

I have never used Typescript, Trying to understand how this works

This problem is very basic and may be simple but I didn't find any resource only which can help me with this.

Problem: I want to setState the StationDefs which is not present in StationListState but present in StationListProps, do I need to add it in the StationListState? or Import it somehow from Station.ts and it will work

when I try to set the state in componentDidMount it gives me following error


Argument of type '{ StationDefs: any; }' is not assignable to parameter of type 'StationListState | ((prevState: Readonly, props: Readonly) => StationListState | Pick<...>) | Pick<...>'. Object literal may only specify known properties, and 'StationDefs' does not exist in type 'StationListState | ((prevState: Readonly, props: Readonly) => StationListState | Pick<...>) | Pick<...>'.ts(2345)


I have 5 files as below

  1. StationList.tsx

class StationListComponent extends React.Component < StationListProp, StationListState > {
  constructor(props: StationListProp) {
    super(props);
    this.state = {
      stationOnline: false,
      stationId: 0,
      appId: 0,
      activities: {
        selectedRow: [],
      }
    }
  }

  //I want to add following method to fetch data and allocate response to stationDefs
  componentDidMount() {
    //want to fetch data, which has Json objectArray with StationDefs content 
    //how can i setState StationDef here ? 
    let data = [obj1, obj2, obj3];
    this.setState({
      stationDefs: data
    });
  }

  render() {}
}
  1. StationListState

interface ActivitiesType {
  selectedRow: Array < number | string > ;
}

export interface StationListState {
  stationOnline: boolean;
  stationId: number
  appId: number;
  activities: ActivityType;
}
  1. StationListProps

//import {IStationDef} from Station.ts

export interface StationListProp {
  stationDefs: IStationDef[];
}
  1. Station.ts

import {
  IEnumInterface,
  IEntityObj
} from 'index';

export interface IStationDef {
  StationVersionStatus: ICommonEnumInterface
  allowedUserTypes: ICommonEnumInterface;
  appDef ? : IEntityObject;
  appId ? : number;
  timestamp: string;
}
  1. index.ts

export interface IEnumInterface {
  stationVersionId: number;
  stationDescription ? : string;
  stationName: string;
}

export interface IEntityObj {
  id: number;
  name: string;
  type ? : ICommonEnumInterface;
}
1
Please add the code which create the error. I don't see anything in the block as component did mount though - tmhao2005
Just added the code - Nikhil Kulkarni
Looks like roleDefs doesn't exist in your defined state StationListState? - tmhao2005
Sorry its StationDefs - Nikhil Kulkarni
StationDefs is also missing as well? - tmhao2005

1 Answers

0
votes
export interface StationListState {
  StationOnline: boolean;
  stationId: number
  appId: number;
  Activities: ActivityType;
}

Can you change StationOnline to stationOnline and Activities to activities?