翻译
定义翻译
intlayer 中的 t 函数允许您以多种语言声明内容。此函数确保类型安全，如果缺少任何翻译，它会引发错误，这在 TypeScript 环境中特别有用。
使用 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;在 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: "Page Title", content: "Page Content", }, fr: { title: "Titre de la Page", content: "Contenu de la Page", }, es: { title: "Título de la Página", content: "Contenido de la Página", }, }), },} satisfies Dictionary;export default customContent;如果您有改善此文档的想法，请随时通过在GitHub上提交拉取请求来贡献。
文档的 GitHub 链接