关于harmonyos:鸿蒙TypeScript基础入门学习笔记

ArkTS 是 HarmonyOS 优选的主力利用开发语言。它在 TypeScript（简称 TS）的根底上，匹配 ArkUI 框架，扩大了申明式 UI、状态治理等相应的能力，让开发者以更简洁、更天然的形式开发跨端利用。要理解什么是 ArkTS，咱们首先要理解下 ArkTS、TypeScript 和 JavaScript 之间的关系：

JavaScript 是一种属于网络的高级脚本语言，曾经被宽泛用于 Web 利用开发，罕用来为网页增加各式各样的动静性能，为用户提供更晦涩好看的浏览成果。
TypeScript 是 JavaScript 的一个超集，它扩大了 JavaScript 的语法，通过在 JavaScript 的根底上增加动态类型定义构建而成，是一个开源的编程语言。
ArkTS 兼容 TypeScript 语言，拓展了申明式 UI、状态治理、并发工作等能力。

由此可知，TypeScript 是 JavaScript 的超集，ArkTS 则是 TypeScript 的超集，他们的关系如下图所示：

TypeScript 反对一些根底的数据类型，如布尔型、数组、字符串等，下文举例几个较为罕用的数据类型，咱们来理解下他们的根本应用。

TypeScript 中能够应用 boolean 来示意这个变量是布尔值，能够赋值为 true 或者 false。

let isDone: boolean = false;

TypeScript 里的所有数字都是浮点数，这些浮点数的类型是 number。除了反对十进制，还反对二进制、八进制、十六进制。

let decLiteral: number = 2023;
let binaryLiteral: number = 0b11111100111;
let octalLiteral: number = 0o3747;
let hexLiteral: number = 0x7e7;

TypeScript 里应用 string 示意文本数据类型，能够应用双引号（“）或单引号（’）示意字符串。

let name: string = "Jacky";
name = "Tom";
name = 'Mick';

TypeScrip 有两种形式能够定义数组。第一种，能够在元素类型前面接上 []，示意由此类型元素组成的一个数组。

let list: number[] = [1, 2, 3];

第二种形式是应用数组泛型，Array< 元素类型 >。

let list: Array<number> = [1, 2, 3];

元组类型容许示意一个已知元素数量和类型的数组，各元素的类型不用雷同。比方，你能够定义一对值别离为 string 和 number 类型的元组。

let x: [string, number];
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error

enum 类型是对 JavaScript 规范数据类型的一个补充，应用枚举类型能够为一组数值赋予敌对的名字。

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

有时候，咱们会想要为那些在编程阶段还不分明类型的变量指定一个类型。这种状况下，咱们不心愿类型查看器对这些值进行查看而是间接让它们通过编译阶段的查看。那么咱们能够应用 unknown 类型来标记这些变量。

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

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

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

TypeScript 里，undefined 和 null 两者各自有本人的类型别离叫做 undefined 和 null。

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

联结类型（Union Types）示意取值能够为多种类型中的一种。

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

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

TypeScript if 语句由一个布尔表达式后跟一个或多个语句组成。

var num:number = 5
if (num > 0) {console.log('数字是负数') 
}

一个 if 语句后可跟一个可选的 else 语句，else 语句在布尔表达式为 false 时执行。

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

if…else if….else 语句在执行多个判断条件的时候很有用。

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

一个 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;              
    } 
}

函数是一组一起执行一个工作的语句，函数申明要通知编译器函数的名称、返回类型和参数。TypeScript 能够创立有名字的函数和匿名函数，其创立办法如下：

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

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

为了确保输入输出的准确性，咱们能够为下面那个函数增加类型：

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

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

在 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');

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

function getEmployeeName(firstName: string, ...restOfName: string[]) {return firstName + '' + restOfName.join(' ');
}

let employeeName = getEmployeeName('Joseph', 'Samuel', 'Lucas', 'MacKinzie');

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")
  })

TypeScript 反对基于类的面向对象的编程形式，定义类的关键字为 class，前面紧跟类名。类形容了所创立的对象独特的属性和办法。

例如，咱们能够申明一个 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}`;
  }
}

通过下面的 Person 类，咱们能够定义一个人物 Jacky 并获取他的根本信息，其定义如下：

let person1 = new Person('Jacky', 18);
person1.getPersonInfo();

继承就是子类继承父类的特色和行为，使得子类具备父类雷同的行为。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}`;
  }
}

通过下面的 Employee 类，咱们能够定义一个人物 Tom，这里能够获取他的根本信息，也能够获取他的雇主信息，其定义如下：

let person2 = new Employee('Tom', 28, 'HuaWei');
person2.getPersonInfo();
person2.getEmployeeInfo();

在 TypeScript 中，有 public、private、protected 修饰符，其性能和具体应用场景大家能够参考 TypeScript 的相干学习材料，进行拓展学习。

随着利用越来越大，通常要将代码拆分成多个文件，即所谓的模块（module）。模块能够互相加载，并能够应用非凡的指令 export 和 import 来替换性能，从另一个模块调用一个模块的函数。

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

任何申明（比方变量，函数，类，类型别名或接口）都可能通过增加 export 关键字来导出，例如咱们要把 NewsData 这个类导出，代码示意如下：

export class NewsData {
  title: string;
  content: string;
  imagesUrl: Array<NewsFile>;
  source: string;

  constructor(title: string, content: string, imagesUrl: Array<NewsFile>, source: string) {
    this.title = title;
    this.content = content;
    this.imagesUrl = imagesUrl;
    this.source = source;
  }
}

模块的导入操作与导出一样简略。能够应用以下 import 模式之一来导入其它模块中的导出内容。

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

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

for..of 会遍历可迭代的对象，调用对象上的 Symbol.iterator 办法。上面是在数组上应用 for..of 的简略例子：

let someArray = [1, "string", false];

for (let entry of someArray) {console.log(entry); // 1, "string", false
}

for..of 和 for..in 均可迭代一个列表，然而用于迭代的值却不同：for..in 迭代的是对象的键，而 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"
}

https://developer.huawei.com/consumer/cn/training/course/slig…
https://www.typescriptlang.org/docs/
https://www.typescriptlang.org/play

关于harmonyos:鸿蒙TypeScript基础入门学习笔记

「鸿蒙」TypeScript 根底入门学习笔记

根底类型

布尔值

数字

字符串

数组

元组

枚举

Unknown

Null 和 Undefined

联结类型

条件语句

if 语句

if…else 语句

if…else if….else 语句

switch…case 语句

函数

为函数定义类型

可选参数

残余参数

箭头函数

类

类的定义

继承

模块

导出

导入

迭代器

for..of 语句

for..of vs. for..in 语句

参考