当前位置：首页 > article >正文

HarmonyOS NEXT开发实战——TypeScript快速入门与ArkTS介绍

article 2025/3/31 16:01:25

TypeScript核心特性精要

类型系统深度解析

TypeScript作为JavaScript的超集，其核心优势在于强大的静态类型系统。我们通过类型注解为代码增加约束，使开发阶段即可捕获潜在错误，提升代码健壮性。

基础类型强化

// 显式类型声明示例
let userId: number = 1001;          // 数值类型
let deviceId: string = "HUAWEI_01"; // 字符串类型
let isActive: boolean = true;       // 布尔类型

复合类型应用

元组类型：严格约束元素类型和顺序

type DeviceInfo = [string, number, boolean];
let currentDevice: DeviceInfo = ["HarmonyOS", 3.1, true];

枚举类型：增强可读性与维护性

enum RuntimeStatus {
  INITIALIZING = 0,
  RUNNING = 1,
  SUSPENDED = 2,
  TERMINATED = 3
}
let systemStatus: RuntimeStatus = RuntimeStatus.RUNNING;

接口约束：定义对象结构契约

interface SensorData {
  type: string;
  value: number;
  timestamp: Date;
  readonly id: string; // 只读属性
}

const tempSensor: SensorData = {
  type: "temperature",
  value: 26.5,
  timestamp: new Date(),
  id: "SENSOR_001"
};

高级类型特性

联合类型：

function format(input: string | number): string {
  return input.toString().padStart(2, '0');
}

类型推断：

const versionList = ["3.0", "3.1", "4.0"]; // 自动推断为string[]

泛型编程：

class DataCache<T> {
  private data: T;

  constructor(initialData: T) {
    this.data = initialData;
  }

  get cachedData(): T {
    return this.data;
  }
}

const numberCache = new DataCache<number>(1024);

ArkTS架构设计与最佳实践

工程结构规范

harmony-project/
├── entry/src/main/ets
│   ├── common/                 # 公共资源
│   ├── entryability/           # 应用入口
│   ├── model/                  # 数据模型
│   ├── pages/                  # 视图页面
│   ├── view/                   # 自定义组件
│   └── viewmodel/              # 业务逻辑
└── resources/                  # 静态资源

状态管理进阶

@Link双向绑定：

@Component
struct DeviceStatusPanel {
  @Link deviceStatus: boolean;

  build() {
    Column() {
      Toggle({ checked: this.deviceStatus })
        .onChange((value) => {
          this.deviceStatus = value;
        })
    }
  }
}

@Prop单向传递：

@Component
struct SensorItem {
  @Prop sensorValue: number;
  
  build() {
    Text(`当前值：${this.sensorValue}`)
      .fontColor(this.sensorValue > 30 ? Color.Red : Color.Black)
  }
}

组件化开发模式

声明式UI构建：

@Builder
function ChartLegend(legendItems: string[]) {
  Column() {
    ForEach(legendItems, (item) => {
      Row() {
        Circle().width(12).height(12)
        Text(item).margin({ left: 8 })
      }
    })
  }
}

生命周期控制：

@Component
struct SystemMonitor {
  aboutToAppear() {
    this.startDataPolling();
  }

  aboutToDisappear() {
    this.stopDataPolling();
  }

  onBackPress() {
    if (this.hasUnsavedData) {
      showToast("请先保存数据");
      return true; // 阻止默认返回行为
    }
    return false;
  }
}

性能优化策略

列表渲染优化：

List({ space: 10 }) {
  ForEach(this.deviceList, 
    (device) => {
      ListItem() {
        DeviceCard({ deviceInfo: device })
      }
    }, 
    device => device.id // 唯一键生成器
  )
}
.padding(10)
.listDirection(Axis.Vertical)

状态精准更新：

@Observed
class DeviceModel {
  status: boolean = false;
  @Watch('onStatusChange') 
  voltage: number = 0;

  onStatusChange() {
    this.calibrateVoltage();
  }
}