【HarmonyOS(ArkTS)学习笔记-3】认识ArkTS语言

let x:[string,number];
x = ['hello',10]//ok
x = [10,'hello']//error

2.1.6 枚举

enum类型是对JavaScript标准数据类型的一个补充，使用枚举类型可以为一组数值赋予友好的名字。

enum Color{Red,Green,Blue};
let c:Color = Color.Green;

2.1.7 unknown

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。那么我们可以使用unknown类型来标记这些变量。

let notSure:unknown = 4;
notSure = 'maybe a string instead';
notSure = false;

2.1.8 void

当一个函数没有返回值时，你通常会见到其返回值类型是void。

function test():void{
    console.log('This is function is void');
}

2.1.9 null和undefined

TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。

let u:undefined = undefined;
let n:null = null;

2.1.10 联合类型

联合类型（union types）表示取值可以为多种类型中的一种。

let myFavouriteNumber:string|number;
myFavouriteNumber = 'seven';
myFavouriteNumber = 7;

2.2 条件语句

条件语句用于基于不同的条件来执行不同的动作。TypeScript条件语句是通过一条或多条语句的执行结果（true或false）来决定执行的代码块。

2.2.1 if语句

let num:number = 5;
if(num>0){
    console.log('数字是正数');
}

2.2.2 if…else语句

let num:number = 12;
if(num%2==0){
    console.log('偶数');
}else{
    console.log('奇数');
}

2.2.3 if…else if…else语句

let num:number = 5;
if(num>0){
    console.log(num + '是正数');
}else if(num<0){
    console.log(num + '是负数');
}else{
    console.log(num + '为0');
}

除了可以通过if…else语句进行条件判断外，还可以通过switch…case语句进行条件判断。

2.2.4 switch…case语句

一个switch语句允许测试一个变量等于多个值时的情况。每个值称为一个case，且被测试的变量会对每个switch case进行检查。

var grade:string = 'A';
switch(grade){
    case'A':{
        console.log('优');
        break;
    }
    case'B':{
        console.log('良');
        break;
    }
    case'C':{
        console.log('及格');
        break;
    }
    case'D':{
        console.log('不及格');
        break;
    }
    default:{
        console.log('非法输入');
        break;
    }
}

2.3 函数

2.3.1 函数

函数是一组一起执行一个任务的语句，函数声明要告诉编译器函数的名称、返回类型和参数。TypeScript可以创建 有名字的函数 和 匿名函数，其创建方法如下：

//有名函数
function add(x,y){
    return x+y;
}
//匿名函数
let myAdd = function(x,y){
    return x+y;
};

2.3.2 为函数定义类型

为了确保输入输出的准确性，我们可以为上面那个函数添加类型

//有名函数：给变量设置为number类型
function add(x:number,y:number):number{
    return x+y;
}
//匿名函数：给变量设置为number类型
let myAdd = function(x:number,y:number):number{
    return x+y;
};

2.3.3 函数的可选参数

在TypeScript里我们可以在 参数名旁使用（?）实现可选参数的功能。比如，我们想让lastName是可选的：

function buildName(firstName:string,lastName?:string){
    if(lastName){
        return firstName + '' + lastName;
    }else{
        return firstName;
    }
}
let result1 = buildName('Bob');
let result2 = buildName('Bob','Adams');

2.3.4 函数的剩余参数

剩余参数会被当做 个数不限的可选参数。 可以一个都没有，同样也可以有任意个。 可以使用省略号（ …）进行定义：

function getEmployeeName(firstName: string, ...restOfName: string[]) {
  return firstName + ' ' + restOfName.join(' ');
}
​
let employeeName = getEmployeeName('Joseph', 'Samuel', 'Lucas', 'MacKinzie');

2.3.5 箭头函数

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

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

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

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

如何要主动调用这个箭头函数，可以按如下方法去调用：

arrowFun(param1, parma2,…param n)

接下来我们看看如何将我们 熟悉的函数定义方式转换为箭头函数。我们可以定义一个判断正负数的函数，如下：

function testNumber(num: number) {
  if (num > 0) {
    console.log(num + ' 是正数');
  } else if (num < 0) {
    console.log(num + ' 是负数');
  } else {
    console.log(num + ' 为0');
  }
}

其调用方法如下：

testNumber(1)   //输出日志：1 是正数

如果将这个函数定义为箭头函数，定义如下所示：

let testArrowFun = (num: number) => {
  if (num > 0) {
    console.log(num + ' 是正数');
  } else if (num < 0) {
    console.log(num + ' 是负数');
  } else {
    console.log(num + ' 为0');
  }
}

其调用方法如下：

testArrowFun(-1)   //输出日志：-1 是负数

后面，我们在学习HarmonyOS应用开发时会经常用到箭头函数。例如，给一个按钮添加点击事件，其中onClick事件中的函数就是箭头函数。

