鸿蒙ArkTS语言基础语法详解

eqa11

已于 2024-12-09 10:47:30 修改

阅读量1k

点赞数 9

文章标签： harmonyos 华为

于 2024-12-09 10:43:44 首次发布

本文链接：https://blog.csdn.net/NiNg_1_234/article/details/144340662

版权

鸿蒙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.Green
  build() {
    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.Green
  build() {
    Button('clickMe').height(100).width(100)
      .stateStyles({
        normal: {
          .backgroundColor(this.normalColor)
        },
        focused: {
          .backgroundColor(this.focusedColor)
        }
      })
      .onClick(() => {
        this.focusedColor = Color.Pink
      })
      .margin('30%')
  }
}