「鸿蒙」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]; // OKx = [10, 'hello']; // Error

枚举

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

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

Unknown

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

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

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

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

Null 和 Undefined

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)来决定执行的代码块。

if 语句

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

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

if...else 语句

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

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

if...else if....else 语句

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,且被测试的变量会对每个 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 语句

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

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

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

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