HarmonyOS开发基础 --面向鸿蒙的TypeScript基础语法一文入门

在开发鸿蒙HarmonyOS应用时，熟悉其提供的开发框架ArkUI是非常重要的。ArkUI框架为不同技术背景的开发者提供了两种开发范式：基于JS扩展的类Web开发范式，以及基于TS扩展的声明式开发范式。基于TS扩展的声明式开发范式是后续开发的主流推荐，本文重点介绍基于TS扩展的声明式开发方式。

面向鸿蒙HarmonyOS的主流开发语言是ArkTS，在学习ArkTS前，先来熟悉下TypeScript基础语法是十分必要的。ArkTS是基于TypeScript扩展的语言，旨在提供更强大、更高效的应用开发体验。

在学习ArkTS之前，熟悉TypeScript的基础语法是非常必要的。TypeScript的学习可以帮助你理解静态类型检查的重要性，掌握面向对象编程的特性，如类和接口等，这些知识对于ArkTS的学习将起到很好的铺垫作用。

什么是TypeScript？

TypeScript，通常简称为TS，是JavaScript的一个超集，并且支持ECMAScript 6标准。如果你已经熟悉了JavaScript，那么学习TypeScript将会非常轻松，因为它不仅包含了JavaScript的所有特性，还额外提供了类型系统、接口、枚举等特性，使得代码更加健壮和易于维护。如果你之前有过其他编程语言的开发经验，那么学习TypeScript也不会太困难，因为大部分编程语言的基本概念是相通的，充其量就是需要熟悉一下不同语言间的语法差异。

1.1 什么是ArkTS？

ArkTS是华为为HarmonyOS平台设计的一种编程语言。它是在TypeScript的基础上进行扩展，引入了一些特性以更好地适应HarmonyOS的开发需求。ArkTS的设计目标是提供一种高效、安全、易于维护的编程语言，以支持HarmonyOS丰富的UI组件和复杂的系统特性。

ArkTS的主要特点包括：

• 增强的类型系统：提供更丰富的类型定义和类型检查功能，帮助开发者提前发现代码中的错误。
• 面向组件的编程：引入声明式UI开发范式，使得UI代码更加简洁、易读。
• 系统级的优化：针对HarmonyOS的系统特性进行了优化，提高了应用的运行效率。
• 跨设备开发能力：支持HarmonyOS的分布式能力，使得开发者可以轻松地为多种设备编写代码。

1.2：ArkTS语言简介

OpenHarmony 为应用开发提供了一套 UI 开发框架，即方舟开发框架（ArkUI开发框架），ArkUI开发框架针对不同技术背景的开发者提供了两种开发范式，分别是基于 JS 扩展的类 Web 开发范式和基于 TS 扩展的声明式开发范式，它们之间的简单对比如下所示：

名称	语言	UI更新方式	使用场景	使用对象
类Web开发范式	JS语言	数据驱动更新	界面较为简单的程序应用和卡片	Web前端开发人员
声明式开发范式	扩展的TS语言	数据驱动更新	复杂度较大、团队合作度较高的程序	移动系统应用开发人员、系统应用开发人员

以上两种开发范式都提供了丰富的UI组件，这些组件的底层由 C++ 实现，读者可在 ACE 仓里阅读各组件的实现源码，采用 C++ 实现的好处之一是可以方便对接其它语言的UI框架。比如华为自研的编程语言仓颉，仓颉定义一套 UI 描述框架，通过 FFI 的形式对接 ACE 的实现。

笔者十分期待仓颉的发布，到那个时候我们有自己的编程语言 + 编译器 + OpenHarmony，如果芯片领域取得突破（芯片架构 + 芯片制程），那么在计算机领域我们的基础底座就无惧任何打压和封锁了，相信这一天很快会到来……

UI框架的发展趋势，从 Android 和 iOS 的发展历程看，Android 从 View 框架到 Jetpack Compose，iOS 的 UIKits 到 SwiftUI，都是由命令式UI往声明式UI发展，如果仓颉推出的UI框架底层对接的是 ACE ，那么也应该是声明式UI框架，并且和ArkUI框架的声明式UI的语法很类似，因此本书笔者只介绍基于 TS 扩展的声明式开发方式。

1.2.1：TypeScript的主要特点

