TypeScript 中的国际化 (i18n)

TypeScript 中的国际化 (i18n)：工具与实践概述

国际化 (i18n) 是一种软件设计过程，允许在不修改源代码的情况下，使软件适应不同的语言和区域标准。对于 TypeScript 应用程序，选择合适的 i18n 库至关重要：它决定了翻译的类型安全性、性能和维护的便利性。在本文中，我们将探讨在 TypeScript 中实现 i18n 的三种主要方法和工具。

1. i18next — 经典解决方案

i18next 是 JavaScript/TypeScript 生态系统中最流行的国际化库。它支持多种框架（React、Vue、Angular），并拥有丰富的插件生态系统。

安装：

npm install i18next i18next-browser-languagedetector

使用 TypeScript 进行基本配置：

import i18n from 'i18next';import { initReactI18next } from 'react-i18next';

// 翻译资源类型化declare module 'i18next' {  interface CustomTypeOptions {    defaultNS: 'common';    resources: {      common: typeof import('./locales/en/common.json');    };  }}

i18n.use(initReactI18next).init({  resources: {    en: { common: require('./locales/en/common.json') },    ru: { common: require('./locales/ru/common.json') },  },  lng: 'ru',  fallbackLng: 'en',  interpolation: { escapeValue: false },});

export default i18n;

在组件中使用示例：

import { useTranslation } from 'react-i18next';

function Greeting() {  const { t } = useTranslation();  const userName = '安娜';    return (    <div>      <p>{t('greeting', { name: userName })}</p>      <p>{t('itemsCount', { count: 5 })}</p>    </div>  );}

优点：

庞大的社区和文档
支持复数形式 (pluralization)
变量插值
动态加载语言资源

缺点：

开箱即用缺乏严格的类型化
需要额外配置 TypeScript 以实现完全类型安全
JSON 翻译文件不会自动类型化

2. typesafe-i18n — 严格类型化

typesafe-i18n — 一个专为 TypeScript 创建的库。其主要特点是根据您的翻译文件生成类型。

安装：

npm install typesafe-i18n

配置和示例：

// 创建翻译文件：src/i18n/en/index.tsexport const en = {  greeting: '你好 {name}!',  itemsCount: '你有 {count} 个项目',} as const;

// 生成类型（自动运行）// npx typesafe-i18n

// 在组件中使用import { i18n } from './i18n/i18n-util';

function Profile() {  const LL = i18n();    return (    <div>      <p>{LL.greeting({ name: '安娜' })}</p>      <p>{LL.itemsCount({ count: 5 })}</p>    </div>  );}

优点：