ArkTS 入门指南：快速上手鸿蒙应用开发

陆业聪

发布于 2024-07-24 09:15:37

7040

发布于 2024-07-24 09:15:37

ArkTS 是一种基于 TypeScript 的编程语言，专为鸿蒙应用开发而设计。本文将为读者介绍 ArkTS 的基本概念和入门技巧，帮助读者快速上手鸿蒙应用开发。

一、ArkTS 简介

ArkTS 是基于 TypeScript 的一种编程语言，主要用于鸿蒙应用的 UI 界面和业务逻辑开发。TypeScript 是一种 JavaScript 的超集，为开发大型应用添加了类型检查和其他特性，如类、接口、模块等。ArkTS 在 TypeScript 的基础上，进行了一些针对鸿蒙系统的优化和定制。

ArkTS 的主要优点包括：

静态类型检查：ArkTS 在编译时进行类型检查，可以在代码运行前发现和修复错误。
更好的 IDE 支持：由于有了类型信息，IDE 可以提供更好的自动完成、导航和重构功能。
更易于维护和理解：类型注解和编译时检查使得代码更易于理解和维护。

二、创建 ArkTS 项目

在搭建好开发环境后，可以开始创建 ArkTS 项目。以下是创建 ArkTS 项目的基本步骤：

打开 DevEco Studio，点击 File -> New -> Project，选择适合的模板作为项目类型。

输入项目名称、包名等信息，然后点击 Next。
点击 Finish，DevEco Studio 将自动创建一个 ArkTS 项目。

三、鸿蒙工程的基本结构

├── AppScope
│   ├── app.json5
│   └── resources
│       └── base
│           ├── element
│           │   └── string.json
│           └── media
│               └── app_icon.png
├── build-profile.json5
├── entry
│   ├── build-profile.json5
│   ├── hvigorfile.ts
│   ├── obfuscation-rules.txt
│   ├── oh-package.json5
│   └── src
│       ├── main
│       │   ├── ets
│       │   │   ├── entryability
│       │   │   │   └── EntryAbility.ets
│       │   │   └── pages
│       │   │       └── Index.ets
│       │   ├── module.json5
│       │   └── resources
│       │       ├── base
│       │       │   ├── element
│       │       │   │   ├── color.json
│       │       │   │   └── string.json
│       │       │   ├── media
│       │       │   │   ├── background.png
│       │       │   │   ├── foreground.png
│       │       │   │   ├── layered_image.json
│       │       │   │   └── startIcon.png
│       │       │   └── profile
│       │       │       └── main_pages.json
│       │       ├── en_US
│       │       │   └── element
│       │       │       └── string.json
│       │       ├── rawfile
│       │       └── zh_CN
│       │           └── element
│       │               └── string.json
│       ├── mock
│       │   └── mock-config.json5
│       ├── ohosTest
│       │   ├── ets
│       │   │   ├── test
│       │   │   │   ├── Ability.test.ets
│       │   │   │   └── List.test.ets
│       │   │   ├── testability
│       │   │   │   ├── TestAbility.ets
│       │   │   │   └── pages
│       │   │   │       └── Index.ets
│       │   │   └── testrunner
│       │   │       └── OpenHarmonyTestRunner.ets
│       │   ├── module.json5
│       │   └── resources
│       │       └── base
│       │           ├── element
│       │           │   ├── color.json
│       │           │   └── string.json
│       │           ├── media
│       │           │   └── icon.png
│       │           └── profile
│       │               └── test_pages.json
│       └── test
│           ├── List.test.ets
│           └── LocalUnit.test.ets
├── hvigor
│   └── hvigor-config.json5
├── hvigorfile.ts
├── local.properties
├── oh-package-lock.json5
├── oh-package.json5
└── oh_modules

鸿蒙工程的基本结构主要包括以下部分：

AppScope：这是应用的全局范围，包含全局配置文件app.json5和全局资源目录resources。resources目录下的base目录包含了全局的元素和媒体资源。
build-profile.json5：这是构建配置文件，包含了构建过程中需要的各种配置信息。
entry：这是应用的入口模块，包含了入口模块的配置文件build-profile.json5、hvigorfile.ts、obfuscation-rules.txt和oh-package.json5，以及源代码目录src。src目录下包含了入口模块的主要代码和资源。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

运行效果如下：

src/main：这是入口模块的主要代码和资源目录，包含了元素模板（ETS）文件、模块配置文件module.json5和资源目录resources。
src/main/ets：这是元素模板（ETS）文件目录，包含了应用的主要页面和服务的代码。
src/main/resources：这是资源目录，包含了应用的颜色、字符串、媒体文件和配置文件等资源。
hvigor：这是Hvigor工具的配置目录，包含了Hvigor工具的配置文件hvigor-config.json5。
hvigorfile.ts：这是Hvigor工具的配置文件。
local.properties：这是本地属性文件，包含了本地环境的配置信息。
oh-package-lock.json5和oh-package.json5：这是包管理器的配置文件，包含了应用的依赖信息。
oh_modules：这是包管理器安装的模块目录。

