Creation:2024-08-11Last update:2025-06-29
将此文档参考到您的 AI 助手ChatGPTClaudeDeepSeekGoogle AI modeGeminiPerplexityMistralGrok
使用您最喜欢的AI助手总结文档，并引用此页面和AI提供商
此页面的内容已使用 AI 翻译。
查看英文原文的最新版本编辑此文档
如果您有改善此文档的想法，请随时通过在GitHub上提交拉取请求来贡献。
文档的 GitHub 链接Copy
复制文档 Markdown 到剪贴板
翻译
定义翻译
intlayer 中的 t 函数允许您声明多语言内容。该函数确保类型安全，如果缺少任何翻译会抛出错误，这在 TypeScript 环境中特别有用。
以下是如何声明带有翻译内容的示例。
**/*.content.ts
复制代码
复制代码到剪贴板
import { t, type Dictionary } from "intlayer";
interface Content {
welcomeMessage: string;
}
export default {
key: "multi_lang",
content: {
welcomeMessage: t({
en: "Welcome to our application",
fr: "Bienvenue dans notre application",
es: "Bienvenido a nuestra aplicación",
}),
},
} satisfies Dictionary<Content>;本地化配置
为了确保正确处理翻译，您可以在 intlayer.config.ts 中配置接受的本地化语言。此配置允许您定义应用程序支持的语言：
intlayer.config.ts
复制代码
复制代码到剪贴板
import { Locales, type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
internationalization: {
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
},
};
export default config;本地化配置
为了确保正确的翻译处理，您可以在 intlayer.config.ts 中配置接受的本地化语言。此配置允许您定义应用程序支持的语言：
intlayer.config.ts
复制代码
复制代码到剪贴板
import { Locales, type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
internationalization: {
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
},
};
export default config;在 React 组件中使用翻译
使用 react-intlayer，您可以在 React 组件中使用翻译。示例如下：
**/*.tsx
复制代码
复制代码到剪贴板
import type { FC } from "react";
import { useIntlayer } from "react-intlayer";
const MyComponent: FC = () => {
const content = useIntlayer("multi_lang");
return (
<div>
<p>{content.welcomeMessage}</p>
</div>
);
};
export default MyComponent;该组件根据您应用中设置的当前语言环境获取相应的翻译内容。
自定义内容对象
intlayer 支持用于翻译的自定义内容对象，允许您定义更复杂的结构，同时确保类型安全。以下是一个自定义对象的示例：
**/*.content.ts
复制代码
复制代码到剪贴板
import { t, type Dictionary } from "intlayer";
interface ICustomContent {
title: string;
content: string;
}
const customContent = {
key: "custom_content",
content: {
profileText: t<ICustomContent>({
en: {
title: "页面标题",
content: "页面内容",
},
fr: {
title: "Titre de la Page",
content: "Contenu de la Page",
},
es: {
title: "页面标题",
content: "页面内容",
},
}),
},
} satisfies Dictionary;
export default customContent;