Как установить vue-i18n + typescript?

Question

[resibe]

Здравствуйте, я создал пустой проект vue 3 с TypeScript и запустил vue add i18n
После чего получаю

This dependency was not found:
* vue-i18n in ./src/i18n.ts
To install it, you can run: npm install --save vue-i18n

После выполнения yarn add vue-i18n
Получаю

This dependency was not found:

* vue-i18n in ./src/i18n.ts

To install it, you can run: npm install --save vue-i18n
ERROR in src/i18n.ts:1:10
TS2614: Module '"../node_modules/vue-i18n/types"' has no exported member 'createI18n'. Did you mean to use 'import createI18n from "../node_modules/vue-i18n/types"' instead?
  > 1 | import { createI18n, LocaleMessages, VueMessageType } from "vue-i18n";
      |          ^^^^^^^^^^
    2 |
    3 | /**
    4 |  * Load locale messages

ERROR in src/i18n.ts:1:38
TS2614: Module '"../node_modules/vue-i18n/types"' has no exported member 'VueMessageType'. Did you mean to use 'import VueMessageType from "../node_modules/vue-i18n/types"' instead?
  > 1 | import { createI18n, LocaleMessages, VueMessageType } from "vue-i18n";
      |                                      ^^^^^^^^^^^^^^
    2 |
    3 | /**
    4 |  * Load locale messages

ERROR in src/i18n.ts:9:32
TS2315: Type 'LocaleMessages' is not generic.
     7 |  * See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
     8 |  */
  >  9 | function loadLocaleMessages(): LocaleMessages<VueMessageType> {
       |                                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    10 |   const locales = require.context(
    11 |     "./locales",
    12 |     true,

ERROR in src/i18n.ts:15:19
TS2315: Type 'LocaleMessages' is not generic.
    13 |     /[A-Za-z0-9-_,\s]+\.json$/i
    14 |   );
  > 15 |   const messages: LocaleMessages<VueMessageType> = {};
       |                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    16 |   locales.keys().forEach((key) => {
    17 |     const matched = key.match(/([A-Za-z0-9-_]+)\./i);
    18 |     if (matched && matched.length > 1) {

Что я сделал не правильно, без TS все работает
Странно что сам модуль vscode видит

Answer 1

[Aetae]

https://vue-i18n.intlify.dev/installation.html#es-...
yarn add vue-i18n@next

Comments

[resibe]

Спасибо, я пересоздал проект и использовал
Vue create (с Vue 3+ typescript)
vue add i18n
yarn add vue-i18n@next
Но теперь

ERROR in src/i18n.ts:30:3
TS2769: No overload matches this call.
  Overload 1 of 2, '(options: I18nOptions<{ message: Record<string, LocaleMessageValue<VueMessageType>>; datetime: DateTimeFormat; number: NumberFormat; }, string, ComposerOptions<...> | VueI18nOptions<...>>, LegacyVueI18n?: any):
I18n<...>', gave the following error.
    Type 'LocaleRecord<[string], VueMessageType>' is not assignable to type '{ [x: string]: Record<string, LocaleMessageValue<VueMessageType>>; }'.
      Index signatures are incompatible.
        Type 'VueMessageType' is not assignable to type 'Record<string, LocaleMessageValue<VueMessageType>>'.
          Type 'string' is not assignable to type 'Record<string, LocaleMessageValue<VueMessageType>>'.
  Overload 2 of 2, '(options: I18nOptions<{ message: Record<string, LocaleMessageValue<VueMessageType>>; datetime: DateTimeFormat; number: NumberFormat; }, { ...; }, ComposerOptions<...> | VueI18nOptions<...>>, LegacyVueI18n?: any): I18n<...>', gave the following error.
    Property '"en-US"' is missing in type 'LocaleRecord<[string], VueMessageType>' but required in type '{ "en-US": Record<string, LocaleMessageValue<VueMessageType>>; }'.
    28 |   locale: process.env.VUE_APP_I18N_LOCALE || "en",
    29 |   fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en",
  > 30 |   messages: loadLocaleMessages(),
       |   ^^^^^^^^
    31 | });
    32 |

Сам i18n.ts

import { createI18n, LocaleMessages, VueMessageType } from "vue-i18n";

function loadLocaleMessages(): LocaleMessages<VueMessageType> {
  const locales = require.context(
    "./locales",
    true,
    /[A-Za-z0-9-_,\s]+\.json$/i
  );
  const messages: LocaleMessages<VueMessageType> = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key).default;
    }
  });
  return messages;
}

export default createI18n({
  legacy: false,
  locale: process.env.VUE_APP_I18N_LOCALE || "en",
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en",
  messages: loadLocaleMessages(),
});

[Aetae]

resibe, попробуй сам разобраться, всё написано в ошибке. Если не сможешь - завтра отвечу.)