用一种全新的方式来实现i18n，和魔法字符串彻底说拜拜

Hamm2025年04月14日约 4 分钟

关注更多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// oryarn add airpower// orpnpm add airpower

二、实现默认语言

安装完成之后，我们实现一个继承自 AirI18n 的类：

import { AirI18n } from 'airpower'export class Languages extends AirI18n {  // 语言文本项目...}

请注意，实现 AirI18n 的类，可作为默认语言类实现。所以我们可以在这个 Languages 类中添加任何需要的文本，如 商品名称：

export class Languages extends AirI18n {  // language: AirLanguage.ChineseSimplified   // 默认就是简体中文，如果你的默认不是简体中文，可以加上这句话，改为你需要的默认语言。  GoodsName = '商品名称'}

三、声明新语言

接下来，假设我们还需要实现英文版，我们只需要创建一个变量，类型是 Languages，并指定新语言为英语即可。

/** * # 英语语言包 */export const English: Languages = {  language: AirLanguage.English};

「此时你的 WebStorm 或者 VSCode 会提示错误！」

❝
因为你的 English 语言并没有翻译所需的一些文本：

「是不是很美滋滋？哪些没有翻译的一目了然。而且，鼠标划过去 快速修复 即可自动添加所有没有翻译的文本」

/** * # 英语语言包 */export const English: 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)// 启动项目const app = createApp(App);// ....

五、使用国际化语言标签

使用的时候，不像你们之前使用的方式一样，可能写入很多的字符串魔法值，我们使用的是 TypeScript 的标准属性读取：

BAD: 以前的做法 🔴

<template>{{ t('GoodsName') }}</template>

出现了魔法值

🔴 如果 GoodsName 被修改，此处无法感知。
🔴 编写过程中没有代码提示，需要去语言文件中复制这个 key
🔴 补充 如需感知变化或翻译提示，需要依赖第三方插件

GOOD: 现在的做法 🟢

<template>{{ Languages.get().GoodsName }}</template><scriptlang="ts"setup>import {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

点击关注公众号，“技术干货” 及时达！

一、安装 airpower