鸿蒙开发语言全解析：从 ArkTS 到 ArkUI 的入门指南

本文面向对鸿蒙（HarmonyOS）开发感兴趣的开发者，系统介绍鸿蒙应用开发所使用的核心语言 ArkTS，以及声明式 UI 框架 ArkUI 的基本概念与用法。

一、为什么鸿蒙需要自己的开发语言？

鸿蒙系统（HarmonyOS）是华为推出的分布式操作系统，支持跨设备协同运行。与 Android 依赖 Java/Kotlin、iOS 依赖 Swift 不同，鸿蒙选择了一条独特的路线：

• 统一语言：用一种语言同时描述 UI 逻辑和界面结构，减少文件切换成本
• 类型安全：在编译期捕获更多错误，提升大型应用的可维护性
• 高性能：通过静态类型和 AOT（Ahead-of-Time）编译，获得接近原生的运行效率
• 跨设备：一套代码适配手机、平板、智慧屏、车机等多种设备形态

基于这些目标，华为推出了 ArkTS 语言和 ArkUI 声明式框架。

二、ArkTS：鸿蒙的主力开发语言

2.1 ArkTS 是什么？

ArkTS 是在 TypeScript（TS） 基础上扩展而来的编程语言，专为鸿蒙应用开发设计。你可以把它理解为：

ArkTS = TypeScript + 鸿蒙专属语法扩展 + 性能优化约束

如果你已经熟悉 TypeScript，学习 ArkTS 的曲线会非常平缓。核心的变量声明、函数、类、接口、泛型等语法与 TS 完全一致。

2.2 与 TypeScript 的关系

ArkTS 对动态特性做了一定限制（如不允许 Object 索引随意赋值），这是为了保障 AOT 编译的性能和安全。这是一种有意的取舍——用少量灵活性换取更高的运行效率和编译期保障。

2.3 基础语法速览

// 变量声明
let count: number = 0
const appName: string = 'MyApp'

// 函数
function add(a: number, b: number): number {
  return a + b
}

// 接口
interface UserInfo {
  name: string
  age: number
  avatar?: string  // 可选属性
}

// 类
class Counter {
  private value: number = 0

  increment(): void {
    this.value++
  }

  get current(): number {
    return this.value
  }
}

// 枚举
enum DeviceType {
  PHONE,
  TABLET,
  TV,
  CAR
}

以上代码对任何有 TS/JS 基础的开发者来说都不陌生。ArkTS 的学习重点不在于通用语法，而在于鸿蒙特有的扩展语法，也就是下一节要讲的 ArkUI。

三、ArkUI：声明式 UI 框架

3.1 核心概念

ArkUI 是鸿蒙的声明式 UI 开发框架，采用 @Component + build() 的模式来构建界面。它的设计理念与 Flutter、SwiftUI、Jetpack Compose 类似——用代码直接描述"界面长什么样"，而不是用 XML 模板 + 命令式操控。

三个核心装饰器：

3.2 第一个 ArkUI 组件

@Entry
@Component
struct HelloWorld {
  @State message: string = 'Hello, HarmonyOS!'

  build() {
    Column() {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20 })

      Button('点击我')
        .onClick(() => {
          this.message = '你点击了按钮！'
        })
        .margin({ top: 20 })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

逐行解读：

1. @Entry — 告诉系统这是页面入口，渲染时从这里开始
2. @Component — 声明 HelloWorld 是一个自定义组件
3. struct HelloWorld — ArkUI 组件用 struct 而非 class 定义（组件不可继承，但可组合）
4. @State message — 当 message 变化时，UI 自动刷新（响应式）
5. build() — 每个组件必须实现的方法，返回 UI 结构树
6. Column() / Text() / Button() — 内置组件，通过链式调用设置属性

3.3 状态管理：@State、@Prop、@Link

ArkUI 提供了一套状态装饰器来处理组件间的数据流：

@Entry
@Component
struct ParentPage {
  @State count: number = 0

  build() {
    Column() {
      Text(`计数: ${this.count}`)

      // 子组件单向同步
      ChildDisplay({ displayCount: this.count })

      // 子组件双向同步
      ChildEditor({ editCount: $count })

      Button('增加')
        .onClick(() => { this.count++ })
    }
  }
}

@Component
struct ChildDisplay {
  @Prop displayCount: number  // 父 → 子，单向

