ArkTS 是什么？鸿蒙最强开发语言语法全讲解（附实操案例）

你听说过 TypeScript，也听过 JavaScript，但你真的了解鸿蒙背后的“灵魂语言”ArkTS 吗？今天这篇文章带你深入掌握 ArkTS 的语法精髓，并用实战项目验证它的强大。

🧠 一、什么是 ArkTS？

ArkTS = TypeScript + 鸿蒙独有语法能力

它是华为为 HarmonyOS NEXT 打造的编程语言，兼容 TypeScript 语法的同时：

• 引入了全新的响应式开发范式（@State、@Prop 等）
• 增强了组件式开发能力
• 更适配多端运行（一次开发，多设备部署）

🔎 二、ArkTS 和 TypeScript 有啥区别？

📦 三、ArkTS 基础语法速览

@Entry
@Component
struct HelloWorld {
  @State text: string = '你好 ArkTS！'

  build() {
    Column() {
      Text(this.text)
      Button('点击我')
        .onClick(() => {
          this.text = '按钮已点击'
        })
    }
  }
}

✅ 核心语法说明：

• @Entry：程序入口组件
• @Component：定义为 UI 组件
• @State：响应式状态，状态变更自动更新 UI
• build()：类似 Vue 的模板函数，声明 UI

⚙️ 四、组件通信：@Prop/@Link/@Provide/@Consume

示例：父传子

// 父组件
@Component
struct Parent {
  build() {
    Child({ msg: '来自父组件的消息' })
  }
}

// 子组件
@Component
struct Child {
  @Prop msg: string

  build() {
    Text(this.msg)
  }
}

@Prop 就是 props，父传子专用；支持基本类型和对象传递。

🧪 五、实操项目：ArkTS 构建 ToDo 应用

✅ 功能需求：

• 添加任务
• 展示任务列表
• 删除任务项

✅ 项目代码简版：

@Entry
@Component
struct TodoApp {
  @State task: string = ''
  @State list: Array<string> = []

  build() {
    Column() {
      Row() {
        TextInput({ placeholder: '请输入任务' })
          .onChange(v => this.task = v)
        Button('添加')
          .onClick(() => {
            if (this.task) {
              this.list.push(this.task)
              this.task = ''
            }
          })
      }

      ForEach(this.list, (item, index) => {
        Row() {
          Text(item)
          Button('删除').onClick(() => this.list.splice(index, 1))
        }
      }, item => item)
    }
  }
}

🎯 实操亮点：

• ArkTS 的响应式状态管理无需外部框架
• List 渲染用 ForEach 实现，和 React/Vue 不同但易懂
• 没有 class，没有 render 函数，全部声明式结构

💡 六、ArkTS 开发注意事项

🧭 七、总结与展望

• ✅ ArkTS 是鸿蒙系统的“第一语言”
• ✅ 上手门槛低、语法现代、支持响应式和声明式开发
• ✅ 未来所有 HarmonyOS NEXT 应用将优先支持 ArkTS

📘 下篇预告

《构建你的第一个鸿蒙组件化 UI 页面》——打造可复用、可组合的鸿蒙自定义组件，UI 设计师看了都说香！