TS Error with datetimeFormats - TS2769: No overload matches this call.

Reporting a bug?

TypeScript error in IDE on datetimeFormats, but application compiles normally and working properly.

Editor underlines the key datetimeFormats with red.

import messageDictionary from '@/i18n/messageDictionary'
import dateTimeFormats from '@/i18n/dateTimeFormats'

const i18n = createI18n({
  globalInjection: true,
  legacy: false,
  locale: 'ru',
  fallbackLocale: 'ru',
  availableLocales: ['ru', 'kz', 'en'],
  messages: messageDictionary(),
  datetimeFormats: dateTimeFormats()
})

Error details: TS2769: No overload matches this call.   Overload 1 of 2, ‘(options: I18nOptions<{ message: LocaleMessage<VueMessageType>; datetime: DateTimeFormat; number: NumberFormat; }, string, ComposerOptions<{ …; }, … 9 more …, NumberFormats<…>> | VueI18nOptions<…>>, LegacyVueI18n?: any): I18n<…>’, gave the following error.     Type ‘{ en: { short: { year: string; month: string; day: string; }; long: { year: string; month: string; day: string; weekday: string; hour: string; minute: string; hour12: boolean; }; }; ru: { short: { year: string; month: string; day: string; }; long: { …; }; }; kz: { …; }; }’ is not assignable to type ‘{ [x: string]: DateTimeFormat; }’.       Property ‘en’ is incompatible with index signature.         Type ‘{ short: { year: string; month: string; day: string; }; long: { year: string; month: string; day: string; weekday: string; hour: string; minute: string; hour12: boolean; }; }’ is not assignable to type ‘DateTimeFormat’.           Property ‘short’ is incompatible with index signature.             Type ‘{ year: string; month: string; day: string; }’ is not assignable to type ‘DateTimeFormatOptions’.               Type ‘{ year: string; month: string; day: string; }’ is not assignable to type ‘SpecificDateTimeFormatOptions’.                 Types of property ‘year’ are incompatible.                   Type ‘string’ is not assignable to type ‘DateTimeDigital | undefined’. vue-i18n.d.ts(731, 5): The expected type comes from property ‘datetimeFormats’ which is declared here on type ‘I18nOptions<{ message: LocaleMessage<VueMessageType>; datetime: DateTimeFormat; number: NumberFormat; }, string, ComposerOptions<{ message: LocaleMessage<…>; datetime: DateTimeFormat; number: NumberFormat; }, … 9 more …, NumberFormats<…>> | VueI18nOptions<…>>’

Expected behavior

No error messages from TS.

Reproduction

import { createApp } from 'vue'
import App from './App.vue'

import { createI18n } from 'vue-i18n'
import messageDictionary from '@/i18n/messageDictionary'
import dateTimeFormats from '@/i18n/dateTimeFormats'
const i18n = createI18n({
  globalInjection: true,
  legacy: false,
  locale: 'ru',
  fallbackLocale: 'ru',
  availableLocales: ['ru', 'kz', 'en'],
  messages: messageDictionary(),
  datetimeFormats: dateTimeFormats()
})

const app = createApp(App)
app.use(i18n).mount('#app')

System Info

Standard Vite vue-ts installation. MacOS. PHPStorm.

Most recent vue and vue-i18n versions.

Screenshot

No response

Additional context

No response

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion

[BlueBazze]

I came across this error as well. Following the documentation at https://vue-i18n.intlify.dev/guide/essentials/datetime.html#basic-usage

When inserting the datetimeFormats object directly in createI18n Like so

const i18n = createI18n({
  datetimeFormats: {
  "en-US": {
    short: {
      year: "numeric",
      month: "short",
      day: "numeric",
    },
    long: {
      year: "numeric",
      month: "short",
      day: "numeric",
      weekday: "short",
      hour: "numeric",
      minute: "numeric",
    },
  }
}
})

Works perfectly without any typescript errors. But following the documentation and having a const for datetimeFormats throws the error RollingTL gave above.

To fix the type error. Import the type I18nOptions and declare your datetimeFormat as so

const datetimeFormats: I18nOptions["datetimeFormats"] = {
  "en-US": {

And the error should disapear. Maybe the documentation for v9 could be updated to include a section for typescript that informs other users of this.

[savifon]

I came across this error as well. Following the documentation at https://vue-i18n.intlify.dev/guide/essentials/datetime.html#basic-usage

When inserting the datetimeFormats object directly in createI18n Like so

const i18n = createI18n({
  datetimeFormats: {
  "en-US": {
    short: {
      year: "numeric",
      month: "short",
      day: "numeric",
    },
    long: {
      year: "numeric",
      month: "short",
      day: "numeric",
      weekday: "short",
      hour: "numeric",
      minute: "numeric",
    },
  }
}
})

Works perfectly without any typescript errors. But following the documentation and having a const for datetimeFormats throws the error RollingTL gave above.

To fix the type error. Import the type I18nOptions and declare your datetimeFormat as so

const datetimeFormats: I18nOptions["datetimeFormats"] = {
  "en-US": {

And the error should disapear. Maybe the documentation for v9 could be updated to include a section for typescript that informs other users of this.

Thank you! It worked perfectly!