用一种全新的方式来实现i18n，和魔法字符串彻底说拜拜 关注更多AI编程资讯请去AI Coding专区：https://juejin.cn/aicoding 很久之前我们分享过一篇关于「i18n国际化」中解决魔法值问题的文章i18n国际化前端解决方案引发的关于魔法值的思考，因为近期在抽工具包，于是我们把这部分重构了一下，也放进了发布了「npm」包里，今天我们来使用这个包提供的「i18n」实现一下国际化。 ?补充：目前使用任何第三方插件都无法避免「魔法值」的问题，所以本文不再讨论任何有关第三方插件的解决方案。 一、安装airpower?「AirPower」是一个基于「TypeScript」的开发工具包, 内置了数据转换、装饰器、时间日期处理、加解密与散列、文件处理、常用枚举和字典、常见数据结构处理等工具。 Github：https://github.com/AirPowerTeam/AirPower 「我们今天要用的是airpower的i18n模块」，先安装到项目中： npm install airpower// oryarnaddairpower// orpnpmaddairpower二、实现默认语言安装完成之后，我们实现一个继承自AirI18n的类： import{AirI18n }from'airpower'exportclassLanguagesextendsAirI18n{// 语言文本项目...}请注意，实现AirI18n的类，可作为默认语言类实现。所以我们可以在这个Languages类中添加任何需要的文本，如商品名称： exportclassLanguagesextendsAirI18n{// language: AirLanguage.ChineseSimplified// 默认就是简体中文，如果你的默认不是简体中文，可以加上这句话，改为你需要的默认语言。GoodsName='商品名称'}三、声明新语言接下来，假设我们还需要实现英文版，我们只需要创建一个变量，类型是Languages，并指定新语言为英语即可。 /*** # 英语语言包*/exportconstEnglish: Languages = { language: AirLanguage.English};「此时 你的WebStorm或者VSCode会提示错误！」 ?因为你的 English 语言并没有翻译所需的一些文本： 「是不是很美滋滋？哪些没有翻译的一目了然。而且，鼠标划过去快速修复即可自动添加所有没有翻译的文本」 /*** # 英语语言包*/exportconstEnglish: Languages = { language: AirLanguage.ChineseSimplified, GoodsName:"Goods name", FileTooLarge:"File too large", FileUnknownSize:"Invalid file size"};而且，配合一些「AI代码插件」，自动就将所有没有翻译的文本自动处理好了。 四、注册语言并设置当前语言注册语言就很简单了，你只需要在你项目启动前，添加并设置当前的语言即可： // main.ts// 添加新的语言Languages.addLanguage(English)// 如果需要，可设置其他语言为当前语言AirI18n.setCurrentLanguage(AirLanguage.English)// 启动项目constapp =createApp(App);// ....五、使用国际化语言标签使用的时候，不像你们之前使用的方式一样，可能写入很多的字符串魔法值，我们使用的是TypeScript的标准属性读取： BAD: 以前的做法 ??template{{ t('GoodsName') }}/template出现了魔法值 ?? 如果GoodsName被修改，此处无法感知。?? 编写过程中没有代码提示，需要去语言文件中复制这个key??补充如需感知变化或翻译提示，需要依赖第三方插件GOOD: 现在的做法 ??template{{ Languages.get().GoodsName }}/templatescriptlang="ts"setupimport{Languages}from'@/i18n/Languages'/script使用属性编写，消除魔法值之后： ?? 语言文件修改，此处可以感知到。?? 通过代码提示可以直接选择文本标签??补充不依赖任何第三方插件六、生态和功能计划6.1 其他功能「AirPower」是我们发布的一个「NPM」工具包，其中还提供了很多的工具： 6.1.1「装饰器」：为类和属性做一些配置，可在其他地方直接读取使用，也用于下面的「数据转换」部分。 6.1.2「枚举字典」：封装了与「Java」类似的枚举字典体验，可参考文章TypeScript使用枚举封装和装饰器优雅的定义字典 6.1.3「数据转换」：封装了类似class-transformer的数据转换工具，可参考文章TypeScript装饰器之我们是这么处理项目数据转换的 6.1.4「更多工具类」还提供了一些「时间日期」「加解密」「编解码」等等工具。 6.2 关联生态包我们近期发布了airpower包的最新版本，并且基于这个工具包，我们还推出了几个其他的工具包 6.2.1「@airpower/core」AirPower-Core是一个基于AirPower的核心库，封装了很多和我们「AirPower4J」项目中规范的「CURD」规范代码，本身无法直接运行，你可以查看下面一些实现库： 6.2.2「@airpower/web」AirPower-Web, 一个基于Vue3Element Plus的快速开发脚手架，是基于@airpower-core的「Web」端实现。 ?目前正在开发中，欢迎你一起来贡献代码。 6.2.3 更多实现目前还计划了@airpower/uniapp@airpower/react等，如果你有兴趣，也欢迎和我们一起。 七、总结今天我们使用了airpower这个包提供的「i18n」新解决方案，如果对你有帮助，欢迎「点赞」「收藏」「关注」四连～ 如果你有什么好的想法或者问题，可以在评论区和我们讨论～ 所有的开源代码都在这里：AirPower Team@Github 点击关注公众号，“技术干货” 及时达！ 阅读原文