鸿蒙 Next 纯血版实战：如何复用你现有的 TypeScript 工具库？（拒绝重复造轮子）

标签：#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）中运行：

ohpminstalldayjs

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

2. 核心代码

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

// Home.etsimportdayjsfrom'dayjs';// 就像在 Vue/React 里一样！@Entry@Componentstruct Home{@StatetimeStr: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 不喜欢的动态写法exportfunctioncomplexAlgorithm(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';// 在这里处理类型转换，对外暴露干净的接口exportfunctionsafeEncrypt(msg:string):string{returncomplexAlgorithm(msg);}

4. UI 调用 (Index.ets)

import{safeEncrypt}from'../utils/EncryptAdapter';@Entry@Componentstruct Index{build(){Button('加密').onClick(()=>{// UI 层只调用干净的接口constres=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% 了。