How to override react-admin existing translation-CodePudding

App.tsx from demo

import englishMessages from './i18n/en';
const i18nProvider = polyglotI18nProvider(locale => {
    if (locale === 'fr') {
        return import('./i18n/fr').then(messages => messages.default);
    }

    // Always fallback on english
    return englishMessages;
}, 'en');

const App = () => {
    return (
        <Admin
           ....
            i18nProvider={i18nProvider}
          ....

en.ts

const customEnglishMessages: TranslationMessages = {
    ...englishMessages,
    pos: {
        search: 'Search',
        ....

packages>ra-language-english>src>index.ts

const englishMessages: TranslationMessages = {
    ra: {
    action:{...},
    boolean{...},
    page: {
          create: 'Create %{name}',
          dashboard: 'Dashboard',

How I can I rewrite existing translation 'ra.page.dashboard' in en.ts?

In case I add the same structure after destructuring englishMessage

export const messages = {
    ...englishMessages,
    ra: {
        page: {
            dashboard: 'test edit dashboard'
        }
    }
};

I catch an error

ERROR in [at-loader] ./src/client/components/App/index.tsx:33:43
    TS2345: Argument of type '(locale: string) => { ra: { page: { dashboard: string; }; }; } | Promise<TranslationMessages | { resources: { posts: { name: string; fields: { average_note: string; body: string; comments: string; ... 12 more ...; authors: string; }; }; comments: { ...; }; users: { ...; }; }; ... 4 more ...; simple: { ...; }; }>' is not assignable to parameter of type 'GetMessages'.
  Type '{ ra: { page: { dashboard: string; }; }; } | Promise<TranslationMessages | { resources: { posts: { name: string; fields: { average_note: string; body: string; comments: string; commentable: string; ... 11 more ...; authors: string; }; }; comments: { ...; }; users: { ...; }; }; ... 4 more ...; simple: { ...; }; }>' is not assignable to type 'TranslationMessages | Promise<TranslationMessages>'.
    Type '{ ra: { page: { dashboard: string; }; }; }' is not assignable to type 'TranslationMessages | Promise<TranslationMessages>'.
      Type '{ ra: { page: { dashboard: string; }; }; }' is not assignable to type 'TranslationMessages'.
        Types of property 'ra' are incompatible.
          Type '{ page: { dashboard: string; }; }' is missing the following properties from type '{ action: { [key: string]: string | StringMap; add_filter: string; add: string; back: string; bulk_actions: string; cancel: string; clear_input_value: string; clone: string; confirm: string; ... 23 more ...; move_down: string; }; ... 8 more ...; validation: { ...; }; }': action, boolean, input, message, and 5 more.

CodePudding user response：

casting in any fixed build error

export const messages = {
    ...englishMessages,
    ra: {
        page: {
            dashboard: 'test edit dashboard'
        }
    } as any
};

CodePudding user response：

Use the type TranslationMessages

export const messages : TranslationMessages  = {
    ...englishMessages,
    ra: {
        page: {
            dashboard: 'test edit dashboard'
        }
    }
};