HarmonyOS学习--TypeScript语言学习（三）

注意：这只是我学习的笔记！！！

注意：这只是我学习的笔记！！！

注意：这只是我学习的笔记！！！

本章目录如下

一、条件语句

二、迭代器

三、循环

四、函数

五、类

一、条件语句

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

在 TypeScript 中，我们可使用以下条件语句：

• if 语句?- 只有当指定条件为 true 时，使用该语句来执行代码
• if...else 语句?- 当条件为 true 时执行代码，当条件为 false 时执行其他代码
• if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
• switch 语句?- 使用该语句来选择多个代码块之一来执行

1.if 语句

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

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

2.if...else 语句

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

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

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

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

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

4.switch…case 语句

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

let 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;              
    } 
}

二、迭代器

当一个对象实现了Symbol.iterator属性时，我们认为它是可迭代的。 一些内置的类型如?Array，Map，Set，String，Int32Array，Uint32Array等都已经实现了各自的Symbol.iterator。 对象上的?Symbol.iterator函数负责返回供迭代的值。

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

三、循环

1.for 循环

TypeScript for 循环用于多次执行一个语句序列，简化管理循环变量的代码。

语法格式如下所示：

for ( init; condition; increment ){
    statement(s);
}

以下实例计算 5 的阶乘， for 循环生成从 5 到 1 的数字，并计算每次循环数字的乘积。

let num:number = 5; 
let i:number; 
let factorial = 1; 
 
for(i = num;i>=1;i--) {
   factorial *= i;
}
console.log(factorial)

打印结果：

120

2.for...in 循环

for...in 语句用于一组值的集合或列表进行迭代输出。

语法格式如下所示：

for (var val in list) { 
    //语句 
}

代码如下：?

let j:any; 
let n:any = "a b c" 
 
for(j in n) {
    console.log(n[j])  
}

打印结果：

a
b
c

3.for...of 循环

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

4.forEach 循环

let list = [4, 5, 6];
list.forEach((val, idx, array) => {
    // val: 当前值
    // idx：当前index
    // array: Array
});

5.while 循环

while 语句在给定条件为 true 时，重复执行语句或语句组。循环主体执行之前会先测试条件。

语法格式如下所示：

while(condition)
{
   statement(s);
}

代码如下：

let num:number = 5; 
let factorial:number = 1; 
 
while(num >=1) { 
    factorial = factorial * num; 
    num--; 
} 
console.log("5 的阶乘为："+factorial);

输出结果为：

5 的阶乘为：120

6.do...while 循环

不像?for?和?while?循环，它们是在循环头部测试循环条件。do...while?循环是在循环的尾部检查它的条件。

语法格式如下所示：

do
{
   statement(s);
}while( condition );

代码如下：

var n:number = 10;
do { 
    console.log(n); 
    n--; 
} while(n>=0);

输出结果为：

10
9
8
7
6
5
4
3
2
1
0

7.break 语句

break?语句有以下两种用法：

1. 当?break?语句出现在一个循环内时，循环会立即终止，且程序流将继续执行紧接着循环的下一条语句。
2. 它可用于终止?switch?语句中的一个 case。

如果您使用的是嵌套循环（即一个循环内嵌套另一个循环），break 语句会停止执行最内层的循环，然后开始执行该块之后的下一行代码。

let i:number = 1 
while(i<=10) { 
    if (i % 5 == 0) {   
        console.log ("在 1~10 之间第一个被 5 整除的数为 : "+i) 
        break     // 找到一个后退出循环
    } 
    i++ 
}  // 输出 5 然后程序执行结束

输出结果为：

在 1~10 之间第一个被 5 整除的数为 : 5

8.continue 语句

continue?语句有点像?break?语句。但它不是强制终止，continue 会跳过当前循环中的代码，强迫开始下一次循环。

对于?for?循环，continue?语句执行后自增语句仍然会执行。对于?while?和?do...while?循环，continue?语句重新执行条件判断语句。

let num:number = 0
let count:number = 0;
 
for(num=0;num<=20;num++) {
    if (num % 2==0) {
        continue
    }
    count++
}
console.log ("0 ~20 之间的奇数个数为: "+count)    //输出10个偶数

输出结果为：

0 ~20 之间的奇数个数为: 10

四、函数

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

语法格式如下所示：

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

函数是一组一起执行一个任务的语句，函数声明要告诉编译器函数的名称、返回类型和参数。

1.有名函数和匿名函数