TypeScript 简称 TS ，它是 JavaScript 的一个超集并支持 ECMAScript 6 标准，如果读者已经熟悉 TS 语法可以直接跳过本节了，如果有过其它编程语言经验的话会很容易上手，语言都是相通的，充其量就是熟悉一下不同语言间的语法，本节只是简单介绍一下 TS 语法，如果想更多的了解 TS，请自行查看 TypeScript 官网。

TypeScript是JavaScript的超集，添加了静态类型检查、面向对象编程特性（如类、接口、枚举等）以及其他一些现代JavaScript特性。TypeScript的设计目标是提高大型应用的开发效率和代码质量。它通过编译器将TypeScript代码转换为JavaScript代码，从而在任何支持JavaScript的环境中运行。

TypeScript的主要特点包括：

1. 静态类型：开发者可以为变量、函数参数和返回值指定类型，这有助于在编译时发现类型错误。
2. 面向对象编程：支持类、接口、枚举等OO编程特性，使得代码结构更为清晰。
3. 模块化：支持模块化开发，便于代码的复用和维护。
4. 兼容性：TypeScript代码可以编译成JavaScript代码，因此可以在任何支持JavaScript的环境中运行。

ArkTS与TypeScript的对比

特性	TypeScript	ArkTS
类型系统	支持静态类型检查，丰富的类型定义	增强的类型系统，更适合HarmonyOS的开发需求
UI开发	通用的JavaScript/TypeScript开发方式	声明式UI开发范式，与ArkUI框架紧密结合
系统特性	通用的JavaScript特性	针对HarmonyOS进行优化，支持分布式能力等系统特性
编译目标	通用的JavaScript代码	优化后的JavaScript代码，更适用于HarmonyOS平台
生态支持	广泛的JavaScript生态系统	结合了HarmonyOS的生态系统，支持更多的系统级API

TypeScript类型系统：

• Any：可以表示任意类型，但会失去类型检查的优势。
• Number：表示数字，支持整数和小数。
• String：表示字符串，支持单引号、双引号和反引号定义。
• Boolean：表示逻辑值true和false。
• Array：通过ElementType[]或Array<ElementType>定义数组。
• Enum：定义枚举类型，便于表示一组数值的集合。

TypeScript面向对象特性：

• 类：支持类的定义、继承、方法重写等。
• 接口：定义抽象方法和属性，支持单继承和多继承。
• 访问修饰符：public、protected和private分别表示公有、受保护和私有的访问权限。

1.2.2：数据类型

1. Any

   TypeScript 提供了 any 关键字表示任意数据类型，声明为该类型的变量可以赋予任意类型的值。

   var data: any;                        // 声明data为any类型
   data = true;
   console.log(typeof data);             // boolean
   data = 'OpenHarmony';
   console.log(typeof data);             // string
   data = 100;
   console.log(typeof data);             // number
   data = 10.5
   console.log(typeof data);             // number
   

2. number

   TypeScript 提供了 number 关键字来表示数字类型，它是双精度 64 位浮点值，既可以表示整数，又可以表示小数。

   var data: number;
   data = 100;
   console.log(typeof data)             // number
   data = -10;
   console.log(typeof data)             // number
   data = 3.14;
   console.log(typeof data)             // number
   data = 0b10001;
   console.log(typeof data)             // number
   

3. string

   TypeScript 提供了 string 关键字来表示字符串类型，使用单引号（'）或双引号（"）来表示字符串类型，也可以使用反引号（`）来定义多行文本和内嵌表达式。

   var data: string;
   data = "Hello, OpenHarmony";
   data = 'Hello, OpenHarmony';
   data = `Hello, ${data}`
   console.log(data)                    // Hello, Hello, OpenHarmony
   

4. boolean

   TypeScript 提供了 boolean 关键字来表示逻辑值 true 和 false。

   var data: boolean = false;
   data = true;
   data = false;
   

5. 数组类型

   TypeScript 没有提供专门的关键字来表示数组类型，声明一个数组可以使用元素类型后边加 [] 或者数组泛型的方式。

   var scores: number[] = [90, 88];                      // 声明一个number数组
   var names: string[] = ["张三", "李四"];                // 声明一个string数组
   var address: Array<string> = ["Beijing", "Tianjin"];  // 声明一个string数组
   console.log(names[0])                                 // 访问数组
   console.log(scores[0].toString())                     // 访问数组
   console.log(address[0])                               // 访问数组for(var i = 0; i < address.length; i++) {             // 遍历数组console.log(address[i])
   }for(var index in address) {                           // 遍历数组console.log(address[index])
   }
   

