ArkTS 语言基础

最新推荐文章于 2025-12-20 00:52:11 发布

原创最新推荐文章于 2025-12-20 00:52:11 发布 · 969 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙 #前端

1.什么是 ArkTS?

ArkTS 是鸿蒙生态的应用开发语言。它在保持 TypeScript（简称TS）基本语法风格的基础上，对TS的生态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以更简洁，更自然的方式开发高性能应用。

2.ArkTS声明式语法简介和应用

基于ArkTS声明式开发范式提供了组件，以声明式进行组合和扩展来描述应用程序的UI界面，并且还提供了数据绑定和事件处理机制，实现应用交互逻辑。

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

  build() {
    Row(){
      Column(){
        Text("你好，鸿蒙").fontSize(30).fontWeight(FontWeight.Bold)
        Text(this.message).fontSize(30).fontWeight(FontWeight.Bold)
        Button('点击').width(120).height(40).onClick(()=>{
          this.message = "欢迎学习eTs声明式编程"
        })
      }.width('100%')
    }.height('100%')
  }
}

ArkTS声明式开发范式构建规范组成。

名称	描述
装饰器	用于装饰类，结构，方法和变量。例如：@Entry、@Component、@State都是装饰器
UI描述	声明式描述UI结构，例如build()方法中的代码块
内置组件	框架中默认内置的基本组件和布局组件，开发者可以直接调用，如Column、Text、Divider、Button等
属性方法	用于配置组件属性，如fontSize()、width()、height()、color()等
事件方法	在事件方法的回调中添加组件响应逻辑，例如：为Button组件添加onClick方法，在onClick方法的回调中添加点击响应逻辑
自定义组件	可重用的UI单元，可以与其他组件组合，如@Component装饰的structHello

3.ArkTS定义变量、数据类型、函数

3.1 ArkTS定义变量和赋值

定义不赋值：变量名：类型

@Entry
@Component
struct Page1 {
	//定义不赋值：变量名：类型
  flag : boolean
  msg : string
  build() {
  }

定义并赋值：变量名：类型 = 值

@Entry
@Component
struct Page1 {
	//定义并赋值：变量名：类型 = 值
  flag : boolean = true
  msg : string = '加油'
  build() {
  }
}

3.2 ArkTS 数据类型

数值类型：number
字符串类型：string
布尔类型：boolean （true | false）
null类型：null（代表空、代表空指针）
undefined类型：undefined（没有赋值）
对象类型：object
数组类型：array（相同类型的若干个元素组织在一起的数据）
元组类型：tuple（用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。）
任意类型：any（表示允许赋值为任意类型，如果在声明的时候，未指定其类型未进行初始赋值，那么它会被识别为任意值类型。）
void类型：void（它表示没有任何类型，用于标识方法返回值的类型，表示该方法没有返回值）
never类型：永不存在的值类型
1. never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型
枚举类型：enum（定义取值被限定在一定范围内的场景）
1. enum没有初始化，默认初始化值为0.每项值+1，数值不能作为健名

3.3 ArkTS函数

ArkTS函数声明函数名( 函数参数 [ 参数名:参数值... ] ) : 函数返回值

//函数声明
addNum(x:number,y:number):number
{
  return x + y
}

ArkTS函数表达式 ( [方法参数]... ) : 返回值类型 => { return 具体类型

//函数表达式
myfun = (s1:string) : string => { return s1 }

4.ArkTS修饰器说明

4.1 ArkTS修饰器说明

修饰器@Decorator不仅可以修饰类或结构体，还可以修饰类的方法和属性。多个修饰器可以叠加到目标元素，定义在同一行上或者在多行上，推荐定义在多行上。

部分修饰器列表

修饰器	修饰内容	说明
@Component	struct	结构体在装饰后具有基于组件的能力，需要实现build方法来更新UI
@Entry	struct	组件被修饰后作为页面的入口，页面加载时将被渲染显示
@Preview	struct	用@Preview修饰的自定义组件可以在DevEco Studio的预览器上进行预览，加载页面时，将创建并呈现@Preview修饰的自定义组件
@Builder	方法	在@Builder修饰的方法用通过声明式UI描述，可以在一个自定义组件内快速生成多个布局内容
@Extend	方法	@Extend修饰器将新的属性函数添加到内置组件上，通过@Extend修饰器可以快速定义并复用组件的自定义样式
@CustomDialog	struct	@CustomDialog修饰器用于修饰自定义弹框
@State	基本数据类型，类，数组	修饰的状态数据被修改时会触发组件的build方法进行UI界面更新
@Prop	基本数据类型	修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，更新当前组件的UI

5.链式调用

开发者以 '.' 链式调用的方式配置UI结构及其属性，事件等

属性的链式调用

@Entry
@Component
struct Page1_3 {
  build() {
    Row() {
      Column() {
        Text('欢迎您').fontSize(30).fontColor("red").fontWeight(FontWeight.Bold)
      }
      .width('100%')

    }
    .height('100%')
  }
}

事件的链式调用

@Entry
@Component
struct Page1_3 {
  @State text : string = "欢迎您"
  build() {
    Row() {
      Column() {                          Text(this.text).fontSize(30).fontColor("red").fontWeight(FontWeight.Bold).onClick(()=>{
          this.text = "编程世界开启"
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}