随着全球化的推进，国际化（Internationalization，简称 i18n）已成为越来越重要的需求。而前端实现国际化则需要使用 i18n 的库。而 @types/i18n-js，就是 i18n-js 类型声明的 npm 包，可以让 TypeScript 项目方便地使用 i18n-js 库。
安装 @types/i18n-js
在项目中使用 @types/i18n-js 要先进行安装。可以使用 npm 或者 yarn 安装。在命令行中输入下面命令：
--- ------- ---------- --------------
或者：
---- --- -------------- -----
引入 i18n-js
在需要使用 i18n-js 的 ts 文件中引入 i18n-js：
------ ---- ---- ----------
引入后可以使用 i18n 对象调用 i18n-js 库的各种方法。
加载翻译文件
i18n-js 支持加载多个语言的翻译文件。这里我们用一个例子四个语言包为例：en.json、es.json、fr.json、zh-CN.json。
-- ------- - ----------- ------- ------- - -- ------- - ----------- ------ ------- - -- ------- - ----------- --------- -- ------- - -- ---------- - ----------- -------- -
在 TypeScript 中，我们可以使用 require 函数来加载 json 文件或者使用 import 方式。利用 import 方式是需要安装 import "node" 包支持的。
-- -- ------ -- ------ -- ---- ------------ ------ -- ---- ------------ ------ -- ---- ------------ ------ ----- ---- --------------- ----- ------------ - - --- --- --- ----- --
然后，我们调用 i18n-js 的 translations方法，加载不同语言下的翻译文件。这里，我们同时设置默认语言为英语 en。
----------------- - ------------- ----------- - -----
现在，我们的翻译文件已经加载好了，接下来可以使用 i18n 对象调用不同语言情况下的翻译字符串了。
获取翻译字符串
使用 t 方法获取不同语言情况下的翻译字符串。
----- -------- - ------------------- ---------------------- -- ------- ------- -----
也可以传递第二个参数，传递变量实现动态显示。
----- ---- - ------------- --------- - ----- ------- --- ------------------ -- ------ -------
组件中使用 i18n-js
在 React 组件中使用 i18n-js，我们需要安装 react-i18n 包，在项目中使用 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