intlify / intlify/bundle-tools
TS error unplugin-vue-i18n 0.12.3 in createI18n
- Dominant language
- TypeScript
- Stars
- 270
- Forks
- 46
- PR merge metrics
- No merged PRs in 30d
Description
### 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`:
```typescript
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`.
As a workaround, I added this type casting:
```typescript
export default createI18n<[MessageSchema], LocaleCode, false>({
messages: messages as Record,
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
```shell
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
- [X] Read the [Contributing Guidelines](https://github.com/intlify/bundle-tools/blob/main/.github/contributing.md).
- [X] Read the README
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/intlify/bundle-tools/discussions).
Contributor guide
Assessment
This issue has not been assessed yet.