Typescript Date Issue (VueJS)

Question

Having a very odd issue with Typescript when creating a new Date.

<template>
<div> Testing Date</div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "Test",
  methods: {
    checkDate() {
      console.log("...checkDate...");
      const now = new Date();
      console.log(now);
    }
  },
  mounted() {
    this.checkDate();
  }
});
</script>

<style scoped></style>

I'm getting the error:

This expression is not constructable. Type 'Date' has no construct signatures.

Is that not a valid means of creating a new instance of a Date object?

Do you still get the error if you remove the : Date? It's slightly redundant to type a variable if you are going to immediately assign a value to it. Typescript should be able to infer its style at that point from the assigned value. — Taplar
– Taplar, Commented Apr 24, 2020 at 16:08
What types do you have configured? It works in typescriptlang.org/play/… — jonrsharpe
– jonrsharpe, Commented Apr 24, 2020 at 16:08
Did you redefine or modify the Date interface? Do you have more code you can share? — Hunter McMillen
– Hunter McMillen, Commented Apr 24, 2020 at 16:08
I was going to make the same point. @djneely you shouldn't be typing something when you are assigning a value to it. That's why you have type inference for. — Renan Cidale
– Renan Cidale, Commented Apr 24, 2020 at 16:09

djneely · Accepted Answer · 2020-04-29 16:22:12Z

For what its worth and those that helped here is what I found comparing the new project with the old.

In the old project, if I follow the definition of Date to where it was defined I was directed to the the file: node_modules/typescript/lib/lib.es5.d.ts and the definition was:

interface DateConstructor {
    new(): Date;
    new(value: number | string): Date;
    new(year: number, month: number, date?: number, hours?: number, minutes?: number, seconds?: number, ms?: number): Date;
    (): string;
    readonly prototype: Date;
    /**
     * Parses a string containing a date, and returns the number of milliseconds between that date and midnight, January 1, 1970.
     * @param s A date string
     */
    parse(s: string): number;
    /**
     * Returns the number of milliseconds between midnight, January 1, 1970 Universal Coordinated Time (UTC) (or GMT) and the specified date.
     * @param year The full year designation is required for cross-century date accuracy. If year is between 0 and 99 is used, then year is assumed to be 1900 + year.
     * @param month The month as a number between 0 and 11 (January to December).
     * @param date The date as a number between 1 and 31.
     * @param hours Must be supplied if minutes is supplied. A number from 0 to 23 (midnight to 11pm) that specifies the hour.
     * @param minutes Must be supplied if seconds is supplied. A number from 0 to 59 that specifies the minutes.
     * @param seconds Must be supplied if milliseconds is supplied. A number from 0 to 59 that specifies the seconds.
     * @param ms A number from 0 to 999 that specifies the milliseconds.
     */
    UTC(year: number, month: number, date?: number, hours?: number, minutes?: number, seconds?: number, ms?: number): number;
    now(): number;
}

declare var Date: Date;

In the above code block declare var Date: Date; appears to be the culprit.

In the new project if I follow the Date defintion I'm sent to: node_modules/typescript/lib/lib.es5.d.ts (exact same file) but the definition for Date is now:

interface DateConstructor {
    new(): Date;
    new(value: number | string): Date;
    new(year: number, month: number, date?: number, hours?: number, minutes?: number, seconds?: number, ms?: number): Date;
    (): string;
    readonly prototype: Date;
    /**
     * Parses a string containing a date, and returns the number of milliseconds between that date and midnight, January 1, 1970.
     * @param s A date string
     */
    parse(s: string): number;
    /**
     * Returns the number of milliseconds between midnight, January 1, 1970 Universal Coordinated Time (UTC) (or GMT) and the specified date.
     * @param year The full year designation is required for cross-century date accuracy. If year is between 0 and 99 is used, then year is assumed to be 1900 + year.
     * @param month The month as a number between 0 and 11 (January to December).
     * @param date The date as a number between 1 and 31.
     * @param hours Must be supplied if minutes is supplied. A number from 0 to 23 (midnight to 11pm) that specifies the hour.
     * @param minutes Must be supplied if seconds is supplied. A number from 0 to 59 that specifies the minutes.
     * @param seconds Must be supplied if milliseconds is supplied. A number from 0 to 59 that specifies the seconds.
     * @param ms A number from 0 to 999 that specifies the milliseconds.
     */
    UTC(year: number, month: number, date?: number, hours?: number, minutes?: number, seconds?: number, ms?: number): number;
    now(): number;
}

declare var Date: DateConstructor;

The DateConstructor interface appears to be the same but the declare var Date: DateConstructor; appears to be the correct implementation.

So, again, no idea what happened with this. I do not play around in the core files so not sure how this file got 'corrupted?'. Thanks again for everyone who jumped in on this so quickly.

You should highlight the differences, I can only see a difference in the last line. It's also not clear which is correct or should be used.

Collectives™ on Stack Overflow

Typescript Date Issue (VueJS)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related