TS error unplugin-vue-i18n 0.12.3 in createI18n

[JoostKersjes]

Reporting a bug?

The change made to the messages type in @intlify/[email protected] is a good idea, but it doesn't work out of the box for our project.

The problem is at createI18n:

import type { LocaleCode } from "@/types/localeCode";
import enGB from "@/locales/en-GB.json";
import messages from "@intlify/unplugin-vue-i18n/messages";

// ...

type MessageSchema = typeof enGB;

export default createI18n<[MessageSchema], LocaleCode, false>({
  messages: messages, // error TS2322
  legacy: false,
  locale: localStorage.getItem("locale") || "en-GB",
  fallbackLocale: "en-GB",
});

Full TS error

src/i18n.ts:24:3 - error TS2322: Type '{ [x: string]: LocaleMessage<VueMessageType>; } | undefined' is not assignable to type '{ "ar-SA": { alt: { fallbackGraphic: string; yourAvatar: string; }; answers: { dropZone: { remaining: string; }; }; appLoader: { pleaseWait: string; loading: string; }; aria: { answers: { answer: string; correct: string; ... 4 more ...; term: string; }; ... 5 more ...; streak: { ...; }; }; ... 29 more ...; wiki: { ....'.
  Type '{ [x: string]: LocaleMessage<VueMessageType>; }' is missing the following properties from type '{ "ar-SA": { alt: { fallbackGraphic: string; yourAvatar: string; }; answers: { dropZone: { remaining: string; }; }; appLoader: { pleaseWait: string; loading: string; }; aria: { answers: { answer: string; correct: string; ... 4 more ...; term: string; }; ... 5 more ...; streak: { ...; }; }; ... 29 more ...; wiki: { ....': "ar-SA", "bg-BG", "cs-CZ", "de-DE", and 30 more.

24   messages: messages,
     ~~~~~~~~

  node_modules/vue-i18n/dist/vue-i18n.d.ts:751:5
    751     messages?: {
            ~~~~~~~~
    The expected type comes from property 'messages' which is declared here on type 'I18nOptions<{ message: { alt: { fallbackGraphic: string; yourAvatar: string; }; answers: { dropZone: { remaining: string; }; }; appLoader: { pleaseWait: string; loading: string; }; aria: { answers: { answer: string; ... 5 more ...; term: string; }; ... 5 more ...; streak: { ...; }; }; ... 29 more ...; wiki: { ...; }...'

The LocaleCode is a union of the 30+ locale codes in the project ("ar-SA" | "bg-BG" | "cs-CZ" | ...) and MessageSchema is just the type of our source JSON file as an object.

It seems to me that TypeScript expects messages to be a Record<LocaleCode, MessageSchema>.

As a workaround, I added this type casting:

export default createI18n<[MessageSchema], LocaleCode, false>({
  messages: messages as Record<LocaleCode, MessageSchema>,
  legacy: false,
  locale: localStorage.getItem("locale") || "en-GB",
  fallbackLocale: "en-GB",
});

Expected behavior

I should be able to use imported @intlify/unplugin-vue-i18n/messages as the messages in the createI18n options with little to no effort

Reproduction

I'll provide one if needed, but I've ran out of time for today.

Issue Package

unplugin-vue-i18n

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-11370H @ 3.30GHz
    Memory: 8.97 GB / 15.30 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.4.0 - ~/.nvm/versions/node/v20.4.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.7.2 - ~/.nvm/versions/node/v20.4.0/bin/npm
    pnpm: 8.6.12 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chromium: 116.0.5845.96
  npmPackages:
    vite: 4.4.9 => 4.4.9 
    vue: 3.3.4 => 3.3.4 
    vue-i18n: 9.2.2 => 9.2.2

Screenshot

No response

Additional context

No response

Validations

• Read the Contributing Guidelines.
• Read the README
• 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.

[Shinigami92]

I pinned 0.12.2 for now

[morelearn1990]

Any progress?