Transform an array of generic elements into an array of TypeScript classes

Question

Transform an array of generic elements into an array of TypeScript classes

I need assistance with incorporating a typescript class:

export class Vehicle {
  constructor(
    id: string,
    makeId: string,
    makeName: string,
    modelName: string,
  ) {
    this.id = id;
    this.makeId = makeId;
    this.makeName = makeName;
    this.modelName = modelName;
  }

  public id: string;
  public makeId: string;
  public makeName: string;
  public modelName: string;
}

Afterwards, I am trying to execute an axios post request:

var results = await axios({
  method: "post",
  url: `${api}/api/vehicles`,
  responseType: "json",
  data: {
    searchTerm: searchTerm
  }
});

The response from this post includes the following structured json object:

results: {
    data: {
        suggestions: [
            {
                data: {
                    id: "93dbae75-cf32-11e9-904a-88d7f67d5c52",
                    makeId: "8641d37e-cf1e-11e9-904a-88d7f67d5c52",
                    makeName: "Audi",
                    modelName: "TT RS Coupe"
                },
                value: "(2012) Audi - TT RS Coupe"
            },
            {
                data: {
                    id: "93dcc3f4-cf32-11e9-904a-88d7f67d5c52",
                    makeId: "8641d37e-cf1e-11e9-904a-88d7f67d5c52",
                    makeName: "Audi",
                    modelName: "TT RS Coupe"
                },
                value: "(2013) Audi - TT RS Coupe"
            },
            {
                data: {
                    id: "72c4afcb-cf32-11e9-904a-88d7f67d5c52",
                    makeId: "862fba2f-cf1e-11e9-904a-88d7f67d5c52",
                    makeName: "Acura",
                    modelName: "RSX"
                },
                value: "(2003) Acura - RSX"
            },
        ]
    }
}

I am struggling with mapping this received json data into an array of my typescript class. My attempt so far has been:

for(let result in results.data.suggestions) {
  vehicles.push(result.data:Vehicle);
}

However, it seems to be reading the result as a string due to the declaration using let result. Upon inspection via console.log, I can see that it is displaying the array index.

typescript axios mapping

Answer 1

Answer №1

The issue at hand stems from the misuse of for-in to iterate through the array entries, as that is not the intended functionality of for-in. Refer to this question's answers for further clarification; you may actually require for-of. Additionally, using a colon does not imply type assertion; instead, consider using <Vehicle>result.data or result.data as Vehicle.

for (const {data} of results.data.suggestions) {
  vehicles.push(data as Vehicle); // Alternatively, consider using `data as unknown as Vehicle`
}

Another issue arises if you follow your current approach - the objects will not be instances of Vehicle, albeit they might be compatible from a duck-typing standpoint. This works temporarily, but might create issues when adding methods to Vehicle in the future.

To tackle this, here are some potential solutions:

Transform Vehicle into an interface instead of a class.
Revamp the constructor of Vehicle to accept a Vehicle-like object rather than individual parameters (possibly via destructuring).
Overload the Vehicle constructor to accommodate a Vehicle-like object and initialize the instance accordingly.

#1 can be implemented like so:

interface Vehicle {
  id: string;
  makeId: string;
  makeName: string;
  modelName: string;
}

Proceed with the loop as mentioned above:

for (const {data} of results.data.suggestions) {
  vehicles.push(data as Vehicle); // Or opt for `data as unknown as Vehicle`
}

#2 manifests as follows:

interface VehicleLike {
  id: string;
  makeId: string;
  makeName: string;
  modelName: string;
}
export class Vehicle {
  // *** Pay attention to the { and } within the parameter list
  constructor({
    id,
    makeId,
    makeName,
    modelName
  }: VehicleLike) {
    this.id = id;
    this.makeId = makeId;
    this.makeName = makeName;
    this.modelName = modelName;
  }

  public id: string;
  public makeId: string;
  public makeName: string;
  public modelName: string;
}

Followed by:

for (const {data} of results.data.suggestions) {
  vehicles.push(data as VehicleLike); // Or perhaps try `data as unknown as VehicleLike`
}

#3 takes shape like this:

interface VehicleLike {
  id: string;
  makeId: string;
  makeName: string;
  modelName: string;
}
export class Vehicle {
  constructor(vehicle: VehicleLike);
  constructor(
    id: string,
    makeId: string,
    makeName: string,
    modelName: string,
  );
  constructor(
    x: string|VehicleLike,
    makeId?: string,
    makeName?: string,
    modelName?: string,
  ) {
    if (typeof x === "string") {
        this.id = x;
        this.makeId = makeId as string;
        this.makeName = makeName as string;
        this.modelName = modelName as string;
    } else {
        this.id = x.id;
        this.makeId = x.makeId;
        this.makeName = x.makeName;
        this.modelName = x.modelName;
    }
  }

  public id: string;
  public makeId: string;
  public makeName: string;
  public modelName: string;
}

Then proceed as per usual:

for (const {data} of results.data.suggestions) {
  vehicles.push(data as VehicleLike); // Alternatively, consider `data as unknown as VehicleLike`
}