6. 元组

   TypeScript 提供了元组来表示已知元素数量和类型的数组，元组内的各元素的类型不必相同，但是对应位置的类型必须一致。

   var user: [string, number, string]; // 定义一个元组
   user = ["张三", 18, 'Beijing'];      // 初始化元组，对应位置类型必须一致
   console.log(`姓名：${user[0]}`)      // 姓名：张三
   console.log(`年龄：${user[1]}`)      // 年龄：18
   console.log(`住址：${user[2]}`)      // 住址：Beijing
   

7. enum

   TypeScript 提供了 enum 关键字表示枚举类型，枚举类型主要用于定义数值的集合。

   enum Color {               // 定义一个枚举Red,Green,Blue
   }
   var c: Color = Color.Blue; // 定义枚举类型
   console.log(c.toString()); // 2
   

8. void

   TypeScript 提供了 void 关键字表示函数的返回类型为空，也就是函数没有返回值。

   function print(msg: string): void { // 函数没有返回值console.log(msg)
   }
   

9. undefined

   TypeScript 提供了 undefined 关键字表示声明了一个变量但并没有赋值的情况。

   var data;                 // 声明了data，但是没有赋值
   console.log(typeof data); // undefined
   

10. null

    TypeScript 提供了 null 关键字表示一个对象没有初始化。

    class Person {
    }var person: Person;              // 声明一个person，但是没有初始化
    if(null == person) {console.log("person is null"); // person is null
    }
    

11. 联合类型

    TypeScript 允许通过 | 将一个变量设置成多种类型，赋值的时候可以根据设置的类型来赋值。

    var data: string | number; // 设置data为联合类型
    data = 'OpenHarmony';      // 正确
    data = 99;                 // 正确
    data = true;               // 编译报错，类型不匹配
    

    📢：联合类型很重要，ArkUI框架里大量使用了联合类型。

1.2.3：变量声明

1. var

   变量在使用前必须先声明，TS 使用 var 声明一个变量，我们可以使用一下四种方式来声明变量：

   • 声明变量的类型并赋值初始值，格式：var [变量名] : [类型] = 值;

     var osName:string = "OpenHarmony";
     

   • 声明变量的类型但不赋值初始值，格式：var [变量名] : [类型];

     var osName:string;
     

   • 声明变量并赋值初始值，但不设置类型，格式：var [变量名] = 值;

     var osName = "OpenHarmony";
     

   • 声明变量并没有设置类型和初始值，该类型可以是任意类型，默认值为 undefined，格式：var [变量名];

     var osName;
     

   简单样例如下：

   var osName: string = "OpenHarmony";
   var price1: number = 5;
   var price2: number = 5.5
   var sum = price1 + price2
   console.log("操作系统名字: " + osName); // 操作系统名字: OpenHarmony
   console.log("第一个价格是: " + price1); // 第一个价格是: 5
   console.log("第二个价格是: " + price2); // 第二个价格是: 5.5
   console.log("总价格: " + sum);         // 总价格: 10.5
   

   📢：TypeScript 遵循强类型，如果将不同的类型赋值给变量会编译错误，样例如下：

   var count: number = "hello"; // 这个代码会编译错误
   

1.2.4：函数

1. 函数声明

   函数就是包裹在花括号中的代码块，前边使用 function 关键字，语法格式如下：

   function function_name() {// 执行代码
   }
   

   例如声明函数如下：

   function log(msg: string) { // 声明一个函数console.log(msg);         // 代码块
   }
   

2. 函数调用

   函数只有通过调用才可以执行函数内的代码，语法格式如下：

   function_name()
   

   样例如下：

   function log(msg: string) { // 声明一个函数console.log(msg);         // 代码块
   }
   log("Hello, OpenHarmony");  // 调用函数
   

