语雀知识库地址：语雀HarmonyOS知识库
飞书知识库地址：飞书HarmonyOS知识库
本文示例代码地址：Gitee 仓库地址
哈喽呀，我是小白
在上一篇文章中为大家介绍了鸿蒙方舟开发框架 ArkUI，在文中提到了鸿蒙应用声明式开发语言 ArkTS，这篇文章我们就来扒一扒这神秘的 ArkTS 语言
ArkTS是 HarmonyOS 目前主力应用开发语言。它围绕应用开发在TypeScript 生态基础上做了进一步扩展，继承了 TS 的所有特性，是 TS 的超集
因此，在学习 HarmonyOS 之前建议大家先将 TS 的基本语法落实
ArkTS 与 TypeScript 和 JavaScript 的关系如下所示
ArkTS 在 TS 之上，做了以下三处扩展：
- 定义了声明式 UI 描述、自定义组件和动态扩展 UI 元素的能力，再配合 ArkUI 开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了 UI 开发的主体
- 提供了多维度的状态管理机制。在 UI 开发框架中，与 UI 相关联的数据可以在组件内使用，也可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，还可以在应用全局范围内传递或跨设备传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。利用这些能力可以灵活的实现数据和 UI 的联动
- 提供了渲染控制的能力。条件渲染可根据应用的不同状态，渲染对应状态下的 UI 内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据，并在每次迭代过程中创建相应的组件
而在不久的将来，ArkTS 会逐步增强并行与并发能力、系统类型、分布式开发范式等更多特性
语法描述
我们以一个用户点击按钮改变文字内容的案例来说明 ArkTS 的组成
ArkTS 的基本组成
在本示例中，ArkTS 的基本组成如下图所示
其中：
- 装饰器 ： 用于装饰类、结构、方法以及变量，赋予其特殊的含义。如本示例中
@Entry、@Component和@State都是装饰器，@Component 表示自定义组件，@Entry 表示该自定义组件为入口组件，@State 表示组件中的状态变量，状态变量变化会触发UI刷新 - UI描述：以声明式的方式来描述 UI 的结构，例如 build() 方法中的代码块
- 自定义组件：可复用的UI单元，可组合其他组件，如上述被 @Component 装饰的 struct Hello
- 系统组件：ArkUI 框架中默认内置的基础和容器组件，可直接被调用，比如本例中的 Column、Text、Divider、Button
- 属性方法：组件可以通过链式调用配置多项属性，如 fontSize()、width()、height()、backgroundColor() 等
- 事件方法：组件可以通过链式调用设置多个事件的响应逻辑，如跟随在 Button 后面的 onClick() 事件
组件的通用属性方法
在 ArkTS 中，有很多不同类型的组件
比如基础组件 Text 文本、Button 按钮、Radio 单选、CheckBox 多选框，容器组件 Column、Row、Flex、Stack
除此之外，还有媒体组件、绘制组件、画布组件等等
而这些组件都有相同的通用属性、通用事件和手势控制
在编辑器中，通过将鼠标悬浮于组件上后，会浮出当前组件的介绍，点击 Show in API Reference 可以在编辑器中快速查看当前组件的相关介绍，包括组件属性，使用示例等
通用属性(举例)
尺寸相关
- width()：设置组件自身的宽度
- height()：设置组件自身的高度
- padding()：设置组件的内边距
- margin()：设置组件的外边距
位置相关
- align()：设置元素内容在元素绘制区域内的对齐方式
- direction()：设置元素水平方向的布局
边框相关
- border()：统一边框样式设置接口
- borderStyle()：设置元素的边框样式
- borderWidth()：设置元素的边框宽度，不支持百分比
- borderColor()：设置元素的边框颜色
通用事件(举例)
- 点击事件 onClick(event: (event?: ClickEvent) => void)
- 触摸事件 onTouch(event: (event?: TouchEvent) => void)
- 按键事件 onKeyEvent(event: (event?: KeyEvent) => void)
手势处理
- 基础手势：单击、双击、长按、拖动、捏合等
- 组合手势：手势识别组合，即多种手势组合为复合手势，支持连续识别、并行识别和互斥识别
- 绑定手势：为组件绑定不同类型的手势事件，并设置事件的响应方法