HarmonyOS Next鸿蒙开发：Arkts 基础语法

足球哥
554 阅读7分钟

eTs声明式语法简介和应用

# 1.1 eTS声明式语法简介

在API version 10之前，ArkTS（.ets文件）完全采用了标准TS的语法。从API version 10 Release起，ArkTS的语法规则基于上述设计考虑进行了明确定义，同时，SDK增加了在编译流程中对.ets文件的ArkTS语法检查，通过编译告警或编译失败提示开发者适配新的ArkTS语法。

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

现场演示ui编程 声明式语法，描述在build 里面

什么是“声明式” ArkTS提供了简洁自然的声明式语法、组件化机制、数据-UI自动关联等能力，实现了贴近自然语言，书写效率更高的编程方式。 那么，什么是声明式?一般来说我们对于声明式的理解都是相对于命令式而言的。 师傅，去XX图书馆。下路左转，再前进1000米，面面路口掉头，前进150米,右拐就到了。 师傅，去XX图书馆。 命令式 详细的命令机器怎么(How)去处理一件事情以达到你想要的结果(What)结果取决于水平。 声明式 只告诉你想要的结果(What)，机器自己摸索过程(How)。机器需具备一定智能性。 最常见的“声明式”语言，可以说是SOL，这是一门数据库语言 SELECT * from dogs INNER JOIN ownersWHEREdog.owner id = owner.id

“声明式U”的好处 在很多特定的领域，我们往往更喜欢“声明式”的语言。比如数据处理领域，我们上一张胶片中所提到的SQL语言就是其中的代表之一。 在前端界面开发领域，也很少有人愿意使用“命令式”语言。因为在这些特定的领域已经有开发人员帮我们归纳和提取了完备的what，消除了实践“声明式”的最大障碍例如ArkU已经提供了丰富的组件库，供开发者使用 代码风格:声明式 UI使用更抽象、更高级的语法，通常使用配置、声明或描述来构建用户界面;命令式 UI更侧重于编写详细的指令和操作来控制用户界面的构建和交互。 可维护性:声明式 UI 更易于维护，因为它的代码更清晰、简洁，易于理解;命令式 UI则可能更复杂、更冗长，因为需要明确指定每个步骤和操作的细节

eTS声明式开发范式构建规范组成

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

1.2 eTs定义变量、数据类型、函数

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

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

注意： let关键字可以在块级作用域中声明变量，帮助程序员避免错误。因此，ArkTS不支持var，请使用let声明变量

1.3 eTS 数据类型

ets 数字类型：number num:number = 0

eTS之null类型和undefined类型，null代表空，代表空指针; undefined是定义了没有赋值。

@Entry
@Component
struct CardPage {
  n1:undefined = undefined
  n2:null=null

  u1 : undefined
  u2 : null = null

  build() {
    Row() {
      Column() {
        Text("结果1："+(this.n1 == this.n2)).fontSize(50) //结果true
		
        Text("结果2："+(this.u1 == this.u2)).fontSize(50) //结果 false
       // Card({ content: imageBuilder })
      }
      .width('100%')
    }
    .height('100%')
  }
}

运算符 设置变量A的值总是10，变量B的值总是20

运算符：== 描述：比较两个运算元是否相等，如果相等则结果为 true 例子：(A == B)为 false，A == '10' 为 true

运算符：=== 描述：比较两个运算元的值和类型是否都相等，如果都相等则结果为 true 例子：(A === B)为 false，A === '10' 为 false

运算符：!= 描述：比较两个运算元是否不等，如果不等则结果为 true 例子：(A != B) 为 true

运算符：!== 描述：比较两个运算元的类型和值是否都不等，如果都不等则结果为 true 例子：(A !== '10') 为 true

1.4 eTs 对象类型 object

obj :object = {x:"eTs语言"}



  //5.0 之后 Object literal must correspond to some explicitly declared class or interface 翻译后 对象字面必须与某个明确声明的类或接口相对应
  //obj :object = {x:"eTs语言"}

  person :Preson = {name:"Alan.Huang"}
  
 class Preson{
  name?:string
}

注： 仅支持一个静态块 ArkTS不允许类中有多个静态块，如果存在多个静态块语句，请合并到一个静态块中。 类参数，不支持this类型

TypeScript

interface ListItem {
  getHead(): this
}
class C {
  n: number = 0
  m(c: this) {
    // ...
  }
}

Arkts

interface ListItem {
  getHead(): ListItem
}

class C {
  n: number = 0
  m(c: C) {
    // ...
  }
}

1.5 eTs之数组类型:array，相同类型的若干个元素组织在一起的数据

d1 :number[] = [1,2,3]

1.6 eTs之元组类型:tuple

用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。

  e = ['鸿蒙',20]
  e1:[string,number] = ['鸿蒙',20]

1.7 any 4.0

表示允许赋值为任意类型,如果在声明的时候，未指定其。eTS之任意类型:any，:类型未进行初始赋值，那么它会被识别为任意值类型。 5.0 已经不支持 ArkTS不支持any和unknown类型。显式指定具体类型。 ArkTS不支持any和unknown类型。显式指定具体类型。

  g:any = []
  g2:any = {name:'华为',age:20}

1.8 eTS之void类型:void

示该方法没有返回值 它表示没有任何类型，用于标识方法返回值的类型

  fun = ():void =>{
    console.log('这是一个函数')
  }

1.9 eTS之never类型:永不存在的值类型

never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回

  runError(message:string):never{
    throw new Error(message)
  }

2.0 eTs之枚举类型:enum

定义取值被限定在一定范围内的场景。 enum没有初始化，默认初始化值为0，每项值+1,数值不能作为键名

export enum BuyOrSell {
  Buy,
  Sell
}

函数定义

eTs函数声明 定义： 函数名 (函数参数[参数名:参数值.N]): 函数返回值

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

eTs函数表达式

([方法參数]..N):返回值类型 =>{return 具体类型} ([方法參数]..N): void =>{}

myFun = (s1:string):string =>{ return s1}

myFun1 = (s1:string):void =>{ }

myFun 是函数变量 传参s1 是字符串类型，返回也是一个字符串类型

链式调用

开发者以链式调用的方式配置UI结构及其属性、事件等。 属性的链式调用，用点来做链式调用

Text("e1值为："+(this.e1[0])).fontSize(20).fontWeight(FontWeight.Bold)

事件的链式调用

Button().onAppear(()=>{

}).onClick(()=>{

})

两个$的 $$ 语法：内置组件双向同步

Text(this.message)
TextInput({text:$$this.message})

这里很重要，如果你是前端转鸿蒙开发，一定要记得看一下官方文章，我经验之谈 Typescript 与 Artks 区别点

developer.huawei.com/consumer/cn…

此外还有箭头函数概念 image.png

avatar
文章
阅读
粉丝