ArkTS基础知识
ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript（简称TS）的基础上，扩展了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。TS是JavaScript（简称JS）的超集，ArkTS则是TS的超集。
js
- JS语言最初主要是为了解决页面中的逻辑交互问题，随着Node.js进一步将JS扩展到了浏览器以外的环境。
- 2015年一个ECMAScript 6（简称ES6）发布，具备了较为完整的语言能力，包括类（Class）、模块（Module）、相关的语言基础API增强（Map/Set等）、箭头函数（Arrow Function）等。
- JS前端框架也不断地涌现出来，比较典型的有Facebook发起的React.js，以及个人开发者尤雨溪发起的Vue.js。React和Vue的主要出发点都是将响应式编程的能力引入到应用开发中，实现数据和界面内容的自动关联处理。
- 实现方式上，React对JS做了一些扩展，引入了JSX（JavaScript XML）语法，可以将HTML的内容统一表示成JS来处理；Vue则是通过扩展的模板语法（Template）的方式来处理。
下面通过两个示例，为大家简要介绍React和Vue。示例来源于w3schools网站：https:///whatis/）
- 1. React示例
以上代码描述了React如何在指定的页面元素（id为id01的div元素）中改变相应的字符串内容（从"Hello World!"到"Hello John Doe!"）。其中第5行的ReactDOM.render()是React JS库提供的一个方法，它可以将相应的内容刷新到指定的HTML元素中。第6行是符合JSX语义的一段代码，它包含了一个类似HTML结构的字符串（<h1>...</h1>），以及一个表达数据绑定语义的字段({name})，会关联到第4行定义的name变量。通过这种方式，JSX把HTML的语义以及数据绑定机制和JS语言结合起来，可以方便地在JS语言中使用。
- 2. Vue示例
以上Vue示例代码也描述了类似的功能。其中第1~3行是类似HTML的语法，描述一个id为app的div页面元素，其中的{{message}}是数据绑定的语义，在Vue中表示为Template。第6~9行是JS代码，描述了一个Vue对象，对应了上述的app页面元素以及所需的数据变量message的内容信息。第11~13行则是JS函数，它改变message变量的值为"John Doe"。执行这个函数时Vue会自动实现相应的UI界面刷新。
如上所示，React和Vue所表达的能力是类似的，不过侧重点稍微有所不同。React主要是基于JSX的语法，将类HTML的语法融合到JS语言中；Vue则是基于Template机制，在HTML的基础上扩展相应的语义。当然，上面这两个例子只是简要地描述了React和Vue的基础信息，更详细的语法以及CSS相关的使用等都没涉及。
从运行时的维度来看，基于React以及Vue的应用都可运行在Web引擎上。为了进一步提升相应的性能体验，2015年Facebook在React基础上推出了React Native, 在渲染架构上没有采用传统的Web引擎渲染路径，而是桥接到相应OS平台的原生UI组件上。2019年Facebook引入全新实现的JS引擎Hermes，并推出一系列架构改进来进一步提升React Native的性能体验。2016年阿里巴巴开源的Weex则是基于Vue做了一些类似的改进，也是采用了桥接到原生UI组件的渲染路径。
TS主要从以下几个方面做了进一步的增强：
- 引入了类型系统，并提供了类型检查以及类型自动推导能力，可以进行编译时错误检查，有效的提升了代码的规范性以及错误检测范围和效率。
- 在类型系统基础上，引入了声明文件（Declaration Files）来管理接口或其他自定义类型。声明文件一般是以d.ts的形式来定义模块中的接口，这些接口和具体的实现做了相应的分离，有助于各模块之间的分工协作。另外，TS通过接口，泛型（Generics）等相关特性的支持，进一步增强了设计复杂的框架所需的扩展以及复用能力。
TS在兼容JS生态方面也做了较好的平衡，TS应用通过相应编译器可以编译出纯JS应用，可以在标准的JS引擎上运行。同时，TS定位为JS的超集，即JS应用也是合法的TS应用。
ArkUI开发框架
描述了ArkUI开发框架的整体架构，其中，基于TS扩展的声明式UI范式中所用的语言就是ArkTS。下面结合一个具体示例，从应用开发视角简单介绍下基于ArkTS的全新声明式开发范式。
下图所示的代码，UI界面会显示两段文本和一个按钮，当开发者点击按钮时，文本内容会从'Hello World'变为‘Hello ArkUI’。
图：ArkTS声明式开发范式
这个示例中所包含的ArkTS声明式开发范式的基本组成说明如下：
- 装饰器
用来装饰类、结构体、方法以及变量，赋予其特殊的含义，如上述示例中 @Entry 、 @Component 、 @State 都是装饰器。具体而言， @Component 表示这是个自定义组件； @Entry 则表示这是个入口组件； @State 表示组件中的状态变量，此状态变化会引起 UI 变更。
- 自定义组件
可复用的 UI 单元，可组合其它组件，如上述被 @Component 装饰的 struct Hello。
- UI 描述
声明式的方式来描述 UI 的结构，如上述 build() 方法内部的代码块。
- 内置组件
框架中默认内置的基础和布局组件，可直接被开发者调用，比如示例中的 Column、Text、Divider、Button。
- 事件方法
用于添加组件对事件的响应逻辑，统一通过事件方法进行设置，如跟随在Button后面的onClick()。
- 属性方法
用于组件属性的配置，统一通过属性方法进行设置，如fontSize()、width()、height()、color() 等，可通过链式调用的方式设置多项属性。
从UI框架的需求角度，ArkTS在TS的类型系统的基础上，做了进一步的扩展：定义了各种装饰器、自定义组件和UI描述机制，再配合UI开发框架中的UI内置组件、事件方法、属性方法等共同构成了应用开发的主体。在应用开发中，除了UI的结构化描述之外，还有一个重要的方面：状态管理。如上述示例中，用 @State 装饰过的变量 myText ，包含了一个基础的状态管理机制，即 myText 的值的变化会自动触发相应的 UI 变更 （Text组件）。ArkUI 中进一步提供了多维度的状态管理机制。和 UI 相关联的数据，不仅可以在组件内使用，还可以在不同组件层级间传递，比如父子组件之间，爷孙组件之间，也可以是全局范围内的传递，还可以是跨设备传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和 UI 的联动。
总体而言，ArkUI开发框架通过扩展成熟语言、结合语法糖或者语言原生的元编程能力、以及UI组件、状态管理等方面设计了统一的UI开发范式，结合原生语言能力共同完成应用开发。这些构成了当前ArkTS基于TS的主要扩展。
ArkUI完整的开发范式可参考这里：
https:///cn/docs/documentation/doc-guides/arkui-overview-0000001281480754
当以个组件中使用另一个组件的内容时，这个组件就被称为父组件，被使用的组件就被称为子组件。
有@Component装饰器和build()方法在，这样TitleComponent就具有组件化的能力，成为了一个独立的自定义组件。
视频看到6.01
ArkTS开发实践
声明式UI基本概念
应用界面是由一个个页面组成，ArkTS是由ArkUI框架提供，用于以声明式开发范式开发界面的语言。
声明式UI构建页面的过程，其实是组合组件的过程，声明式UI的思想，主要体现在两个方面：
- 描述UI的呈现结果，而不关心过程
- 状态驱动视图更新
类似苹果的SwiftUI中通过组合视图View，安卓Jetpack Compose中通过组合@Composable函数，ArkUI作为HarmonyOS应用开发的UI开发框架，其使用ArkTS语言构建自定义组件，通过组合自定义组件完成页面的构建。
自定义组件的组成
ArkTS通过struct声明组件名，并通过@Component和@Entry装饰器，来构成一个自定义组件。
使用@Entry和@Component装饰的自定义组件作为页面的入口，会在页面加载时首先进行渲染。
@Entry
@Component
struct ToDoList {
... // 内容
}例如ToDoList组件对应如下整个代办页面。
图1 ToDoList待办列表
使用@Component装饰的自定义组件，如ToDoItem这个自定义组件则对应如下内容，作为页面的组成部分。
@Component
struct ToDoItem {
... // 内容
}图2 ToDoItem
在自定义组件内需要使用build方法来进行UI描述。
@Entry
@Component
struct ToDoList{
...
build() {
...
}
}build方法内可以容纳内置组件和其他自定义组件，如Column和Text都是内置组件，由ArkUI框架提供，ToDoItem为自定义组件，需要开发者使用ArkTS自行声明。
@Entry
@Component
struct ToDoList {
...
build() {
Column(...) {
Text(...)
...
ForEach(...{
TodoItem(...)
},...)
}
...
}
}配置属性与布局
自定义组件的组成使用基础组件和容器组件等内置组件进行组合。但有时内置组件的样式并不能满足我们的需求，ArkTS提供了属性方法用于描述界面的样式。属性方法支持以下使用方式：
- 常量传递
- 例如使用fontSize(50)来配置字体大小。
Text('Hello World')
.fontSize(50)- 变量传递
- 在组件内定义了相应的变量后，例如组件内部成员变量size，就可以使用this.size方式使用该变量。
Text('Hello World')
.fontSize(this.size)- 链式调用
- 在配置多个属性时，ArkTS提供了链式调用的方式，通过'.'方式连续配置。
Text('Hello World')
.fontSize(this.size)
.width(100)
.height(100)- 表达式传递
- 属性中还可以传入普通表达式以及三目运算表达式。
Text('Hello World')
.fontSize(this.size)
.width(this.count + 100)
.height(this.count % 2 === 0 ? 100 : 200)- 内置枚举类型除此之外，ArkTS中还提供了内置枚举类型，如Color，FontWeight等，例如设置fontColor改变字体颜色为红色，并私有fontWeight为加粗。
Text('Hello World')
.fontSize(this.size)
.width(this.count + 100)
.height(this.count % 2 === 0 ? 100 : 200)
.fontColor(Color.Red)
.fontWeight(FontWeight.Bold)对于有多种组件需要进行组合时，容器组件则是描述了这些组件应该如何排列的结果。
ArkUI中的布局容器有很多种，在不同的适用场合选择不同的布局容器实现，ArkTS使用容器组件采用花括号语法，内部放置UI描述。
这里我们将介绍最基础的两个布局——列布局和行布局。
对于如下每一项的布局，两个元素为横向排列，选择Row布局
