slow mist
I need help with asigning the correct typing to use the option parameter for useTranslation of i18next.
this is i18next.ts file with the i18nReady function which is called from the main.ts on app startup
import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import { resources } from "./resources";
export const defaultNS = "home";
export const i18nReady = (async () => {
const cfg = await window.pbs.loadConfig();
const lang = cfg.success ? cfg.content.language : "en";
await i18next
.use(initReactI18next)
.init({
resources,
lng: lang,
fallbackLng: 'en',
ns: Object.keys(resources.en),
defaultNS,
interpolation: { escapeValue: false }
});
return i18next;
})
export default i18next;```
this is the resouces.ts where I defined all the namespaces I want to use in my application:
```typescript
import abilities from "./locales/en/abilities.json";
import berryplants from "./locales/en/berryplants.json";
import buttons from "./locales/en/buttons.json";
import common from "./locales/en/common.json";
import encounters from "./locales/en/encounters.json";
import footer from "./locales/en/footer.json";
import forms from "./locales/en/forms.json";
import home from "./locales/en/home.json";
import imports from "./locales/en/imports.json";
import items from "./locales/en/items.json";
import mapmetadata from "./locales/en/mapmetadata.json";
import modals from "./locales/en/modals.json";
import moves from "./locales/en/moves.json";
import nav from "./locales/en/nav.json";
import pokemon from "./locales/en/pokemon.json";
import settings from "./locales/en/settings.json";
import tabs from "./locales/en/tabs.json";
import toasts from "./locales/en/toasts.json";
import townmap from "./locales/en/townmap.json";
import trainers from "./locales/en/trainers.json";
import trainertypes from "./locales/en/trainertypes.json";
import types from "./locales/en/types.json";
export const resources = {
en: {
abilities,
berryplants,
buttons,
common,
encounters,
footer,
forms,
home,
imports,
items,
mapmetadata,
modals,
moves,
nav,
pokemon,
settings,
tabs,
toasts,
townmap,
trainers,
trainertypes,
types
}
} as const;
export type AvailableNamespaces = keyof typeof resources["en"];```
This is the NavItem interface i'm using for the navItem array.
```typescript
export type TranslationKey = string;
export interface NavItem {
headerKey: TranslationKey;
nameKey: TranslationKey;
url: string;
disabled?: boolean;
}```
then inside my sidebar component:
```typescript
const navItems: NavItem[] = [
{
headerKey: t('home:header'),
nameKey: t('nav:home'),
url: "/"
},
{
headerKey: t('common:header'),
nameKey: t('nav:abilities', { name: t('abilities:header.plural')}),
url: "/abilities-v2"
}
];```
but for the nameKey value of the second element, VS code is showing the error shown in the screenshot. Can anyone help me fix this or tell me how to use the options parameter? Or should i not use the {{ name }} syntax and add extra lines for each that need it in the namespace files? Thank you in advance
sick idol
paper wing