鸿蒙工程的结构比较清晰，每个目录和文件都有明确的用途，这有助于开发者更好地理解和管理项目。

四、ArkTS 关键语法和使用示例

下面我们将介绍一些 ArkTS 的关键语法特性，并通过实际的使用示例来帮助读者更好地理解和掌握这些特性。

1. 类型注解

类型注解是 TypeScript 的核心特性之一，它允许在变量、函数参数和函数返回值上添加类型信息。这有助于在编译时发现和修复类型错误。

示例：

let message: string = "Hello, HarmonyOS";
let count: number = 10;

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

let greeting: string = greet("HarmonyOS");

2. 接口

接口是 TypeScript 中定义复杂类型的一种方式，它可以描述一个对象的结构。接口可以用于类型检查，确保对象符合预期的结构。

示例：

interface Person {
  name: string;
  age: number;
}

function showPersonInfo(person: Person) {
  console.log(`Name: ${person.name}, Age: ${person.age}`);
}

let person: Person = { name: "John", age: 30 };
showPersonInfo(person);

3. 类

类是 TypeScript 中实现面向对象编程的基本构造。类可以包含属性、方法、构造函数和访问修饰符等特性。

示例：

class Animal {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  public speak(): void {
    console.log(`${this.name} makes a noise.`);
  }
}

let animal = new Animal("Dog");
animal.speak();

4. 继承

TypeScript 支持类之间的继承，子类可以继承父类的属性和方法，并可以覆盖或扩展它们。

示例：

class Dog extends Animal {
  speak(): void {
    console.log(`${this.name} barks.`);
  }
}

let dog = new Dog("Buddy");
dog.speak(); // Output: Buddy barks.

5. 泛型

泛型是 TypeScript 中实现可重用代码的一种方式，它允许在定义函数、接口和类时使用类型参数。这有助于编写灵活且类型安全的代码。

示例：

function identity<T>(arg: T): T {
  return arg;
}

let output1: string = identity<string>("myString");
let output2: number = identity<number>(10);

6. 模块

ArkTS 支持模块化编程，你可以把代码分割成多个模块，每个模块有自己的作用域，并通过导出（export）和导入（import）进行模块之间的交互。

示例：

// math.ts
export function add(x: number, y: number): number {
  return x + y;
}

export function subtract(x: number, y: number): number {
  return x - y;
}

// app.ts
import { add, subtract } from './math';

console.log(add(10, 5)); // Output: 15
console.log(subtract(10, 5)); // Output: 5

7. 异步编程

ArkTS 支持 Promise 和 async/await 语法，使得异步编程变得更加简洁明了。

示例：

async function fetchData(url: string): Promise<Data> {
  let response = await fetch(url);
  let data = await response.json();
  return data;
}

fetchData('https://api.example.com/data')
  .then(data => console.log(data))
  .catch(error => console.error(error));

8. 类型别名

类型别名允许你为现有类型创建一个新的名字。这对于创建复杂类型或提高代码可读性非常有用。

示例：

type Point = {
  x: number;
  y: number;
};

function drawPoint(point: Point): void {
  console.log(`Drawing point at (${point.x}, ${point.y})`);
}

let point: Point = { x: 10, y: 20 };
drawPoint(point);

9. 类型保护

类型保护是一种检查变量类型的方法，可以在编译时确保变量具有正确的类型。这对于处理联合类型或处理类型转换时非常有用。

示例：

type Shape = Circle | Square;

function getArea(shape: Shape): number {
  if (shape instanceof Circle) {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.width * shape.height;
  }
}

10. 枚举

枚举是一种特殊的类型，它允许你为一组有限的值定义友好的名字。枚举在处理一组固定值时非常有用，如状态、颜色、方向等。

示例：

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

function move(direction: Direction): void {
  console.log(`Moving in direction: ${Direction[direction]}`);
}

move(Direction.Up);

11. 映射类型

映射类型允许你根据现有类型创建新的类型，例如将一个对象的所有属性设置为只读或可选。这在处理现有类型时非常有用，可以避免创建重复的类型定义。

示例：

type ReadonlyPoint = Readonly<Point>;

let readonlyPoint: ReadonlyPoint = { x: 10, y: 20 };
readonlyPoint.x = 30; // Error: Cannot assign to 'x' because it is a read-only property

为了更深入地学习 ArkTS，建议参考鸿蒙开发者文档。