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

很久之前我们分享过一篇关于 i18n国际化 中解决魔法值问题的文章 i18n国际化前端解决方案引发的关于魔法值的思考，因为近期在抽工具包，于是我们把这部分重构了一下，也放进了发布了 npm 包里，今天我们来使用这个包提供的 i18n 实现一下国际化。

一、安装 `airpower`

AirPower 是一个基于 TypeScript 的开发工具包, 内置了数据转换、装饰器、时间日期处理、加解密与散列、文件处理、常用枚举和字典、常见数据结构处理等工具。Github

我们今天要用的是 airpower 的 i18n 模块，先安装到项目中：

bash 复制代码

npm install airpower
// or
yarn add airpower
// or
pnpm add airpower

二、实现默认语言

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

ts 复制代码

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

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

ts 复制代码

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

三、声明新语言

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

ts 复制代码

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

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

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

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

ts 复制代码

/**
 * # 英语语言包
 */
export const English: Languages = {
  language: AirLanguage.ChineseSimplified,
  GoodsName: "Goods name",
  FileTooLarge: "File too large",
  FileUnknownSize: "Invalid file size"
};

而且，配合一些 AI代码插件，自动就将所有没有翻译的文本自动处理好了。

四、注册语言并设置当前语言

注册语言就很简单了，你只需要在你项目启动前，添加并设置当前的语言即可：

ts 复制代码

// main.ts

// 添加新的语言
Languages.addLanguage(English)

// 如果需要，可设置其他语言为当前语言
AirI18n.setCurrentLanguage(AirLanguage.English)

// 启动项目
const app = createApp(App);
// ....

五、使用国际化语言标签

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

BAD: 以前的做法 🔴

html 复制代码

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

出现了魔法值

🔴 如果 GoodsName 被修改，此处无法感知。
🔴 编写过程中没有代码提示，需要去语言文件中复制这个 key

GOOD: 现在的做法 🟢

html 复制代码

<template>
{{ Languages.get().GoodsName }}
</template>
<script lang="ts" setup>
import {Languages} from '@/i18n/Languages'
</script>

使用属性编写，消除魔法值之后：

🟢 语言文件修改，此处可以感知到。
🟢 通过代码提示可以直接选择文本标签

六、生态和功能计划

6.1 其他功能

AirPower 是我们发布的一个 NPM 工具包，其中还提供了很多的工具：

装饰器：

为类和属性做一些配置，可在其他地方直接读取使用，也用于下面的 数据转换 部分。

枚举字典：

封装了与 Java 类似的枚举字典体验，可参考文章 TypeScript使用枚举封装和装饰器优雅的定义字典

数据转换：

封装了类似 class-transformer 的数据转换工具，可参考文章 TypeScript装饰器之我们是这么处理项目数据转换的

6.2 关联生态包

我们近期发布了 airpower 包的最新版本，并且基于这个工具包，我们还推出了几个其他的工具包

6.2.1 `@airpower/core`

AirPower-Core 是一个基于 AirPower 的核心库，封装了很多和我们 AirPower4J 项目中规范的 CURD 规范代码，本身无法直接运行，你可以查看下面一些实现库：

6.2.2 `@airpower/web`

AirPower-Web, 一个基于 Vue3 Element Plus 的快速开发脚手架，是基于 @airpower-core 的 Web 端实现。

目前正在开发中，欢迎你一起来贡献代码。

6.2.3 更多实现

目前还计划了 @airpower/uniapp @airpower/react 等，如果你有兴趣，也欢迎和我们一起。

总结

今天我们使用了 airpower 这个包提供的 i18n 新解决方案，如果对你有帮助，欢迎点赞收藏关注四连～

如果你有什么好的想法或者问题，可以在评论区和我们讨论～

所有的开源代码都在这里：AirPower Team@Github

Bye~

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

一、安装 airpower

二、实现默认语言

三、声明新语言

四、注册语言并设置当前语言

五、使用国际化语言标签

BAD: 以前的做法 🔴

GOOD: 现在的做法 🟢

六、生态和功能计划

6.1 其他功能

装饰器：

枚举字典：

数据转换：

更多工具类

6.2 关联生态包

6.2.1 @airpower/core

6.2.2 @airpower/web

6.2.3 更多实现

总结

一、安装 `airpower`

6.2.1 `@airpower/core`

6.2.2 `@airpower/web`