标签： #HarmonyOS #ArkTS #TypeScript #前端工程化 #OHPM #效率工具

---

😲 前言：前端资产的“第二春”

在鸿蒙 Next 生态中，ArkTS 是唯一官方推荐的开发语言。
虽然它为了极致性能（AOT 编译）加了很多限制（比如禁止运行时的 any 随意转换），但它依然保留了 TypeScript 的核心语法。

这意味着，你不再需要像 Android 那样重写 DateUtils.java，也不需要像 iOS 那样重写 StringHelper.swift。
你只需要把以前写过的 utils.ts 拿来，稍微清洗一下，就能直接跑在鸿蒙手机上。

---

🏗️ 一、 架构逻辑：NPM 生态的平移

鸿蒙拥有自己的包管理器 OHPM (Open Harmony Package Manager)。它不仅支持鸿蒙原生的 .har 包，还兼容标准的 npm 包机制。

库复用流程图 (Mermaid):

---

📦 二、 实战 1：直接安装 NPM 第三方库

假设你想处理时间。在 Web 端我们常用 dayjs。在鸿蒙里，你完全不需要自己写时间格式化函数。

1. 安装

在 DevEco Studio 的终端（Terminal）中运行：

ohpm install dayjs

注意：这里用的是 ohpm，不是 npm，但它会去 npm 仓库拉取代码。

2. 核心代码

在你的 .ets 页面中直接使用：

// Home.ets
import dayjs from 'dayjs'; // 就像在 Vue/React 里一样！

@Entry
@Component
struct Home {
  @State timeStr: string = '';

  aboutToAppear() {
    // 完美运行，无缝迁移
    this.timeStr = dayjs().format('YYYY-MM-DD HH:mm:ss');
  }

  build() {
    Column() {
      Text(`当前时间: ${this.timeStr}`)
        .fontSize(30)
    }
  }
}

结论： 只要是不依赖浏览器 DOM（如 window、document）和 Node.js 特有 API（如 fs、process）的纯逻辑库（如 lodash, mathjs, crypto-js），绝大多数都能直接用！

---

🛠️ 二、 实战 2：复用你自己的 TS 源码 (Adapter 模式)

鸿蒙的 .ets 文件（ArkUI 组件）对类型检查非常严格，不支持某些动态特性（如 any 的隐式推断）。
如果你的旧代码里充满了 any，直接复制到 .ets 里会报一堆红线。

最佳实践：使用 .ts 文件作为“隔离层”。

场景：你有一个祖传的 EncryptUtils.ts (加密工具)

1. 旧代码 (LegacyCode.ts)

// 这是一个普通的 TS 文件，可能包含一些 ArkTS 不喜欢的动态写法
export function complexAlgorithm(data: any): string {
    // 假设这里有很多动态操作
    return "加密数据:" + JSON.stringify(data);
}

2. 鸿蒙项目结构
不要直接把逻辑写在 .ets 里，而是新建一个 .ts 文件。

ets/
  ├── utils/
  │    └── EncryptAdapter.ts  <-- 纯 TS 文件，限制较少
  └── pages/
       └── Index.ets          <-- UI 文件，限制严格

3. 适配层 (EncryptAdapter.ts)

// 在 .ts 文件中，ArkTS 的检查相对宽松
import { complexAlgorithm } from './LegacyCode';

// 在这里处理类型转换，对外暴露干净的接口
export function safeEncrypt(msg: string): string {
  return complexAlgorithm(msg);
}

4. UI 调用 (Index.ets)

import { safeEncrypt } from '../utils/EncryptAdapter';

@Entry
@Component
struct Index {
  build() {
    Button('加密')
      .onClick(() => {
        // UI 层只调用干净的接口
        const res = safeEncrypt("Hello Harmony"); 
        console.info(res);
      })
  }
}

---

⚠️ 三、 避坑指南：哪些不能用？

虽然是 TypeScript，但毕竟不是跑在 Chrome V8 上，而是 ArkCompiler。以下代码必须重构：

1. DOM 操作必死：

• ❌ document.getElementById
• ❌ window.localStorage
• ✅ 替换为 ArkUI 的组件状态管理 (@State) 和 Preferences 本地存储。

2. 运行时动态修改对象：

• ArkTS 开启了 AOT 优化，要求对象布局固定。
• ❌ obj.newProp = 123; (动态添加属性)
• ✅ 在 class 或 interface 中预先定义好所有属性。

3. 反射与原型链：

• ❌ Reflect.set, Object.setPrototypeOf
• 尽量避免高阶的元编程操作，保持代码朴素。

---

🎯 总结

鸿蒙 Next 给前端开发者打开了一扇巨大的门。
不要被“新系统”吓倒，你的技术栈价值连城。

• UI 层：学习 ArkTS 声明式语法（类似 Flutter/SwiftUI）。
• 逻辑层：直接复用你积累多年的 TypeScript 军火库。

Next Step:
打开你现在的公司项目，找到 src/utils 文件夹，把里面的 format.ts 或 calc.ts 复制到鸿蒙工程里，尝试用 ohpm 装一个 lodash，你会发现：原来鸿蒙开发，我已经学会 50% 了。