The change made to the messages type in @intlify/unplugin-vue-i18n@0.12.3 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; } | 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; }' 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>.
Reporting a bug?
The change made to the
messages
type in@intlify/unplugin-vue-i18n@0.12.3
is a good idea, but it doesn't work out of the box for our project.The problem is at
createI18n
:Full TS error
``` src/i18n.ts:24:3 - error TS2322: Type '{ [x: string]: LocaleMessageThe
LocaleCode
is a union of the 30+ locale codes in the project ("ar-SA" | "bg-BG" | "cs-CZ" | ...
) andMessageSchema
is just the type of our source JSON file as an object.It seems to me that TypeScript expects
messages
to be aRecord<LocaleCode, MessageSchema>
.As a workaround, I added this type casting:
Expected behavior
I should be able to use imported
@intlify/unplugin-vue-i18n/messages
as themessages
in thecreateI18n
options with little to no effortReproduction
I'll provide one if needed, but I've ran out of time for today.
Issue Package
unplugin-vue-i18n
System Info
Screenshot
No response
Additional context
No response
Validations