ArkTS 语言入门：开启鸿蒙原生开发之旅

ArkTS 是 HarmonyOS 的主力开发语言。它并非一门全新的语言，而是基于 TypeScript（TS）扩展而来的，保留了 TS 的静态类型检查优势，并增加了声明式 UI 开发范式。

对于有 TypeScript/JavaScript 基础的开发者，ArkTS 几乎可以“开箱即用”；对于 Java/Android 开发者，其强类型和类结构也非常亲切。

️ 第一步：环境搭建与项目创建

在开始写代码之前，你需要准备好官方开发工具。

1. 下载工具：访问华为开发者联盟官网，下载并安装 DevEco Studio（建议最新版本）。
2. 配置 SDK：首次启动时，工具会自动引导下载 HarmonyOS SDK。
3. 创建项目：
   • 选择 File → New → Create Project。
   • 选择模板：Empty Ability（这是最基础的空白模板）。
   • 配置项目名称和保存路径，点击 Finish。

核心目录结构解析
项目创建后，关注以下关键文件：

• entry/src/main/ets/pages/Index.ets：主页面代码，我们主要在这里编写 UI 和逻辑。
• entry/src/main/module.json5：模块配置文件，用于声明权限和 Ability 信息。
• AppScope/app.json5：应用全局配置。

第二步：ArkTS 语法基础

ArkTS 严格遵循 TypeScript 的语法规范，但在类型系统上更加严格。

1. 变量声明
必须显式标注类型，禁止隐式 any。

let name: string = "HarmonyOS"; // 可变变量
const version: number = 6.0;    // 常量

2. 核心装饰器
ArkTS 使用装饰器来定义组件和状态，这是声明式 UI 的灵魂：

装饰器	作用	类比 (React/Vue)
@Entry	标识页面的入口组件	-
@Component	定义一个自定义组件	组件定义
@State	定义响应式状态，数据变化驱动 UI 刷新	useState / data

第三步：构建你的第一个界面

打开 Index.ets，你会看到一段默认代码。让我们通过一个计数器案例来理解 ArkTS 的写法。

代码示例：点击按钮数字加 1

@Entry
@Component
struct Index {
  // 1. 定义状态变量，初始值为 0
  @State count: number = 0;

  build() {
    // 2. 描述 UI 结构
    Column({ space: 20 }) { // 垂直布局容器，间距 20
      Text(`当前计数：${this.count}`)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      Button('点击加 1')
        .onClick(() => {
          // 3. 修改状态，UI 会自动刷新
          this.count++; 
        })
        .backgroundColor('#0A59F7')
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center) // 内容垂直居中
  }
}

代码解析：

• 声明式 UI：我们通过 Column、Text、Button 等组件像搭积木一样描述界面。
• 链式调用：.fontSize()、.width() 等方法用于设置样式属性。
• 响应式更新：当 this.count 发生变化时，Text 组件的内容会自动重绘，无需手动操作 DOM。

️ 第四步：运行与调试

1. 启动模拟器：在 DevEco Studio 顶部工具栏选择设备（如 Phone），点击运行按钮。
2. 真机调试：
   • 手机开启“开发者模式”和“USB 调试”。
   • 连接电脑，DevEco Studio 会自动识别设备。
   • 点击运行，应用将自动安装并启动。

进阶学习路线图

掌握了基础语法后，你可以按照以下路径深入：

1. ArkUI 组件库：学习更多容器组件（Row, Stack, List）和通用组件（Image, Input）。
2. 状态管理：理解 @Prop（父子单向同步）、@Link（父子双向同步）和 AppStorage（全局状态）。
3. Ability 生命周期：掌握应用从启动到销毁的生命周期管理。
4. 网络与存储：学习如何使用 http 模块请求数据，以及使用 Preferences 存储本地数据。

现在，打开你的 DevEco Studio，尝试修改上面的代码，比如改变按钮颜色或添加一个新的文本框吧！