Converting a TypeScript class to a plain JavaScript object using class-transformer

Question

Converting a TypeScript class to a plain JavaScript object using class-transformer

I have a few instances of TypeScript classes in my Angular app that I need to save to Firebase. However, Firebase does not support custom classes, so I stumbled upon this library: https://github.com/typestack/class-transformer which seems to be a good fit for my needs.

Now, I am working on creating my object and trying to convert it.

Here is an example of my object:

export class Trip {
  id: string;
  owner: string;
  name: string;
  @Type(() => Date)
  startDate: Date;
  @Type(() => Date)
  endDate: Date | undefined;
  coverImageUrl: string;

  @Type(() => Itinerary)
  itinerary: Itinerary;

  constructor() {
    this.itinerary = new Itinerary();
  }
}

//other class definitions...

I am currently creating a "trip" instance and attempting to convert it:

const trip = new Trip();
trip.owner= firebase.auth().currentUser.uid;
trip.name= action.name;
trip.startDate = action.startDate,
trip.endDate = action.endDate;
console.log(trip);
const converted = classToPlain(trip)

However, when I try to convert it, I encounter the following error:

ERROR TypeError: Cannot read the property 'constructor' of undefined
    // stack trace continues...

The object I just created: https://i.sstatic.net/GG3FC.png

I suspect that either my object is in an incorrect state or there is something poorly defined, but I'm having trouble pinpointing the issue.

javascript typescript class-transformer

Answer 1

Answer №1

The issue originates from the definition of Itinerary, particularly in the line of code this.steps = Step[0];. This sets the variable to undefined, which was most likely not intentional. The class-transformer library is capable of handling the property steps as an empty array, an array of steps, or even if it does not exist initially. However, it crashes when the value is specifically set to undefined.

export class Itinerary {
  @Type(() => ItineraryStats)
  stats: ItineraryStats;
  @Type(() => Step, {
    discriminator: {
      property: '__type',
      subTypes: [
        { value: ActivityStep, name: 'ActivityStep' },
        { value: NightStep, name: 'NightStep' },
        { value: PointOfInterest, name: 'PointOfInterest' },
        { value: TravelStep, name: 'TravelStep' },
      ],
    },
  })
  steps: Step[];

  constructor() {
    // Step[0] causes the crash, because its undefined, either dont set it or 
    // set it to this.steps = []
    this.steps = Step[0]; 
    this.stats = new ItineraryStats();
  }
}

Further details: As discriminators are used on the property steps, the corresponding logic activated and compared the constructors specified under subTypes with the constructor of the current value to determine the correct subtype name:

    if (this.transformationType === TransformationType.CLASS_TO_PLAIN) {
      subValue[targetType.options.discriminator.property] = targetType.options.discriminator.subTypes.find(
        subType => subType.value === subValue.constructor
      ).name;
    }

link to github

Step[0] being undefined eventually caused the line subValue.constructor to crash.

Answer 2

The issue originates from the definition of Itinerary, particularly in the line of code this.steps = Step[0];. This sets the variable to undefined, which was most likely not intentional. The class-transformer library is capable of handling the property steps as an empty array, an array of steps, or even if it does not exist initially. However, it crashes when the value is specifically set to undefined.

export class Itinerary {
  @Type(() => ItineraryStats)
  stats: ItineraryStats;
  @Type(() => Step, {
    discriminator: {
      property: '__type',
      subTypes: [
        { value: ActivityStep, name: 'ActivityStep' },
        { value: NightStep, name: 'NightStep' },
        { value: PointOfInterest, name: 'PointOfInterest' },
        { value: TravelStep, name: 'TravelStep' },
      ],
    },
  })
  steps: Step[];

  constructor() {
    // Step[0] causes the crash, because its undefined, either dont set it or 
    // set it to this.steps = []
    this.steps = Step[0]; 
    this.stats = new ItineraryStats();
  }
}

Further details: As discriminators are used on the property steps, the corresponding logic activated and compared the constructors specified under subTypes with the constructor of the current value to determine the correct subtype name:

    if (this.transformationType === TransformationType.CLASS_TO_PLAIN) {
      subValue[targetType.options.discriminator.property] = targetType.options.discriminator.subTypes.find(
        subType => subType.value === subValue.constructor
      ).name;
    }

link to github

Step[0] being undefined eventually caused the line subValue.constructor to crash.

Converting a TypeScript class to a plain JavaScript object using class-transformer

Answer №1

Similar questions

Unable to decrease the width of a div element in Vuetify and Nuxt

Go back to the top by clicking on the image

Getting a file object with v-file-input in Nuxt.js

The inputs for Node express middleware are unclear and lack definition

conceal specific language options within the dropdown selection box

I need to figure out a way to validate form data dynamically as the number of fields constantly changes. My form data is being sent via Ajax

Issue with Ajax post redirection back to original page

The Date Picker pops up automatically upon opening the page but this feature is only available on IE10

Is there a way to access the sqlite3 database file in electron during production?

Javascript encountered an error upon attempting to return from the main function

Utilizing long polling technique with jQuery/AJAX on the server end

What is the best way to simulate a CSS import for a jest/enzyme test?

Accessing the current state outside of a component using React Context

Maximizing the efficiency of React.js: Strategies to avoid unnecessary renders when adding a new form field on a webpage

What is the best way to prevent the body from scrolling when scrolling on a fixed div without making the body's scroll bar disappear?

Accessing the URL causes malfunctioning of the dynamic routing in Angular 2

Create an unordered Vue component object

The issue at hand involves Javascript, Ajax, latte, and Presenter where there seems to be a restriction on using GET requests for a file located

Using jQuery to iterate over a multi-dimensional array and showing the child elements for each parent array

What could be causing NPM to generate an HTTP Error 400 when trying to publish a package?