TypeScript可以创建有名字的函数和匿名函数，其创建方法如下：

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

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

2.为函数定义类型

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

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

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

3.可选参数

在 TypeScript 函数里，如果我们定义了参数，则我们必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识 ？。在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能。 比如，我们想让lastName是可选的：

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}
 
let result1 = buildName("Bob");                  // 错误，缺少参数
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，参数太多了
let result3 = buildName("Bob", "Adams");         // 正确

以下实例，我们将 lastName 设置为可选参数：

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}
 
let result1 = buildName("Bob");  // 正确
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，参数太多了
let result3 = buildName("Bob", "Adams");  // 正确

可选参数意思是可以不传值或者有几个参数传几个值

可选参数必须跟在必需参数后面。 如果上例我们想让 firstName 是可选的，lastName 必选，那么就要调整它们的位置，把 firstName 放在后面。

如果都是可选参数就没关系。

4.剩余参数

有一种情况，我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。

剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。

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

函数的最后一个命名参数 restOfName 以 ... 为前缀，它将成为一个由剩余参数组成的数组，索引值从0（包括）到 restOfName.length（不包括）

function addNumbers(...nums:number[]) {  
    var i;   
    var sum:number = 0; 
    
    for(i = 0;i<nums.length;i++) { 
       sum = sum + nums[i]; 
    } 
    console.log("和为：",sum) 
 } 
 addNumbers(1,2,3) 
 addNumbers(10,10,10,10,10)

输出结果为：

和为： 6
和为： 50

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

6.构造函数

TypeScript 也支持使用 JavaScript 内置的构造函数 Function() 来定义函数：

语法格式如下：

var res = new Function ([arg1[, arg2[, ...argN]],] functionBody)

参数说明：

• arg1, arg2, ... argN：参数列表。
• functionBody：一个含有包括函数定义的 JavaScript 语句的字符串。

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

输出结果为：

12

7.函数重载

重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。

每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表。

参数类型不同：

function disp(string):void; 
function disp(number):void;

参数数量不同：

function disp(n1:number):void; 
function disp(x:number,y:number):void;

参数类型顺序不同：

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

如果参数类型不同，则参数类型应设置为?any。

参数数量不同你可以将不同的参数设置为可选。

?五、类

TypeScript 是面向对象的 JavaScript。

类描述了所创建的对象共同的属性和方法。

TypeScript 支持面向对象的所有特性，比如 类、接口等。

1.类的定义

TypeScript 类定义方式如下：

class class_name { 
    // 类作用域
}

定义类的关键字为 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();

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}`;
  }
}

通过上面的Employee类，我们可以定义一个人物Tom，这里可以获取他的基本信息，也可以获取他的雇主信息，其定义如下：

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

3.继承类的方法重写

类继承后，子类可以对父类的方法重新定义，这个过程称之为方法的重写。

其中 super 关键字是对父类的直接引用，该关键字可以引用父类的属性和方法。

class PrinterClass { 
   doPrint():void {
      console.log("父类的 doPrint() 方法。") 
   } 
} 
 
class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() // 调用父类的函数
      console.log("子类的 doPrint()方法。")
   } 
}

输出结果为：

父类的 doPrint() 方法。

子类的 doPrint()方法。

4.static 关键字

static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("num 值为 "+ StaticMem.num) 
   } 
} 
 
StaticMem.num = 12     // 初始化静态变量
StaticMem.disp()       // 调用静态方法

输出结果为：

num 值为 12

5.instanceof 运算符

instanceof 运算符用于判断对象是否是指定的类型，如果是返回 true，否则返回 false。

class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log("obj 对象是 Person 类实例化来的吗？ " + isPerson);

输出结果为：

obj 对象是 Person 类实例化来的吗？ true

6.访问控制修饰符

TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。

TypeScript 支持 3 种不同的访问权限。

• public（默认）?: 公有，可以在任何地方被访问。
• protected?: 受保护，可以被其自身以及其子类访问。
• private?: 私有，只能被其定义所在的类访问。

以下实例定义了两个变量 str1 和 str2，str1 为 public，str2 为 private，实例化后可以访问 str1，如果要访问 str2 则会编译错误。

class Encapsulate { 
   str1:string = "hello" 
   private str2:string = "world" 
}
 
var obj = new Encapsulate() 
console.log(obj.str1)     // 可访问 
console.log(obj.str2)   // 编译错误， str2 是私有的

学习文章：

鸿蒙开发者官方文档

菜鸟教程

TypeScript中文网