鸿蒙ArkTS语言基础语法详解

鸿蒙ArkTS语言基础语法详解

一、引言

鸿蒙操作系统（HarmonyOS）的ArkTS语言是一种基于TypeScript开发的语言，专为HarmonyOS系统开发而设计。ArkTS结合了JavaScript的灵活性和TypeScript的严谨性，使得开发者能够快速、高效地开发出高质量的HarmonyOS应用程序。本文将详细介绍ArkTS语言的基本语法和特点。

二、ArkTS语言概述

1. ArkTS语言特点

ArkTS语言具有以下特点：

• 静态类型检查：通过类型注解进行类型检查，减少因类型错误导致的bug。
• 异步/同步编程：支持基于Promise和async/await的异步/同步编程方式。
• 内置模块：内置常用模块，如文件系统、网络请求、图形渲染等。
• 兼容性：使用TypeScript语法，与JavaScript代码无缝集成，可编译成JavaScript代码在其他平台运行。

2. TypeScript基础语法

TypeScript是JavaScript的超集语言，支持静态类型，提高代码的可维护性和可读性。TypeScript代码可在编译时转换成JavaScript代码，在浏览器和Node.js环境下运行。

2.1 类型注解

TypeScript通过类型注解实现静态类型检查：

let name: string = "TypeScript";
function add(a: number, b: number): number {return a + b;
}

2.2 接口

接口描述对象的形状，包括属性和方法的类型：

interface Person {name: string;age: number;sayHello(): void;
}
let tom: Person = {name: "Tom",age: 18,sayHello: function() {console.log(`Hello, my name is ${this.name}!`);}
};

2.3 泛型

泛型允许编写参数化类型，提高代码的通用性和可读性：

function identity<T>(arg: T): T {return arg;
}
let output = identity<string>("TypeScript");
console.log(output); // 输出 TypeScript

2.4 类的继承

TypeScript支持类的继承，实现代码的重用和扩展：

class Animal {name: string;constructor(name: string) {this.name = name;}move(distance: number = 0) {console.log(`${this.name} moved ${distance}m.`);}
}
class Dog extends Animal {bark() {console.log("Woof! Woof!");}
}
let dog = new Dog("Bobby");
dog.move(10);
dog.bark();

2.5 类的访问修饰符

访问修饰符控制类的属性和方法的访问权限：

class Person {protected name: string;constructor(name: string) {this.name = name;}protected sayHello() {console.log(`Hello, I'm ${this.name}.`);}
}
class Student extends Person {constructor(name: string) {super(name);}public sayHelloToTeacher(teacher: Person) {console.log(`Hello, ${teacher.name}, I'm ${this.name}.`);}
}
let tom = new Student("Tom");
let bob = new Person("Bob");
tom.sayHelloToTeacher(bob);
bob.sayHello();

三、ArkTS的基本组成

ArkTS的基本组成包括装饰器、UI描述、自定义组件、系统组件、属性方法和事件方法。ArkTS扩展了多种语法范式，如@Builder/@BuilderParam、@Extend/@Style和stateStyles，以使开发更加便捷。

3.1 装饰器

装饰器用于装饰类、结构、方法以及变量，并赋予其特殊的含义。例如，@Entry、@Component和@State都是装饰器。

3.2 UI描述

UI描述以声明式的方式来描述UI的结构，例如build()方法中的代码块。

3.3 自定义组件

自定义组件是可复用的UI单元，可组合其他组件。

3.4 系统组件

ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用。

3.5 属性方法和事件方法

组件可以通过链式调用配置多项属性和设置多个事件的响应逻辑。

四、自定义组件

自定义组件基于struct实现，struct + 自定义组件名 + {…}的组合构成自定义组件。对于struct的实例化，可以省略new。

4.1 build()函数

build()函数用于定义自定义组件的声明式UI描述，自定义组件必须定义build()函数。

@Component
struct HelloComponent {@State message: string = 'Hello, World!';build() {Row() {Text(this.message).onClick(() => {this.message = 'Hello, ArkUI!';})}}
}
@Entry
@Component
struct ParentComponent {build() {Column() {Text('ArkUI message')HelloComponent({ message: 'Hello, World!' });Divider()HelloComponent({ message: '你好!' });}}
}

4.2 生命周期

页面生命周期和组件生命周期提供了多个生命周期接口，如onPageShow、onPageHide、onBackPress、aboutToAppear和aboutToDisappear。

五、装饰函数

5.1 @Builder装饰器

@Builder主要是定义页面UI，可以装饰指向自定义组件内自定义构建函数或全局函数。

5.2 @BuilderParam装饰器

@BuilderParam用来装饰指向@Builder方法的变量，为自定义组件增加特定的功能。

5.3 @Styles装饰器

@Styles装饰器主要是定义公共样式，可以装饰指向全局或组件内。

5.4 @Extend装饰器

@Extend用于扩展原生组件样式，作用和@Styles差不多，但@Extend仅支持定义在全局。

六、多态样式

stateStyles是属性方法，可以根据UI内部状态来设置样式，类似于css伪类，但语法不同。ArkUI提供以下四种状态：focused、normal、pressed和disabled。

6.1 基本使用

@Entry
@Component
struct CompWithInlineStateStyles {@State focusedColor: Color = Color.Red;normalColor: Color = Color.Greenbuild() {Column() {Button('clickMe').height(100).width(100).stateStyles({normal: {.backgroundColor(this.normalColor)},focused: {.backgroundColor(this.focusedColor)}}).onClick(() => {this.focusedColor = Color.Pink}).margin('30%')}}
}

6.2 @Styles和stateStyles联合使用

@Entry
@Component
struct MyComponent {@Styles normalStyle() {.backgroundColor(Color.Gray)}@Styles pressedStyle() {.backgroundColor(Color.Red)}build() {Column() {Text('Text1').fontSize(50).fontColor(Color.White).stateStyles({normal: this.normalStyle,pressed: this.pressedStyle,})}}
}

6.3 stateStyles里使用常规变量和状态变量

@Entry
@Component
struct CompWithInlineStateStyles {@State focusedColor: Color = Color.Red;normalColor: Color = Color.Greenbuild() {Button('clickMe').height(100).width(100).stateStyles({normal: {.backgroundColor(this.normalColor)},focused: {.backgroundColor(this.focusedColor)}}).onClick(() => {this.focusedColor = Color.Pink}).margin('30%')}
}

七、总结

ArkTS语言作为HarmonyOS优选的主力应用开发语言，继承了TypeScript的所有特性，并在此基础上做了进一步扩展。通过掌握ArkTS的基础语法和特性，开发者可以更高效地开发HarmonyOS应用程序。

---

版权声明：本博客内容为原创，转载请保留原文链接及作者信息。

参考文章：

• 鸿蒙next版开发：初识ArkTS语言（基本语法）