在前端开发中，国际化是一个非常重要的需求，而 react-redux-i18n 是 React 应用中一个非常方便的国际化库。然而，如果你在使用 TypeScript 编写 React 应用并使用了 react-redux-i18n，你可能会发现 TypeScript 会报告许多类型错误。为了解决这个问题，我们可以使用 @types/react-redux-i18n。
本文将介绍如何使用 @types/react-redux-i18n。
安装 @types/react-redux-i18n
使用 npm 或 yarn 安装：
--- ------- ---------- -----------------------
使用 @types/react-redux-i18n
导入
------ - --------- - ---- ------------------- -- ---------------- - --------- --
如果你还没有安装 react-redux-i18n，你需要首先安装它，并进行配置。
I18nState 类型
I18nState 是 react-redux-i18n 提供的一个接口，它描述了当前的国际化状态。使用 TypeScript 的话，我们可以把这个类型用于我们的组件状态：
---- ----- - - ----- ------- - - ----------
如上，我们使用 State 类型来定义我们的组件状态，其中包含了一个 text 字段和 I18nState 类型。
translate() 编译语言字符串
react-redux-i18n 提供了一个 translate() 函数来编译国际化字符串，它有几种用法：
基础用法
------ - --------- - ---- ------------------- ----- -------------- - -------------------------
如上，在这种最基本的用法中，translate() 函数需要一个字符串参数，表示需要进行国际化的字符串的 key。
使用变量
如果我们需要在国际化的文本中包含变量，我们可以使用 $ 符号来表示。比如下面这个例子：
--------- ----- ------
在使用的时候，我们可以这样：
------ - --------- - ---- ------------------- ----- ---- - ------ ----- -------------- - --------------------- - ---- ---
其中的变量会被替换成 {} 括号中的变量值。
带格式的字符串
如果我们需要在国际化的文本中包含格式化字符串，我们可以使用 $ 和 {} 符号来表示。比如下面这个例子：
-------- ---- ------- -- - --------- ------- -----
类似于之前的例子，我们需要使用变量来动态替换变量值：
------ - --------- - ---- ------------------- ----- ------- - ----- ----- -------------- - -------------------- - ------- ---
上面的代码生成的字符串会被格式化成美元格式。
Localized 组件
react-redux-i18n 还提供了一个 Localized 组件来实现多语言支持。
我们可以像下面这样使用 Localized 组件：
------ - -- ----- ---- --------
------ - --------- - ---- -------------------
---- ----- - -
----- -------
--
------ ----- --------- --------------- - -- ---- -- -- -
---------- --------------- ---- ---
--- ---------- -- -- ------------------------------------
------------
--在使用 Localized 组件的时候，我们需要通过 translations 属性来传入需要进行国际化的字符串，然后在回调函数中使用 translated() 函数来生成最终的文本。
总结
在 TypeScript 的 React 应用中使用 react-redux-i18n 时，我们需要安装 @types/react-redux-i18n，并导入 I18nState 类型。我们可以使用 translate() 函数来编译国际化字符串，或者使用 Localized 组件来实现多语言支持。如果你还没有尝试过 TypeScript，它是一个强类型的 JavaScript 扩展，可以让你在开发大型项目时更加可靠和易于维护。
示例代码：https://codesandbox.io/s/typesreact-redux-i18n-bvjby
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedc18eb5cbfe1ea0611e3e