A heads-up: If you maintain Vehicle as it currently stands without implementing any changes listed above, and should you desire, the following code snippet mirrors your existing Vehicle while reducing redundancy:

export class Vehicle {
  constructor(
   public id: string,
   public makeId: string,
   public makeName: string,
   public modelName: string,
  ) {
  }
}

This feature is provided by TypeScript for convenience.

Answer 2

The issue at hand stems from the misuse of for-in to iterate through the array entries, as that is not the intended functionality of for-in. Refer to this question's answers for further clarification; you may actually require for-of. Additionally, using a colon does not imply type assertion; instead, consider using <Vehicle>result.data or result.data as Vehicle.

for (const {data} of results.data.suggestions) {
  vehicles.push(data as Vehicle); // Alternatively, consider using `data as unknown as Vehicle`
}

Another issue arises if you follow your current approach - the objects will not be instances of Vehicle, albeit they might be compatible from a duck-typing standpoint. This works temporarily, but might create issues when adding methods to Vehicle in the future.

To tackle this, here are some potential solutions:

Transform Vehicle into an interface instead of a class.
Revamp the constructor of Vehicle to accept a Vehicle-like object rather than individual parameters (possibly via destructuring).
Overload the Vehicle constructor to accommodate a Vehicle-like object and initialize the instance accordingly.

#1 can be implemented like so:

interface Vehicle {
  id: string;
  makeId: string;
  makeName: string;
  modelName: string;
}

Proceed with the loop as mentioned above:

for (const {data} of results.data.suggestions) {
  vehicles.push(data as Vehicle); // Or opt for `data as unknown as Vehicle`
}

#2 manifests as follows:

interface VehicleLike {
  id: string;
  makeId: string;
  makeName: string;
  modelName: string;
}
export class Vehicle {
  // *** Pay attention to the { and } within the parameter list
  constructor({
    id,
    makeId,
    makeName,
    modelName
  }: VehicleLike) {
    this.id = id;
    this.makeId = makeId;
    this.makeName = makeName;
    this.modelName = modelName;
  }

  public id: string;
  public makeId: string;
  public makeName: string;
  public modelName: string;
}

Followed by:

for (const {data} of results.data.suggestions) {
  vehicles.push(data as VehicleLike); // Or perhaps try `data as unknown as VehicleLike`
}

#3 takes shape like this:

interface VehicleLike {
  id: string;
  makeId: string;
  makeName: string;
  modelName: string;
}
export class Vehicle {
  constructor(vehicle: VehicleLike);
  constructor(
    id: string,
    makeId: string,
    makeName: string,
    modelName: string,
  );
  constructor(
    x: string|VehicleLike,
    makeId?: string,
    makeName?: string,
    modelName?: string,
  ) {
    if (typeof x === "string") {
        this.id = x;
        this.makeId = makeId as string;
        this.makeName = makeName as string;
        this.modelName = modelName as string;
    } else {
        this.id = x.id;
        this.makeId = x.makeId;
        this.makeName = x.makeName;
        this.modelName = x.modelName;
    }
  }

  public id: string;
  public makeId: string;
  public makeName: string;
  public modelName: string;
}

Then proceed as per usual:

for (const {data} of results.data.suggestions) {
  vehicles.push(data as VehicleLike); // Alternatively, consider `data as unknown as VehicleLike`
}

A heads-up: If you maintain Vehicle as it currently stands without implementing any changes listed above, and should you desire, the following code snippet mirrors your existing Vehicle while reducing redundancy:

export class Vehicle {
  constructor(
   public id: string,
   public makeId: string,
   public makeName: string,
   public modelName: string,
  ) {
  }
}

This feature is provided by TypeScript for convenience.

Transform an array of generic elements into an array of TypeScript classes

Answer №1

Similar questions

A layout featuring nested buttons and links within a card element, utilizing the power of Link in NextJs

What steps should I take to deploy my Node.js (using TypeScript) backend on Vercel?

Introducing cutting-edge intellisense for Typescript Vue in VSCode, featuring automatic import functionality specifically designed for the

Obtaining a specific value from an array of objects

Creating a TypeScript class that includes an input interface with the ability to have optional

Retrieving an image from a JSON file based on its corresponding URL

What is a creative way to design a mat-radio-group without traditional radio buttons?

Once StoreModule.forFeature(...) has been included, the stored data becomes inaccessible

Wildcard routes taking precedence over other defined routes

Error message stating: "The 'MktoForms2' property is not recognized within the scope of 'Window & typeof globalThis'."

Ways to retrieve a URL from the assets folder

Maximizing the functionality of rowDoubleClick in Angular for consistent use across various components with shared ag-grid instances

Utilize the v-for Directive in Vue-Tables-2 Templates

Typescript encountering issues with boolean truthiness narrowing functionality

Dynamic tag names can be utilized with ref in TypeScript

Can we restrict type T to encompass subclasses of K, excluding K itself?

The precise Typescript type for the return value of HOCs in React that inject nested props

Error: Conversion of "2018-01-01-12:12:12:123456" to a date is not possible for the 'DatePipe' filter

What is the best approach to creating multiple dropdowns in ant-design with unique options for each?

The Relationship between Field and Parameter Types in TypeScript