![dba11ae6fffea049a519796a2903ad8c.png](https://i-blog.csdnimg.cn/blog_migrate/45dad766739a3d304698ff4b9802f64c.png)
这篇文章将介绍如何在项目中将 i18n 与 Typescript 融合,以便为开发者提供更好的开发体验。更好的开发体验指的是提供键入提示,自动补充,参数类型校验等等,避开低级的错误。
优化前:
![37528fb8804ef2b5017400001ff6e313.png](https://i-blog.csdnimg.cn/blog_migrate/a371e8426930270e4bb6b2b37556fb65.png)
优化后:
![35eab0ae06a3c6acbc88f57ce2a8adb4.png](https://i-blog.csdnimg.cn/blog_migrate/72a96b4ddece0b9b7cdaaf60386df3f7.png)
如果你很清楚如何实现,继续阅读下去可能不会有太大的帮助。
正文开始
回想一下在前端的项目中,i18n 通常出现的形式是存在多份语言映射表,同一个 key 在不同的语言文件中翻译为不同的内容:
// en.json
{
"hello": "Hello"
}
// zh-CN.json
{
"hello": "你好"
}
在需要展示文案的位置,使用 i18n 工具包提供的方法,传递 “key” 来指定需要展示的多语言文本。
<div>{
t("hello")}</div>
React 中常用的 i18n 工具包有react-intl, react-i18next,大致使用方法差不多,这里使用的是 react-i18next 的写法。
问题出现
这里的 t
方法可以接受任意参数,即使传入不存在的 key 值没有任何问题,甚至大部分 i18n 翻译库会自动 fallback 到直接将 key 展示出来。
![ece847fc32132df644db0545702bde58.png](https://i-blog.csdnimg.cn/blog_migrate/dd25719137a7e2da83c6328182a32375.jpeg)
无疑这里会给低级错误留机会,在 Typescript 中,我们当然不想发生这种情况。
想要告诉 Typescript t
方法接受哪些翻译的 key 值很简单。我们可以将其全部枚举出来,使用 |
符号组合。并声明一个 I18nT
的函数类型。
type TranslateKeys = 'event.title' | 'event.description' | ...
type I18nT = {
(key: TranslateKeys): string
}
应用这个类型和具体使用的工具有关,可能需要声明合并或类型断言的形式来让程序理解 t
的类型。
// 在 i18next 项目中,t 方法的类型是 TFunciton,可以使用声明合并
declare module "i18nex