初识 ArkTS：HarmonyOS 原生语言的语法基础与组件开发初体验 HarmonyOS 5.0.0 或以上-CSDN博客

适配版本：HarmonyOS 5.0.0 或以上
阅读目标：掌握 ArkTS 的基本语法、组件开发方式、变量与响应式状态的使用

🧠 一、ArkTS 是什么？

ArkTS 是华为自研的编程语言，基于 TypeScript 拓展，专为 HarmonyOS 设计，具有：

静态类型系统
装饰器支持（@State、@Entry 等）
面向组件的声明式语法（类似 Vue/React）
与 ArkUI 框架紧密结合，适合构建跨设备 UI

✍️ 二、ArkTS 基础语法速览

1. 变量与类型

let name: string = '鸿蒙';
let count: number = 0;
let isReady: boolean = true;

2. 数组与对象

let list: string[] = ['A', 'B', 'C'];
let user: { name: string; age: number } = { name: '张三', age: 18 };

3. 函数定义

function greet(name: string): string {
  return `Hello, ${name}`;
}

💡 三、ArkTS 组件结构解析

一个组件通常由以下三部分组成：

@Entry // 入口组件
@Component // 表明这是一个组件
struct MyComponent {
  @State count: number = 0 // 响应式变量

  build() {
    // 渲染逻辑
  }
}

🔁 状态响应机制

@State：内部状态变化时自动触发 UI 更新
@Prop：外部传入的只读属性
@Link：双向绑定属性（类似 Vue v-model）

🧪 四、实战代码：构建一个计数器组件

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

  build() {
    Column() {
      Text(`当前计数：${this.count}`)
        .fontSize(22)
        .margin({ bottom: 20 })

      Row() {
        Button('-1')
          .onClick(() => this.count--)
          .margin({ right: 10 })

        Button('+1')
          .onClick(() => this.count++)
      }
    }
    .padding(20)
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .width('100%')
    .height('100%')
  }
}

📊 五、关键语法讲解

语法项	示例	说明
`@State`	`@State count: number = 0`	组件内部响应式变量
`@Entry`	`@Entry`	应用入口组件标记
`@Component`	`@Component`	ArkTS 中每个组件都必须添加
`build()`	`build() { ... }`	UI 构建逻辑，返回布局组件树
UI 组件	`Column`, `Row`, `Text`, `Button`	ArkUI 提供的基础 UI 组件

✅ 六、小结

学习点	收获说明
ArkTS 基础语法	类似 TypeScript，更适合前端开发者入门
组件模型理解	类似 React + Vue 的组合，结构清晰
状态响应机制	基于注解装饰器驱动更新，开发体验高效
实战能力构建	已掌握组件声明 + 状态更新 + UI 编排技巧

📘 下一篇预告

第5篇｜Stage模型详解：UIAbility 与 ExtensionAbility 的区别与使用场景

将详细讲解 HarmonyOS 5 中的 Stage 模型、各类 Ability 的职责划分与生命周期。