介绍二、TypeScript基础类型1.

三、TypeScript基础知识条件语句if语句switch语句

类1.

四、ArkTS基础知识UI规范描述渲染控制状态管理组件生命周期函数

五、ArkTS实践1.

ArkTS是HarmonyOS主力应用开发语言。

它在TypeScript简称TS的基础上匹配ArkUI框架扩展了声明式UI、状态管理等相应的能力让开发者以更简洁、更自然的方式开发跨端应用。

JavaScript是一种属于网络的高级脚本语言已经被广泛应用开发常用来为网页添加各式各样的动态功能为用户提供更流畅美观的浏览效果。

TypeScript是JavaScript的一个超集它扩展了JavaScript的语法通过在JavaScript的基础上添加静态类型定义构建而成是一个开源的编程语言。

ArkTS基于TypeScript语言扩展了声明式UI、状态管理、并发任务等能力。

二、TypeScript基础类型

TypeScript里的所有数字都是浮点数这些浮点数的类型是number。

除了支持十进制还支持二进制、八进制、十六进制

let

有时候我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。

那么我们可以使用

unknown

{console.log(不及格);break;}default:

}函数定义

ES6版本的TypeScript提供了一个箭头函数它是定义匿名函数的简写语法用于函数表达式它省略了function关键字。

箭头函数的定义如下其函数是一个语句块

[param1,

}其中括号内是函数的入参可以有0到多个参数箭头后是函数的代码块。

我们可以将这个箭头函数赋值给一个变量如下所示

let

TypeScript支持基于类的面向对象的编程方式定义类的关键字为class后面紧跟类名。

类描述了所创

声明一个Person类这个类有3个成员一个是属性包含name和age)一个是构造函数一个是getPersonInfo方法其定义如下所示。

class

继承就是子类继承父类的特征和行为使得子类具有父类相同的行为。

TypeScript中允许使用继承来扩展现有的类对应的关键字为extends。

class

随着应用越来越大通常要将代码拆分成多个文件即所谓的模块module。

模块可以相互加载并可以使用特殊的指令

export

建立的。

模块里面的变量、函数和类等在模块外部是不可见的除非明确地使用

export

当一个对象实现了Symbol.iterator属性时我们认为它是可迭代的。

一些内置的类型如ArrayMapSetStringInt32ArrayUint32Array等都具有可迭代性。

for…of

用于添加组件对事件的响应逻辑统一通过事件方法进行设置如跟随在Button后面的onClick()。

属性方法

用于组件属性的配置统一通过属性方法进行设置如fontSize()、width()、height()、color()

从UI框架的需求角度ArkTS在TS的类型系统的基础上做了进一步的扩展定义了各种装饰器、自定义组件和UI描述机制再配合UI开发框架中的UI内置组件、事件方法、属性方法等共同构成了应用开发的主体。

在应用开发中除了UI的结构化描述之外还有一个重要的方面状态管理。

如上述示例中用

State

相关联的数据不仅可以在组件内使用还可以在不同组件层级间传递比如父子组件之间爷孙组件之间也可以是全局范围内的传递还可以是跨设备传递。

另外从数据的传递形式来看可分为只读的单向传递和可变更的双向传递。

开发者可以灵活的利用这些能力来实现数据和

总体而言ArkUI开发框架通过扩展成熟语言、结合语法糖或者语言原生的元编程能力、以及UI组件、状态管理等方面设计了统一的UI开发范式结合原生语言能力共同完成应用开发。

这些构成了当前ArkTS基于TS的主要扩展。

渲染控制

条件渲染使用if/else进行条件渲染。

循环渲染开发框架提供循环渲染ForEach组件来迭代数组并为每个数组项创建相应的组件。

状态管理

组件状态管理装饰器用来管理组件中的状态它们分别是State、Prop、Link。

State装饰的变量是组件内部的状态数据当这些状态数据被修改时将会调用所在组件的build方法进行UI刷新。

Prop与State有相同的语义但初始化方式不同。

Prop装饰的变量必须使用其父组件提供的State变量进行初始化允许组件内部修改Prop变量但更改不会通知给父组件即Prop属于单向数据绑定。

Link装饰的变量可以和父组件的State变量建立双向数据绑定需要注意的是Link变量不能在组件内部进行初始化。

Builder装饰的方法用于定义组件的声明式UI描述在一个自定义组件内快速生成多个布局内容。

组件生命周期函数

自定义组件的生命周期函数用于通知用户该自定义组件的生命周期这些回调函数是私有的在运行时由开发框架在特定的时间进行调用不能从应用程序中手动调用这些回调函数。

五、ArkTS实践

应用界面是由一个个页面组成ArkTS是由ArkUI框架提供用于以声明式开发范式开发界面的语言。

声明式UI构建页面的过程其实是组合组件的过程声明式UI的思想主要体现在两个方面

类似苹果的SwiftUI中通过组合视图View安卓Jetpack

Compose中通过组合Composable函数ArkUI作为HarmonyOS应用开发的UI开发框架其使用ArkTS语言构建自定义组件通过组合自定义组件完成页面的构建。

ArkTS通过struct声明组件名并通过Component和Entry装饰器来构成一个自定义组件。

