The function plainToClass does not transform a Date object into a string

Question

The function plainToClass does not transform a Date object into a string

Based on the information provided in the documentation, it is recommended that a Date object be converted to a string:

It's important to note that dates will automatically be converted to strings when attempting to convert a class object to a plain object.

However, my code example using class-transformer version 0.2.3 is not behaving as expected:

class TestDate {
  @Type(() => Date)
  aDate!: Date;
}

const testDate = new TestDate();
testDate.aDate = new Date();

const result: any = classToPlain(testDate);
console.log(typeof result.aDate);

When running this code, the console output shows object instead of the expected string. Have I overlooked something?

typescript class-transformer

Answer 1

Answer №1

To elaborate on the solution provided by TmTron, I had to develop two transformers - one for each direction. These were then merged into a single decorator using this particular method:

// TransformDate.ts
import { Transform } from "class-transformer";

export default function TransformDate() {
  const toPlain = Transform((value) => (value as Date).toISOString(), {
    toPlainOnly: true,
  });

  const toClass = Transform((value) => new Date(value), {
    toClassOnly: true,
  });

  return function (target: any, key: string) {
    toPlain(target, key);
    toClass(target, key);
  };
}

Example of Usage:

// User.ts
import TransformDate from './TransformDate';

export default class User {
  id: string;
  @TransformDate()
  createdDate: Date;
  // ...
}

Answer 2

To elaborate on the solution provided by TmTron, I had to develop two transformers - one for each direction. These were then merged into a single decorator using this particular method:

// TransformDate.ts
import { Transform } from "class-transformer";

export default function TransformDate() {
  const toPlain = Transform((value) => (value as Date).toISOString(), {
    toPlainOnly: true,
  });

  const toClass = Transform((value) => new Date(value), {
    toClassOnly: true,
  });

  return function (target: any, key: string) {
    toPlain(target, key);
    toClass(target, key);
  };
}

Example of Usage:

// User.ts
import TransformDate from './TransformDate';

export default class User {
  id: string;
  @TransformDate()
  createdDate: Date;
  // ...
}

Answer 3

Answer №2

The documentation contains an error in the following sentence (refer to class-transformer#326):

It should be noted that dates will be converted to strings when attempting to convert a class object to a plain object.

To resolve this issue, you can use @Transform:

  @Transform(value => (value as Date).toISOString(), {
    toPlainOnly: true
  })

Check out the Codesandbox example with workaround

Answer 4

The documentation contains an error in the following sentence (refer to class-transformer#326):

It should be noted that dates will be converted to strings when attempting to convert a class object to a plain object.

To resolve this issue, you can use @Transform:

  @Transform(value => (value as Date).toISOString(), {
    toPlainOnly: true
  })

Check out the Codesandbox example with workaround

The function plainToClass does not transform a Date object into a string

Answer №1

Answer №2

Similar questions

Variable type linked to interface content type

What is the functionality of mergeMap in handling errors?

Maintaining the generic types in mapped types in TypeScript

Is it possible that Typescript does not use type-guard to check for undefined when verifying the truthiness of a variable?

Utilizing Typescript to define key-value pairs within a structured form

Ionic is throwing a reference error stating that __importDefault is not defined

Handling functions in Ant Design Select component with TypeScript types

Working with Yarn and Webpack: Incorporating a TypeScript .ts file from an external Node directory not controlled by Yarn/Webpack

Is it possible to programmatically include a getter method to a class in JavaScript or TypeScript?

Compiled TypeScript files are missing require statements for imported components

The interface does not allow properties to be assigned as string indexes

How to simulate a typescript class using vitest

Building a versatile component library for Next.js using TypeScript and Tailwind CSS: Step-by-step guide

Ways to retrieve the "this" keyword in a <script setup> Vue Single File Component

Angular TypeScript test checking file size with Jasmine

Array still has elements, but the browser console is displaying a length of 0 [React TypeScript - API request]

Is it necessary to manually validate parameters in TypeScript when developing a library?

Looking up the Vue.js type definitions in TypeScript

Removing a key from an index signature in Typescript - a step-by-step guide

The browser has overridden the content length