如何覆盖 react-admin 现有的翻译

Question

来自demo的App.tsx

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}
          ....

zh.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',

如何在 en.ts 中重写现有的翻译“ra.page.dashboard”？

如果我在解构englishMessage后添加相同的结构

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

我发现一个错误

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.

Answer 1

解决方案是使用deepmerge 来合并数组

const newValues = {
    ra: {
        page: {
            dashboard: "test edit dashboard"
        }
    }
}
const messages = deepmerge.all([englishMessages, newValues]) 
                                                      as TranslationMessages;
export default messages;

第一个答案（不正确），这种方法会重写englishMessages中的所有值

在any 中进行转换修复了构建错误

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

Answer 2

使用类型TranslationMessages

所以，删除 Ra 对象并直接添加您的翻译

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

下面的旧的和不好的响应

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