HarmonyOS ArkTS 入门（一）

HarmonyOS ArkTS 语言基础详解

ArkTS 是 HarmonyOS 的官方应用开发语言，基于 TypeScript 扩展而来，结合了静态类型检查和动态开发的灵活性。以下从核心特性、语法基础、组件开发等方面系统介绍 ArkTS。

ArkTS 核心特性

静态类型检查

通过 TypeScript 的静态类型系统，在编译阶段捕获类型错误，提升代码健壮性。支持接口、泛型等高级类型特性。

声明式 UI

采用基于组件的声明式开发范式，通过装饰器（如 @Component）描述 UI 结构，与数据驱动视图更新机制深度集成。

状态管理

提供 @State、@Prop、@Link 等装饰器管理组件状态，实现数据与 UI 的双向绑定。

基础语法与类型系统

类型注解

变量、函数参数及返回值可显式标注类型：

typescript 复制代码

let count: number = 42;
function greet(name: string): string {
  return `Hello, ${name}!`;
}

接口与泛型

定义复杂数据结构：

typescript 复制代码

interface User {
  id: number;
  name: string;
}
function getUsers<T>(list: T[]): T[] {
  return list;
}

类与继承

支持 ES6 类语法，结合装饰器扩展功能：

typescript 复制代码

@Entry
@Component
struct MyComponent {
  private value: string = "ArkTS";
  build() { /* UI 结构 */ }
}

组件开发实战

组件定义

使用 @Component 定义可复用 UI 单元：

typescript 复制代码

@Component
struct ButtonComponent {
  label: string = "Click";
  build() {
    Button(this.label)
      .onClick(() => { /* 事件处理 */ });
  }
}

状态管理

@State：组件内部状态，变化触发 UI 更新。
@Prop：父组件传递的不可变数据。
@Link：与父组件双向绑定的数据。

typescript 复制代码

@Component
struct Counter {
  @State count: number = 0;
  build() {
    Text(`Count: ${this.count}`)
    Button("Add").onClick(() => this.count++);
  }
}

布局与样式

Flex 布局

默认采用 Flex 模型，通过 justifyContent、alignItems 控制对齐：

typescript 复制代码

Column() {
  Text("Top").fontSize(20);
  Text("Bottom").fontColor("#FF0000");
}
.width('100%')
.justifyContent(FlexAlign.Center);

样式封装

支持内联样式或外部样式类：

typescript 复制代码

@Styles function customStyle() {
  .width(100)
  .height(100)
  .backgroundColor(Color.Red);
}

生命周期与 API 调用

生命周期钩子

关键生命周期回调：

aboutToAppear：组件即将出现。
aboutToDisappear：组件即将销毁。

设备能力调用

通过 import 使用系统能力模块：

typescript 复制代码

import sensor from '@ohos.sensor';
sensor.on(sensor.SensorId.ACCELEROMETER, (data) => {
  console.log(`X: ${data.x}`);
});

最佳实践建议

类型优先：始终为复杂数据结构定义接口或类型别名。
状态最小化 ：仅将需要响应式更新的数据标记为 @State。
组件拆分：将大型组件拆分为单一职责的小组件。
性能优化 ：避免在 build() 方法中进行耗时操作。

通过结合 TypeScript 的强类型与 HarmonyOS 的声明式 UI 框架，ArkTS 能够显著提升应用开发效率与可靠性。建议从官方示例项目入手，逐步掌握高级模式如 @Watch 监听和自定义弹窗等场景。