ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS，Microsoft）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。因此，在学习ArkTS语言之前，建议开发者具备TS语言开发能力。

简而言之，ArkTS是华为官方推荐的HarmonyOS开发的主力语言，它是华为自己开发的语言。由于HarmonyOS3.0之后就不再支持Java开发了，因此我们要在鸿蒙系统上开发app，就需要学习这门语言。

特点

• 开发效率高，体验好

ArkTS专注于移动端的开发，虽然传统的前端网页开发也同样可以实现，不过学过web前端的都知道，一个网页的实现需要同时使用HTML，JavaScript，CSS这三种不同语言，它们语法完全不同，开发体验并不良好。不过使用ArkTS开发移动端的话就没有这个问题了，仅仅这一种语言，一种语法，开发起来就比较舒服了。

下面通过一张图，做一个对比：

以上都是实现一个点击自增按钮，左边通过html+css+js实现，右侧使用ArkTS实现。可以看出ArkTS这种声明式UI开发，使用起来非常简便舒适。如果之前做过Flutter开发，那么就更能够快速的适应使用ArkTS来开发移动App，因为整体编码方式基本一致。

• 性能优越

• 可实现多系统适配

TypeScript基本语法

ArkTS是基于TypeScipt开发的，其语法也是十分的相似。因此我们需要先了解TypeScipt的基本语法，方便ArkTS的学习。

• 变量声明

TypeScript在JavaScript的基础上加入了静态的类型检查功能，因此与JavaScrpt那极其自由的语法不同，每一个变量都有固定的数据类型。

JS的语法：let msg = 'hello world'TS的语法：let msg：string = 'hello world'

其实就是在JS的基础上多了一步声明数据类型。

• 条件控制

TypeScript与大多数开发语言类似，支持基于if-else和switch的条件控制。

===是JavaScript中的一个特殊运算符，它会严格要求两个比较的数据的数据类型，TypeScript将其继承了下来。

因为在JavaScript是一门弱类型语言，它不强调数据的类型，"字符串'21' == 整型21" 始终为true，所有有了===这个运算符比较一下数据类型。

其次还有一个需要注意的一点是

在TypeScript中，空字符串、0、null、undefined都被认为是false。

因此你可以直接将一个变量作为一个判断的标准，这点与C++很相似。

• 循环迭代

TypeScript支持for和while循环，并且为一些内置类型如Array等提供了快捷迭代的语法。

• 函数

TypeScript通常利用function关键字声明函数，并且支持可选参数，默认参数，箭头函数等特殊语法。

可选参数就是直接在参数后面加上 ？ 默认参数就是直接在参数中赋值，注意此时如果有参数传递时就用传递来的参数，没有参数传入时默认参数才会生效。

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

( [param1, parma2,…param n] )=> {    // 代码块}

其中，括号内是函数的入参，可以有0到多个参数，箭头后是函数的代码块。我们可以将这个箭头函数赋值给一个变量，如下所示：

let arrowFun = ( [param1, parma2,…param n] )=> {    // 代码块}

• 类和接口

TypeScript具备面向对象编程的基本语法，例如interface，class，enum等。也具备封装、继承、多态等面向对象基本特征。

好像Java和JS杂交之后出来的产物。我们再来看一个既视感很强的例子。

• 模块开发

应用复杂时，我们可以把通用功能抽取到单独的ts文件中，每个文件都是一个模块。模块可以相互加载，提高代码复用性。

ArkTS快速入门

应用模型

HarmonyOS先后提供了两种应用模型：

• FA（Feature Ability）模型： HarmonyOS API 7开始支持的模型，已经不再主推。FA模型开发可见FA模型开发概述。 [[FA模型]]
• Stage模型： HarmonyOS API 9开始新增的模型，是目前主推且会长期演进的模型。在该模型中，由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”，因此称这种应用模型为Stage模型。

项目创建

创建一个空项目

配置项说明：

Project name是开发者可以自行设置的项目名称，这里根据自己选择修改为自己项目名称。

Bundle name是包名称，默认情况下应用ID也会使用该名称，应用发布时对应的ID需要保持一致。

Save location为工程保存路径，建议用户自行设置相应位置。

Compile SDK是编译的API版本，这里默认选择API9。

Model选择Stage模型，其他保持默认即可。

AppScope：主要用于存放整个应用公共的信息与资源

entry：入口，初始模块。用于存放编写的代码文件

configuration：存放相应模块的配置文件

resource对应模块内的公共资源

entryability：存放ability文件，用于当前ability应用逻辑和生命周期管理。

pages：存放UI界面相关代码文件，初始会生成一个Index页面。

最外层的configuration：则是存放工程应用级的配置文件

既然是鸿蒙移动端开发，那么就需要一个鸿蒙系统的手机。不过我们不需要真的去购买一台手机，IDEA有自带的预览图。

点击右侧的Previewer，即可看到index.ets文件的效果（ArkTS写的文件后缀统一叫.ets）

index.ets代码解释

• 装饰器：用来装饰类、结构体、方法以及变量，赋予其特殊的含义，如上述示例中 @Entry 、 @Component 、 @State 都是装饰器。具体而言， @Component 表示这是个自定义组件； @Entry 则表示这是个入口组件； @State 表示组件中的状态变量，这个状态变化会引起 UI 变更。
• 自定义组件：可复用的 UI 单元，可组合其它组件，如上述被 @Component 装饰的 struct Index。

ArkTS通过装饰器@Component和@Entry装饰struct关键字声明的数据结构，构成一个自定义组件。自定义组件中提供了一个build函数，开发者需在该函数内以链式调用的方式进行基本的UI描述，UI描述的方法请参考UI描述规范。

基本概念

• *struct：自定义组件可以基于struct实现，不能有继承关系，对于struct的实例化，可以省略new。
• *装饰器：装饰器给被装饰的对象赋予某一种能力，其不仅可以装饰类或结构体，还可以装饰类的属性。多个装饰器可以叠加到目标元素上，定义在同一行中或者分开多行，推荐分开多行定义。

@Entry@Componentstruct MyComponent {}

• @Component：装饰struct，结构体在装饰后具有基于组件的能力，需要实现build方法来创建UI。
• @Entry： 装饰struct，组件被装饰后作为页面的入口，页面加载时将被渲染显示
• @Preview：装饰struct， 用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行实时预览，加载页面时，将创建并显示@Preview装饰的自定义组件。

其页面的基本骨架就是如此

@Entry@Componentstruct Index {  build() {   }}

拼接UI

@Entry@Componentstruct Index {  build() {    Column({space: 20}){      Image('logo.png')      TextInput({placeholder: '用户名'})      TextInput({placeholder: '密码'})        .type(InputType.Password)        .showPasswordIcon(true)      Button('登录')      Row(){        Checkbox()        Text('记住我')          .fontColor('#36D')      }    }    .width('100%')  }}

最终效果

小结

今天主要介绍了ArkTS的基本概念，TypeScript基础语法，以及怎么使用通过DevEco Studio创建一个简单的项目，并介绍了项目结构和ArkTS代码，并通过一个demo进一步介绍了如何快速的创建一个简单的界面。