Typescript: Type 'string' is not assignable to type '"numeric" | "2-digit"' in Date::toLocaleDateString()

Question

I have recently been alerted to an "error" by Visual Studio Code in the following snippet:

someDateObject.toLocaleDateString('de-DE', Travel.dateOptions));
someDateObject.toLocaleDateString('de-DE', Travel.dateOptions));

Where Travel.dateOptions is defined as such:

public static dateOptions = { year: 'numeric', month: '2-digit', day: '2-digit' };

This has been working fine for the better part of the last 2 years, but upon opening the class inside VSC recently, it displayed following error for Travel.dateOptions:

Argument of type '{ year: string; month: string; day: string; }' is not assignable to parameter of 
type 'DateTimeFormatOptions'.
Types of property 'year' are incompatible.
Type 'string' is not assignable to type '"numeric" | "2-digit"'. ts(2345)

I am dead confused as to why. Is this possibly a bug with VSC? The code seems to work fine (and has worked fine the entire time) once compiled - and according to the documentation for Date::toLocaleDateString() what I'm doing here seems perfectly valid.

Any ideas?

Lazar Ljubenović · Accepted Answer · 2021-03-11 21:25:25Z

80

When you initialize a class property with a literal such as public foo = { bar: 'a' }, its type becomes { bar: string }, even if you declare it as readonly. TypeScript on purpose doesn't make the type too strict ({ bar: 'a' }).

Method toLocaleDateString accepts an object whose key year must be of type 'numeric' or '2-digit', but yours is of type string.

To make the type of the initialized object more specific, use as const:

public static dateOptions = { year: 'numeric', month: '2-digit', day: '2-digit' } as const;

answered Mar 11, 2021 at 21:25

Lazar Ljubenović

19.9k10 gold badges58 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John Sharp · Accepted Answer · 2021-08-25 15:34:52Z

39

I've just hit the same problem, rather than redeclare the const as const (which feels like a code smell) I forced the variable type:

  formatDT(sourceDate: Date) {
    const options: Intl.DateTimeFormatOptions = { month: "long", day: 'numeric', year: 'numeric', hour: '2-digit', minute: "2-digit" };
    return new Intl.DateTimeFormat("en-GB", options).format(new Date(sourceDate));
  }

answered Aug 25, 2021 at 15:34

John Sharp

7828 silver badges7 bronze badges

3 Comments

Cleinilton Fernandes Over a year ago

This makes more sense, it worked for me.

Lazar Ljubenović Over a year ago

Why do you think as const is a code smell? You're also basically using as Int.DateTimeFormatOptions, just with a different syntax.

Jamaluddin Rumi Over a year ago

👍 very OOP 😃 🎉

Matias Sebastiao · Accepted Answer · 2022-01-23 16:01:31Z

23

Following your code example you must explicitly declare the DateTimeFormatOptions data type for dateOptions

const dateOptions: Intl.DateTimeFormatOptions = {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
};

export const Travel = { dateOptions };

const someDateObject = new Date();

console.log(someDateObject.toLocaleDateString('de-DE', Travel.dateOptions));

answered Jan 23, 2022 at 16:01

Matias Sebastiao

2,0781 gold badge16 silver badges14 bronze badges

Comments

vimuth · Accepted Answer · 2022-08-05 08:36:31Z

8

Include Intl.DateTimeFormatOptions for the declaration.

const options :Intl.DateTimeFormatOptions = { 
    year: 'numeric', 
    month: '2-digit', 
    day: 'numeric', 
    hour: '2-digit', 
    minute: '2-digit', 
    hour12: false 
};

edited Aug 5, 2022 at 8:36

vimuth

5,87355 gold badges98 silver badges128 bronze badges

answered Aug 2, 2022 at 14:24

Ravi U

1011 silver badge5 bronze badges

1 Comment

ahuemmer Over a year ago

Please note that the same approach has been shown by Matias before.

Collectives™ on Stack Overflow

Typescript: Type 'string' is not assignable to type '"numeric" | "2-digit"' in Date::toLocaleDateString()

4 Answers 4

Comments

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related