Extending the functionality of constructors in a Date subclass

Question

Extending the functionality of constructors in a Date subclass

Wanting to create a custom Date subclass with an overridden constructor:

export class MyDate extends Date {
  constructor(str: string) {
    super(str);
  }
}

However, when attempting to instantiate a MyDate object, it fails :

var myDate = new MyDate("2016-10-20T12:30:00+0200");
console.log(myDate.toDateString()); // throws an error, myDate is incorrect

An error message displays:

TypeError: Method Date.prototype.toDateString called on incompatible receiver [object Object]

.

Seeking a solution to override the Date constructor. Is this achievable?

typescript

Answer 1

Answer №1

After reviewing this inquiry along with the approved response, it appears that subclassing Date is not permitted in ES5. The provided ES6 code runs smoothly in Chrome due to Chrome's native support for ES6 classes (with removal of type annotations from the original code):

class MyDate extends Date {
  constructor(str) {
    super(str);
  }
}

var myDate = new MyDate("2016-10-20T12:30:00+0200");
console.log(myDate.toDateString());

If compatibility only needs to be ensured in environments supporting ES6 classes, adjust TypeScript's --target compiler option to 'es6'. Otherwise, alternative solutions will be necessary.

One plausible workaround involves defining MyDate so that it contains a Date as a member variable. For instance:

class MyDate {

  private date: Date;

  constructor(str: string) {
    this.date = new Date(str);
  }

  toDateString(): string {
    return this.date.toDateString();
  }
}

Answer 2

After reviewing this inquiry along with the approved response, it appears that subclassing Date is not permitted in ES5. The provided ES6 code runs smoothly in Chrome due to Chrome's native support for ES6 classes (with removal of type annotations from the original code):

class MyDate extends Date {
  constructor(str) {
    super(str);
  }
}

var myDate = new MyDate("2016-10-20T12:30:00+0200");
console.log(myDate.toDateString());

If compatibility only needs to be ensured in environments supporting ES6 classes, adjust TypeScript's --target compiler option to 'es6'. Otherwise, alternative solutions will be necessary.

One plausible workaround involves defining MyDate so that it contains a Date as a member variable. For instance:

class MyDate {

  private date: Date;

  constructor(str: string) {
    this.date = new Date(str);
  }

  toDateString(): string {
    return this.date.toDateString();
  }
}

Extending the functionality of constructors in a Date subclass

Answer №1

Similar questions

I'm curious, which ref tag should I utilize for draft.js?

Enhance the express Response type and then export my updated type as a distinct module

Observable subscription does not result in updating the value

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

Webclipse is having trouble locating a module, despite the fact that Angular CLI is able to

Using the slice pipe on the data for a child component property is resulting in endless calls to the @Input set method

Guide to releasing a NestJs library on npm using the nrwl/nx framework

Insert the template's content into my inline component

What steps can be taken to address the InvalidPipeArgument error when working with dates?

Next.js production build encountering an infinite loading error

Expanding the functionality of the Typescript number data type

Updating the color of specific buttons using ngFor in Typescript and Angular 8

What is the best method for excluding the sys object from a Contentful CDA response?

Using @Input to pass data from a parent component to a

Reset Angular Material autocomplete upon selection

Utilizing an array for substituting sections of a string: a guide

Tips for displaying bar chart labels effectively with ChartJS

Learn how to effortlessly move a file into a drag-and-drop area on a web page with Playwright

Utilizing TypeScript Interfaces for Recursive JSON Structures

Clicking on an empty space within the Angular project will trigger a screen update when new data is retrieved from