Button("Click Now")
  .onClick(() => {
    console.info("Button is click")
  })

2.4 类

TypeScript支持基于类的面向对象的编程方式，定义类的关键字为 class，后面紧跟类名。类描述了所创建的对象共同的属性和方法。

2.4.1 类的定义

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

class Person {
  private name: string
  private age: number
​
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
​
  public getPersonInfo(): string {
    return `My name is ${this.name} and age is ${this.age}`;
  }
}
let person1 = new Person('Jacky',18);
person1.getPersonInfo();

2.4.2 继承

继承就是子类继承父类的特征和行为，使得字类具有父类相同的行为。TypeScript中允许使用继承来扩展现有的类，对应的关键字为extends

class Employee extends Person {
  private department: string
​
  constructor(name: string, age: number, department: string) {
    super(name, age);
    this.department = department;
  }
​
  public getEmployeeInfo(): string {
    return this.getPersonInfo() + `and work in ${this.department}`;
  }
}
let person2 = new Employee('Tom',28,'HuaWei');
person2.getPersonInfo();
person2.getEmployeeInfo();

2.5 模块

随着应用越来越大，通常要将代码拆分成多个文件，即所谓的模块（module）。模块可以相互加载，并可以使用特殊的指令export和import来交换功能，从另一个模块调用一个模块的函数。

两个模块之间的关系是通过在文件级别上使用import和export建立的。模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用export导出它们。类似地，我们必须通过import导入其他模块导出的变量、函数、类等

export class NewsData{
 title: string;
 content: string;
 
 constructor(title: string,content: string){
  this.title = title;
  this.content = content;
 }
}

import { NewsData } from '../common/bean/NewsData';

2.6 迭代器

当一个对象实现了Symbol.iterator属性时，我们认为他是可迭代的。一些内置的类型如Array，Map，Set，String，Int32Array，Unit32Array等都具有可迭代性

for..of语句
let someArray = [1,'string',false];
​
for(let entry of someArray){
 console.log(entry);//1,'string',false
}

for..in语句 vs for..of语句
let list = [4,5,6];
​
for(let i in list){
 console.log(i);//'0','1','2'
}
​
for(let i of list){
 console.log(i);//'4','5','6'
}

3.ArkUI开发框架（方舟开发框架）

方舟开发框架（ArkUI）为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。

3.1 基本概念

• UI：即用户界面。开发者可以将应用的用户界面设计为多个功能页面，每个页面进行单独的文件管理，并通过页面路由API完成页面间的调度管理如跳转、回退等操作，以实现应用内的功能解耦
• 组件：UI构建与显示的最小单位，如列表、网络、按钮、单选框、进度条、文本等。开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面

3.2 两种开发范式

3.2.1 基于ArkTS的声明式开发范式（声明式开发范式）（开发新应用推荐）

采用基于TypeScript声明式UI语法扩展而来的ArkTS语言，从组件、动画和状态管理三个维度提供UI绘制能力

为什么开发新应用推荐声明式开发范式

• 开发效率：声明式开发范式更接近自然语义的编程方式，开发者可直观地描述UI，无需关心如何实现UI绘制和渲染，开发高效简洁
• 应用性能：两种开发范式地UI后端引擎和语言运行时是共用的，但相比类Web开发范式，声明式开发范式无需JS框架进行页面DOM管理，渲染更新链路更为精简，占用内存更少，应用性能更佳
• 发展趋势：声明式开发范式后续会作为主推的开发范式持续演进，为开发者提供更丰富、更强大的能力

3.2.2 兼容JS的类Web开发范式（类Web开发范式）

采用经典的HML、CSS、JavaScript三段式开发方式，即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合Web前端开发者的使用习惯，便于快速将已有的Web应用改造成方舟开发框架应用

3.2.3 不同应用类型支持的开发范式

应用模型	页面形态	支持的UI开发范式
Stage模型（推荐）	应用或服务的页面	声明式开发范式（推荐）
	卡片	声明式开发范式（推荐） 类Web开发范式
FA模型	应用或服务的页面	声明式开发范式 类Web开发范式
	卡片	类Web开发范式

4.UI开发——ArkTS声明式开发范式

4.1 概述

基于ArkTS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架，提供了构建HarmonyOS应用UI所必需的能力，主要包括：

• ArkTS

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

|
| — | — | — |
| Stage模型（推荐） | 应用或服务的页面 | 声明式开发范式（推荐） |
| | 卡片 | 声明式开发范式（推荐） 类Web开发范式 |
| FA模型 | 应用或服务的页面 | 声明式开发范式 类Web开发范式 |
| | 卡片 | 类Web开发范式 |

4.UI开发——ArkTS声明式开发范式

4.1 概述

基于ArkTS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架，提供了构建HarmonyOS应用UI所必需的能力，主要包括：

• ArkTS

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】