使用Entry和Component装饰的自定义组件作为页面的入口会在页面加载时首先进行渲染。

Entry

{...}使用Component装饰的自定义组件如ToDoItem这个自定义组件则对应如下内容作为页面的组成部分。

Component

{...}在自定义组件内需要使用build方法来进行UI描述。

Entry

}build方法内可以容纳内置组件和其他自定义组件如Column和Text都是内置组件由ArkUI框架提供ToDoItem为自定义组件需要开发者使用ArkTS自行声明。

Entry

{Text(...)...ForEach(...{TodoItem(...)},...)}...}

}3.

自定义组件的组成使用基础组件和容器组件等内置组件进行组合。

但有时内置组件的样式并不能满足我们的需求ArkTS提供了属性方法用于描述界面的样式。

常量传递

在组件内定义了相应的变量后例如组件内部成员变量size就可以使用this.size方式使用该变量。

Text(Hello

在配置多个属性时ArkTS提供了链式调用的方式通过’.方式连续配置。

Text(Hello

除此之外ArkTS中还提供了内置枚举类型如ColorFontWeight等例如设置fontColor改变字体颜色为红色并私有fontWeight为加粗。

Text(Hello

.fontWeight(FontWeight.Bold)对于有多种组件需要进行组合时容器组件则是描述了这些组件应该如何排列的结果。

ArkUI中的布局容器有很多种在不同的适用场合选择不同的布局容器实现ArkTS使用容器组件采用花括号语法内部放置UI描述。

Row布局

{Image($r(app.media.ic_default))...Text(this.content)...

...类似下图所示的布局整体都是从上往下纵向排列适用的布局方式是Column列布局。

Column布局

{Text($r(app.string.page_title))...ForEach(this.totalTasks,(item)

{TodoItem({content:item})},...)

}4.

实际开发中由于交互页面的内容可能需要产生变化以每一个ToDoItem为例其在完成时的状态与未完成时的展示效果是不一样的。

声明式UI的特点就是UI是随数据更改而自动刷新的我们这里定义了一个类型为boolean的变量isComplete其被State装饰后框架内建立了数据和视图之间的绑定其值的改变影响UI的显示。

State

用圆圈和对勾这样两个图片分别来表示该项是否完成这部分涉及到内容的切换需要使用条件渲染if

else语法来进行组件的显示与消失当判断条件为真时组件为已完成的状态反之则为未完成。

(this.isComplete)

{Image($r(app.media.ic_ok)).objectFit(ImageFit.Contain).width($r(app.float.checkbox_width)).height($r(app.float.checkbox_width)).margin($r(app.float.checkbox_margin))

else

{Image($r(app.media.ic_default)).objectFit(ImageFit.Contain).width($r(app.float.checkbox_width)).height($r(app.float.checkbox_width)).margin($r(app.float.checkbox_margin))

}由于两个Image的实现具有大量重复代码ArkTS提供了Builder装饰器来修饰一个函数快速生成布局内容从而可以避免重复的UI描述内容。

这里使用Bulider声明了一个labelIcon的函数参数为url对应要传给Image的图片路径。

Builder

{Image(url).objectFit(ImageFit.Contain).width($r(app.float.checkbox_width)).height($r(app.float.checkbox_width)).margin($r(app.float.checkbox_margin))

}使用时只需要使用this关键字访问Builder装饰的函数名即可快速创建布局。

(this.isComplete)

{this.labelIcon($r(app.media.ic_ok))

else

{this.labelIcon($r(app.media.ic_default))

}为了让待办项带给用户的体验更符合已完成的效果给内容的字体也增加了相应的样式变化这里使用了三目运算符来根据状态变化修改其透明度和文字样式如opacity是控制透明度decoration是文字是否有划线。

通过isComplete的值来控制其变化。

Text(this.content)....opacity(this.isComplete

CommonConstants.OPACITY_COMPLETED

CommonConstants.OPACITY_DEFAULT).decoration({

type:

TextDecorationType.LineThrough:

})最后为了实现与用户交互的效果在组件上添加了onClick点击事件当用户点击该待办项时数据isComplete的更改就能够触发UI的更新。

Componentstruct

{this.labelIcon($r(app.media.ic_ok))}

else

{this.labelIcon($r(app.media.ic_default))}...}....onClick(()

{this.isComplete

刚刚只是完成了一个ToDoItem组件的开发当我们有多条待办数据需要显示在页面时就需要使用到ForEach循环渲染语法。

total_Tasks:

[早起晨练,准备早餐,阅读名著,学习ArkTS,看剧放松]ForEach基本使用中只需要了解要渲染的数据以及要生成的UI内容两个部分例如这里要渲染的数组为以上的五条待办事项要渲染的内容是ToDoItem这个自定义组件也可以是其他内置组件。

ForEach基本使用

ToDoItem这个自定义组件中每一个ToDoItem要显示的文本参数content需要外部传入参数传递使用花括号的形式用content接受数组内的内容项item。

Entry

{Text(...)...ForEach(this.totalTasks,(item)

{TodoItem({content:item})},...)}.width(100%)}.height(100%)}

}ToDoList页面