如何重写react-admin现有翻译词条并解决对应TypeScript类型报错

安全阿岳

2026-9-25

正确重写react-admin内置翻译词条的方案

报错原因

你当前的写法直接替换了整个ra根翻译对象，原有ra-language-english内置的action、boolean、input等其他翻译字段全部被覆盖丢失，不符合TranslationMessages的类型定义，因此触发TypeScript类型报错。

解决方案

方案1：逐层解构保留原有属性（无需额外依赖）

仅在需要修改的词条层级先解构原有属性，再覆写目标词条，不会丢失其他默认翻译：

import englishMessages from 'ra-language-english';
import { TranslationMessages } from 'react-admin';

export const messages: TranslationMessages = {
    // 保留所有默认根级翻译
    ...englishMessages,
    ra: {
        // 保留ra下所有默认翻译字段
        ...englishMessages.ra,
        page: {
            // 保留ra.page下所有默认翻译字段
            ...englishMessages.ra.page,
            // 仅覆写需要修改的词条
            dashboard: 'test edit dashboard'
        }
    },
    // 你的自定义翻译字段
    pos: {
        search: 'Search',
        // 其他自定义翻译
    }
};

方案2：使用深合并工具（适合多词条多层级修改场景）

如果需要修改的翻译词条层级多、数量大，可以用lodash.merge做深合并，自动保留所有未显式覆写的原有属性：

先安装依赖（TS项目需要同步安装类型声明）：

npm install lodash.merge
npm install -D @types/lodash.merge

代码实现：

import merge from 'lodash.merge';
import englishMessages from 'ra-language-english';
import { TranslationMessages } from 'react-admin';

export const messages: TranslationMessages = merge(
    {},
    englishMessages,
    {
        ra: {
            page: {
                dashboard: 'test edit dashboard'
            }
        },
        pos: {
            search: 'Search'
        }
    }
);