How to pass array of objects to Class in Typescript

Question

export interface ICars{
    carType?: string;
    carColors: string[];
}

export class Cars implements ICars{
    carType?: string;
    carColors: string[];

    constructor(data?: ICars){
        //here code is present to set the carType and car Color parameters.
    }
}

And I am calling the above class from my react component as below.

const carTemplate: Cars = new  Cars({
    carType: myUseStateObjForCars,
    carColors: myUseStateArrayForCars,
})

My html is as follows

 const [myUseStateObjForCars, setMyUseStateObjForCars] = useState(0);
 const [myUseStateArrayForCars, setMyUseStateArrayForCars] = useState(0);

<input onChange={e=> setMyUseStateObjForCars(e.target.value)}
<input onChange={e=> setMyUseStateArrayForCars(e.target.value)}

This works fine when I have an Cars as a single object. How can I achieve the same when I have to pass array of object to my Car class. Without modifying my class Cars by using any for loop or map to set every object inside my Cars class? I am using react hooks,Redux, RxJS and typescript.

Is this possible or am I doing something wrong here? Any help on this would be appreciated as I am new to react.js , hooks and typesciprt.

[
    {
        carType: "4wheeler";
        carColors: ["red", "green"];        
    },
    {
        carType: "2wheeler";
        carColors: ["pink", "yellow"];  
    }
]

Typescript 1.8 / 2.0? Sure? We are at V3.9. Spamming tags is usually not appreciated on SO. If these weren't outdated tags you probably would have collected several downvotes. — Thomas
– Thomas, Commented May 11, 2020 at 7:03

Ernesto · Accepted Answer · 2020-05-12 22:55:49Z

1

I think your class Cars shouldnt implement ICars, but if you want to implement it try this:

export interface ICars{
    carType?: string;
    carColors: string[];
}

export class Cars implements ICars {
    carType?: string;
    carColors: string[];

    constructor(data?: ICars){
        //here code is present to set the carType and car Color parameters.
    }
}

// Add an extra class
export class CarList {
   private cars: Partial<Cars[]>;

   public constructor (cars: <Cars[]>) {
      this.cars = [];
   }

   public addCar (car: ICars) {
      this.cars.push(new Cars(carType: "Some value", ["red", "yellow"]));
   }
}

Remember you can instantiate an Object of the class Cars so each: const car = new Cars() refers to a single car, but the CarList has a cars property

edited May 12, 2020 at 22:55

answered May 11, 2020 at 4:39

Ernesto

4,3461 gold badge17 silver badges30 bronze badges

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

3 Comments

Rakesh Over a year ago

Thanks for your reply....I wanted to know is there any other way without adding an extra class I can achieve that using the same >> ( export class Cars implements ICars ). Class? Like using some for loop or map function that will help me to set the objects inside the cars Class?

Ernesto Over a year ago

If no extra class is added, then you need to not implement ICars

export interface ICars{     carType?: string;     carColors: string[]; }  export class Cars {     private cars: Partial<ICars[]>;     constructor(data: Partial<ICars[]>){         this.cars = data.length > 0 ? [...data] : [];     }      public addCars (car: ICars) {         this.cars.push({...car});     } }

Ernesto Over a year ago

export interface ICars{ carType?: string; carColors: string[]; } export class Cars { private cars: Partial<ICars[]>; constructor(data: Partial<ICars[]>){ this.cars = data.length > 0 ? [...data] : []; } public addCars (car: ICars) { this.cars.push({...car}); } } Remember you can instantiate an Object of the class Cars so each const car = new Cars() refers to a single car, but the CarList has a cars property

Collectives™ on Stack Overflow

How to pass array of objects to Class in Typescript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related