3. 函数返回值

   如果希望得到函数的执行结果，可以使用 return 语句，语法如下：

   function function_name(): return_type {return value; // return语句
   }
   

   样例如下：

   function sayHi():string { // 定义sayHi函数，该函数的返回类型为stringreturn "Hello!" 
   }function execute() {      // 定义execute函数var msg = sayHi();    // 调用sayHi()函数console.log(msg);     // 打印sayHi()函数的返回值
   }execute();                // 调用execute()函数
   

4. 带参数函数

   在调用函数时可以向函数传递值，这些值被称为参数，语法如下：

   function func_name(param1 :paramType, param2 :paramType) {
   }
   

   样例如下：

   function add(x: number, y: number): number { // 定义add函数，该函数返回类型为nubmer, 接收两个number类型的参数xreturn x + y;
   }console.log(add(1,2))                        // 3
   

5. 可选参数

   如果函数定义了参数则必须传递这些参数否则报错，如果不想传递这些参数，可以添加 ? ，语法如下：

   function func_name(param1: paramType, param2?: paramType) {
   }
   

   样例如下：

   function add(x: number, y?: number) {if (y) {return x + y;} else {return x;}
   }console.log(add(10).toString());     // 10
   console.log(add(10, 10).toString()); // 20
   

   📢：如果参数不全是可选参数，那么可选参数的位置必须放在最后。

6. 默认参数

   函数定义了参数则必须传递这些参数否则报错，如果不想传递这些参数除了使用可选参数外，也可以使用默认参数，当不传入该参数时则使用默认值，语法如下：

   function func_name(param1: paramType, param2: paramType = default_value) {
   }
   

   样例如下：

   function add(x: number = 20, y: number = 50) { // 设置x和y的默认值return x + y;
   }console.log(add(10).toString());               // 60
   console.log(add(10, 10).toString());           // 20
   

   📢：函数的参数不能同时是默认参数和可选参数。

7. 剩余参数

   在不确定要向函数传递多个参数的情况下，可以使用剩余参数，剩余参数前边以 ... 为前缀数据类型为数组的形式提供，语法如下：

   function func_name(param1: paramType, param2: paramType, ...params: paramType[]) {
   }
   

   样例如下所示：

   function add(param1: number, param2: number, ...params: number[]) { // 剩余参数var result = param1 + param2;for(var i = 0; i < params.length; i++) {  // 遍历剩余参数result += params[i];}return result;
   }console.log(add(1, 2, 3, 4, 5).toString()); // 15
   

1.2.5：类

1. 定义类

   TypeScript 是面向对象的 JavaScript，定义一个类使用关键字 class ，类可以包含字段、构造方法和方法。语法如下：

   class class_name {// 类作用域
   }
   

   样例如下：

   class Person {name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}info(): string {return "name: " + this.name + ", age: " + this.age;}
   }
   

2. 创建类对象

   类定义完后，可以通过 new 关键字实例化一个类的对象，实例化类对象即调用类的构造方法，语法如下：

   var object_name = new class_name([ args ])
   

   样例如下：

   var person = new Person('harmony', 10); // 创建一个Person对象
   

3. 访问类属性和方法

   访问类的属性和方法以 . 号的形式，语法如下：

   obj.field_name      // 访问属性
   obj.function_name() // 访问方法
   

   样例如下：

   var person = new Person('harmony', 10); // 创建一个personconsole.log(person.name);               // harmony
   console.log(person.age.toString());     // 10
   console.log(person.info());             // name: harmony, age: 10
   

4. 类的继承

   TypeScript 支持继承类，创建类的时候可以使用关键字 extends 继承一个已有的类，这个已有的类称为父类，继承它的类称为子类。子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。语法如下：

   class child_class_name extends parent_class_name {
   }
   

   样例如下：

   class Zhangsan extends Person {sayHello() {console.log("Hello, " + this.name)}
   }var person = new Zhangsan('harmony', 10); // 创建personconsole.log(person.name);                 // harmony
   console.log(person.age.toString());       // 10
   console.log(person.info());               // name: harmony, age: 10
   

   📢：类的继承只支持单继承，不支持多继承。也就是说子类只能继承一个父类。