  build() {
    Text(`显示: ${this.displayCount}`)
  }
}

@Component
struct ChildEditor {
  @Link editCount: number  // 父 ↔ 子，双向

  build() {
    Button('重置为 0')
      .onClick(() => { this.editCount = 0 })
  }
}

3.4 常用布局组件

@Entry
@Component
struct LayoutDemo {
  build() {
    // 垂直布局
    Column({ space: 10 }) {
      Text('标题').fontSize(24)

      // 水平布局
      Row({ space: 15 }) {
        Text('左')
        Text('中')
        Text('右')
      }

      // 列表
      List({ space: 8 }) {
        ForEach([1, 2, 3, 4, 5], (item: number) => {
          ListItem() {
            Text(`第 ${item} 项`)
          }
        })
      }

      // 条件渲染
      if (true) {
        Text('条件成立时显示')
      } else {
        Text('条件不成立时显示')
      }
    }
    .padding(20)
  }
}

四、ArkTS 的并发能力：TaskPool 与 Worker

鸿蒙应用开发中，耗时操作（网络请求、图片解码、大量计算）不应放在主线程（UI 线程），否则会造成卡顿。ArkTS 提供两种并发方案：

4.1 TaskPool（推荐）

@Concurrent
function heavyCompute(data: number[]): number {
  return data.reduce((sum, v) => sum + v, 0)
}

// 在组件中调用
let task = new taskpool.Task(heavyCompute, [1, 2, 3, 4, 5])
let result = await taskpool.execute(task)

TaskPool 由系统管理线程池，自动调度，开发者无需手动管理线程生命周期。

4.2 Worker

// worker.ts
import worker from '@ohos.worker'

const workerPort = worker.workerPort
workerPort.onmessage = (e) => {
  // 处理消息
  workerPort.postMessage('处理完成')
}

// 主线程
let wk = new worker.Worker('worker.ts')
wk.postMessage({ task: 'doSomething' })
wk.onmessage = (e) => {
  console.log(e.data)
}

Worker 适合需要长期运行、与主线程频繁通信的场景。

五、鸿蒙开发语言生态全景

┌─────────────────────────────────────────┐
│           HarmonyOS 应用开发             │
├──────────────┬──────────────────────────┤
│   UI 层      │  ArkUI（声明式框架）      │
│   逻辑层     │  ArkTS（TS 扩展语言）     │
├──────────────┼──────────────────────────┤
│   并发       │  TaskPool / Worker        │
│   状态管理   │  @State/@Prop/@Link/...   │
│   跨端能力   │  分布式数据对象（DDO）    │
├──────────────┼──────────────────────────┤
│   工具链     │  DevEco Studio（IDE）     │
│   构建       │  hvigor                   │
│   运行时     │  ArkCompiler（AOT）       │
└──────────────┴──────────────────────────┘

此外，鸿蒙还支持：

• C/C++（Native）：高性能场景（游戏引擎、音视频处理）可用 NAPI 调用 C++ 库
• Java（兼容层）：部分 Android 应用可通过方舟编译器适配运行
• JS（轻量场景）：卡片、快应用等轻量级场景仍可使用纯 JS

但新建鸿蒙原生应用的首选和推荐语言是 ArkTS。

六、给初学者的学习路径建议

1. 先补 TypeScript 基础（如果还不熟的话）：类型系统、接口、泛型、装饰器
2. 理解声明式 UI 思想：对比 React/Vue/Flutter，理解"状态驱动视图"的核心理念
3. 动手写第一个 ArkUI 页面：一个包含文本、按钮、列表的简单页面
4. 学习状态管理：@State → @Prop → @Link → @Provide/@Consume，逐步深入
5. 了解鸿蒙分布式能力：跨设备调用、分布式数据对象等鸿蒙特色功能
6. 安装 DevEco Studio：华为官方 IDE，提供模拟器、预览、调试一体化体验

七、总结

鸿蒙选择 ArkTS 是一个务实而面向未来的决定：站在 TypeScript 这个成熟生态的肩膀上，用最小的学习成本换取类型安全和高性能，同时通过声明式 UI 语法统一了逻辑与界面的表达方式。

如果你有 Web 前端开发经验，过渡到鸿蒙开发会比想象中更快。如果你是移动端开发者（Android/iOS），声明式 UI 的思想也正在成为行业主流——SwiftUI、Jetpack Compose 走的是同一条路。

语言只是工具，理解"状态驱动视图"的思维方式，才是掌握现代 UI 开发的关键。