在前端开发中，国际化是一个非常重要的需求，而 react-redux-i18n 是 React 应用中一个非常方便的国际化库。然而，如果你在使用 TypeScript 编写 React 应用并使用了 react-redux-i18n，你可能会发现 TypeScript 会报告许多类型错误。为了解决这个问题，我们可以使用 @types/react-redux-i18n。
本文将介绍如何使用 @types/react-redux-i18n。
安装 @types/react-redux-i18n
使用 npm 或 yarn 安装：
npm install --save-dev @types/react-redux-i18n
使用 @types/react-redux-i18n
导入
import { I18nState } from "react-redux-i18n"; // react-redux-i18n 的 I18nState 类型
如果你还没有安装 react-redux-i18n，你需要首先安装它，并进行配置。
I18nState 类型
I18nState 是 react-redux-i18n 提供的一个接口，它描述了当前的国际化状态。使用 TypeScript 的话，我们可以把这个类型用于我们的组件状态：
type State = { text: string; } & I18nState;
如上，我们使用 State 类型来定义我们的组件状态，其中包含了一个 text 字段和 I18nState 类型。
translate() 编译语言字符串
react-redux-i18n 提供了一个 translate() 函数来编译国际化字符串，它有几种用法：
基础用法
import { translate } from "react-redux-i18n"; const translatedText = translate("hello.world");
如上，在这种最基本的用法中，translate() 函数需要一个字符串参数，表示需要进行国际化的字符串的 key。
使用变量
如果我们需要在国际化的文本中包含变量，我们可以使用 $ 符号来表示。比如下面这个例子：
greeting: Hello $name!
在使用的时候，我们可以这样：
import { translate } from "react-redux-i18n"; const name = "Tom"; const translatedText = translate("greeting", { name });
其中的变量会被替换成 {} 括号中的变量值。
带格式的字符串
如果我们需要在国际化的文本中包含格式化字符串，我们可以使用 $ 和 {} 符号来表示。比如下面这个例子：
balance: Your balance is $ {balance, number, usd}.
类似于之前的例子，我们需要使用变量来动态替换变量值：
import { translate } from "react-redux-i18n"; const balance = 1000; const translatedText = translate("balance", { balance });
上面的代码生成的字符串会被格式化成美元格式。
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