5. 方法重写

   子类可以重写父类的方法，在重写父类方法的时候也可以使用 super 关键字调用父类的方法。样例如下：

   class Zhangsan extends Person {info(): string {                        // 重写父类方法console.log(super.info());            // 调用父类方法return "Hello, " + this.name;         // 重新实现info方法}
   }var person = new Zhangsan('harmony', 10);console.log(person.name);                 // harmony
   console.log(person.age.toString());       // 10
   console.log(person.info());               // name: harmony, age: 10// Hello, harmony
   

6. 访问修饰符

   TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。

   • public（默认）：公有，可以在任何地方被访问。

   • protected：受保护，可以被其自身以及其子类访问。

   • private：私有，只能被其定义所在的类访问。

     样例如下所示：

     class Person {name: string;private age: number;                  // age为private，外界无法访问constructor(name: string, age: number) {this.name = name;this.age = age;}info(): string {return "name: " + this.name + ", age: " + this.age;}
     }var person = new Person('harmony', 10);
     console.log(person.name);               // harmony
     console.log(person.age.toString());     // 编译报错，age为private
     

1.2.6：接口

1. 定义接口

   接口是一系列抽象方法的声明，接口定义后需要具体的类实现，语法如下：

   interface interface_name {// 抽象方法
   }
   

   样例如下：

   interface IPerson {        // 定义一个接口name: string;            // 定义接口的一个属性say: () => string;       // 定义接口的一个方法
   }var person: IPerson = {    // 创建一个接口的实例name: "OpenHarmony",     // 设置属性值say: () => {             // 实现接口方法return "Hello, " + person.name;}
   }console.log(person.name);  // OpenHarmony
   console.log(person.say()); // Hello, OpenHarmony
   

2. 接口继承

   接口可以使用 extends 关键字继承其它接口来扩展自己，接口既支持单继承又支持多继承，多继承时接口间使用逗号 , 分隔。语法如下：

   // 接口单继承
   interface Child_interface_name extends super_interface_name {
   }// 接口多继承
   interface Child_interface_name extends super_interface_name1, super_interface_name2 {
   }
   

   样例如下：

   interface IPerson {                  // 定义接口IPersonname: string;say: () => string;
   }interface ITeacher extends IPerson { // 定义接口ITeacher并继承IPersonage: number;teach: () => void;
   }var teacher = <ITeacher>{};
   teacher.name = "张三";
   teacher.age = 18;
   teacher.say = () => {return "你好，我是" + teacher.name;
   }
   teacher.teach = () => {console.log("同学们好，我们开始上课啦")
   }console.log("name: " + teacher.name);
   console.log("age : " + teacher.age);
   console.log("say :" + teacher.say());
   teacher.teach();
   

3. 类实现接口

   类可以使用 implements 关键字实现一个接口，一个类实现接口后必须声明和实现接口的所有属性和方法。

   interface IPerson {                        // 定义一个接口name: string;                            // 定义接口的属性say: () => string;                       // 定义接口的方法
   }class Person implements IPerson {          // 类型实现接口name: string;                            // 必须声明接口属性constructor(name: string) {              // 在构造方法对属性初始化this.name = name;}say(): string {                          // 实现接口的方法return `Hello, I'm ${this.name}`;}
   }class Teacher implements IPerson {         // 类型实现接口constructor(public name: string) {       // 声明接口属性简化方式}say(): string {                          // 实现接口的方法return `Hello, I'm ${this.name}`;}
   }var person: IPerson = new Person("王大爷"); // 创建IPerson实现类
   console.log(person.say());                 // Hello, I'm 王大爷
   console.log(person.name);                  // 王大爷person = new Teacher("王老师");             // 创建IPerson实现类
   console.log(person.say());                 // Hello, I'm 王老师
   console.log(person.name);                  // 王老师
   

1.2.7：小结

本节简单介绍了 TS 基础语法部分，掌握这些基础部分可以支撑日常简单应用开发了，对于 TS 的高级部分读者请参考官网。

ArkTS是专为HarmonyOS平台设计的编程语言，它在TypeScript的基础上进行了扩展，以更好地适应HarmonyOS的开发需求。因此，在学习ArkTS之前，掌握TypeScript的基础语法将是非常有帮助的。这不仅有助于你理解静态类型检查的重要性，还能让你更好地掌握面向对象编程的特性，为ArkTS的学习打下坚实的基础。

希望本文能帮助你更好地理解ArkTS与TypeScript的关系，并为后续的HarmonyOS开发之旅做好准备。更多详细信息，建议参考官方文档进行学习。