随着全球化的推进，国际化（Internationalization，简称 i18n）已成为越来越重要的需求。而前端实现国际化则需要使用 i18n 的库。而 @types/i18n-js，就是 i18n-js 类型声明的 npm 包，可以让 TypeScript 项目方便地使用 i18n-js 库。
安装 @types/i18n-js
在项目中使用 @types/i18n-js 要先进行安装。可以使用 npm 或者 yarn 安装。在命令行中输入下面命令：
npm install --save-dev @types/i18n-js
或者：
yarn add @types/i18n-js --dev
引入 i18n-js
在需要使用 i18n-js 的 ts 文件中引入 i18n-js：
import i18n from 'i18n-js';
引入后可以使用 i18n 对象调用 i18n-js 库的各种方法。
加载翻译文件
i18n-js 支持加载多个语言的翻译文件。这里我们用一个例子四个语言包为例：en.json、es.json、fr.json、zh-CN.json。
-- -------------------- ---- ------- -- ------- - ----------- ------- ------- - -- ------- - ----------- ------ ------- - -- ------- - ----------- --------- -- ------- - -- ---------- - ----------- -------- -
在 TypeScript 中，我们可以使用 require 函数来加载 json 文件或者使用 import 方式。利用 import 方式是需要安装 import "node" 包支持的。
// 使用 import 方式
import en from './en.json';
import es from './es.json';
import fr from './fr.json';
import zh_CN from './zh-CN.json';
const translations = { en, es, fr, zh_CN };然后，我们调用 i18n-js 的 translations方法，加载不同语言下的翻译文件。这里，我们同时设置默认语言为英语 en。
i18n.translations = translations; i18n.locale = 'en';
现在，我们的翻译文件已经加载好了，接下来可以使用 i18n 对象调用不同语言情况下的翻译字符串了。
获取翻译字符串
使用 t 方法获取不同语言情况下的翻译字符串。
const greeting = i18n.t('greeting');
console.log(greeting); // "Hello, world!" 英语情况下也可以传递第二个参数，传递变量实现动态显示。
const text = i18n.t('Hello {name}!', { name: 'World' });
console.log(text); // "Hello World!"组件中使用 i18n-js
在 React 组件中使用 i18n-js，我们需要安装 react-i18n 包，在项目中使用 i18next 的组件。
npm install --save react-i18next
或者：
yarn add react-i18next
通过使用 withTranslation 和 useTranslation 实现在组件中使用 i18n。
-- -------------------- ---- -------
------ ------ - -- - ---- --------
------ - ---------------- -------------- - ---- ----------------
--------- ------ -
-- ----
-
----- --------- ---------- - -- - -- -- -
----- - -- --------- - - -----------------
------ -
-----
------------------------
--------------------- --------- - ----- ------- --------
------
--
--
------ ------- ----------------------------使用 withTranslation 让组件关联到 i18n 对象上来获得 t 和 i18n 对象，然后使用 useTranslation 返回的对象可以获得 t 和 i18n 对象来通过 translate 和 t 函数在组件中使用 i18n。
总结
通过本文，我们主要介绍了如何在 TypeScript 中使用 i18n-js。展示了如何加载语言包，获取翻译的各种方式，以及如何在 React 组件中使用 i18n-js。
初步了解了 i18n-js 的使用之后，可以更好地支持国际化需求，从而更好地满足用户的期望，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/types-i18n-js