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

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

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

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

本章目录如下：

一、对象

二、接口

三、Number 对象

四、String 对象

五、数组

六、Map

七、模块

八、枚举

一、对象

对象是包含一组键值对的实例。 值可以是标量、函数、数组、对象等，如下实例：

let object_name = { 
    key1: "value1", // 标量
    key2: "value",  
    key3: function() {
        // 函数
    }, 
    key4:["content1", "content2"] //集合
}

以上对象包含了标量，函数，集合(数组或元组)。

1.访问对象的值

let sites = { 
   site1:"Runoob", 
   site2:"Google" 
}; 

console.log(sites.site1) 
console.log(sites.site2)

输出结果为：

Runoob
Google

2.访问方法

let sites = {
    site1: "Runoob",
    site2: "Google",
    sayHello: function () { } // 类型模板
};
sites.sayHello = function () {
    console.log("hello " + sites.site1);
};
sites.sayHello();

输出结果为：

hello Runoob

3.对象也可以作为一个参数传递给函数

let sites = { 
    site1:"Runoob", 
    site2:"Google",
}; 
let invokesites = function(obj: { site1:string, site2 :string }) { 
    console.log("site1 :"+obj.site1) 
    console.log("site2 :"+obj.site2) 
} 
invokesites(sites)

输出结果为：

site1 :Runoob
site2 :Google

二、接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

TypeScript 接口定义如下：

interface interface_name { 
}

1.接口

以下实例中，我们定义了一个接口 IPerson，接着定义了一个变量 customer，它的类型是 IPerson。

customer 实现了接口 IPerson 的属性和方法。

interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
} 
 
let customer:IPerson = { 
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there"} 
} 
 
console.log("Customer 对象 ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  
 
let employee:IPerson = { 
    firstName:"Jim",
    lastName:"Blakes", 
    sayHi: ():string =>{return "Hello!!!"} 
} 
 
console.log("Employee  对象 ") 
console.log(employee.firstName) 
console.log(employee.lastName)

输出结果为：

Customer 对象
Tom
Hanks
Hi there
Employee  对象
Jim
Blakes

2.联合类型和接口

以下实例演示了如何在接口中使用联合类型：

interface RunOptions { 
    program:string; 
    commandline:string[]|string|(()=>string); 
} 
 
// commandline 是字符串
let options:RunOptions = {program:"test1",commandline:"Hello"}; 
console.log(options.commandline)  
 
// commandline 是字符串数组
options = {program:"test1",commandline:["Hello","World"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  
 
// commandline 是一个函数表达式
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 
 
let fn:any = options.commandline; 
console.log(fn());

输出结果为：

Hello
Hello
World
**Hello World**

3.接口和数组

接口中我们可以将数组的索引值和元素设置为不同类型，索引值可以是数字或字符串。

设置元素为字符串类型：

interface namelist { 
   [index:number]:string 
} 
 
// 类型一致，正确
let list2:namelist = ["Google","Runoob","Taobao"]
// 错误元素 1 不是 string 类型
// var list2:namelist = ["Runoob",1,"Taobao"]

4.接口继承

接口继承就是说接口可以通过其他接口来扩展自己。

Typescript 允许接口继承多个接口。

继承使用关键字 extends。

单接口继承语法格式：

Child_interface_name extends super_interface_name

多接口继承语法格式，继承的各个接口使用逗号 , 分隔：

Child_interface_name extends super_interface1_name, super_interface2_name,...,super_interfaceN_name

代码如下：

interface Person { 
   age:number 
} 
 
interface Musician extends Person { 
   instrument:string 
} 
 
let drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("年龄:  "+drummer.age)
console.log("喜欢的乐器:  "+drummer.instrument)

输出结果为：

年龄:  27
喜欢的乐器:  Drums

多继承实例如下：

interface IParent1 { 
    v1:number 
} 
 
interface IParent2 { 
    v2:number 
} 
 
interface Child extends IParent1, IParent2 { } 
let Iobj:Child = { v1:12, v2:23} 

输出结果为：

value 1: 12 value 2: 23

5.实现接口

与C#或Java里接口的基本作用一样，TypeScript也能够用它来明确的强制一个类去符合某种契约。

interface ClockInterface {
    currentTime: Date;
}

class Clock implements ClockInterface {
    currentTime: Date;
    constructor(h: number, m: number) { }
}

你也可以在接口中描述一个方法，在类里实现它，如同下面的setTime方法一样：

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}

三、Number 对象

Number 对象是原始数值的包装对象。

语法

let num = new Number(value);

注意： 如果一个参数值不能转换为一个数字将返回 NaN (非数字值)。

1.Number 对象属性

下表列出了 Number 对象支持的属性：

console.log("TypeScript Number 属性: "); 
console.log("最大值为: " + Number.MAX_VALUE); 
console.log("最小值为: " + Number.MIN_VALUE); 
console.log("负无穷大: " + Number.NEGATIVE_INFINITY); 
console.log("正无穷大:" + Number.POSITIVE_INFINITY);

输出结果为：

TypeScript Number 属性:
最大值为: 1.7976931348623157e+308
最小值为: 5e-324
负无穷大: -Infinity
正无穷大:Infinity

2.NaN 实例

let month = 0 
if( month<=0 || month >12) { 
    month = Number.NaN 
    console.log("月份是："+ month) 
} else { 
    console.log("输入月份数值正确。") 
}

输出结果为：

月份是：NaN

3.Number 对象方法

Number对象 支持以下方法：

四、String 对象

String 对象用于处理文本（字符串）。

语法：

let txt = new String("string");
或者更简单方式：
let txt = "string";

1.String 对象属性

下表列出了 String 对象支持的属性：

2.String 方法

下表列出了 String 对象支持的方法：

序号	方法 & 描述	实例
1.	charAt() 返回在指定位置的字符。	var str = new String("RUNOOB"); console.log("str.charAt(0) 为:" + str.charAt(0)); console.log("str.charAt(1) 为:" + str.charAt(1));
2.	charCodeAt() 返回在指定的位置的字符的 Unicode 编码。	var str = new String("RUNOOB"); console.log("str.charCodeAt(0) 为:" + str.charCodeAt(0)); console.log("str.charCodeAt(1) 为:" + str.charCodeAt(1));
3.	concat() 连接两个或更多字符串，并返回新的字符串。	var str1 = new String( "RUNOOB" ); var str2 = new String( "GOOGLE" ); var str3 = str1.concat( str2 ); console.log("str1 + str2 : "+str3)
4.	indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。	var str1 = new String( "RUNOOB" ); var index = str1.indexOf( "OO" ); console.log("查找的字符串位置 :" + index );
5.	lastIndexOf() 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。	var str1 = new String( "string" ); var index = str1.lastIndexOf( "string" ); console.log("lastIndexOf 查找到的最后字符串位置 :" + index ); index = str1.lastIndexOf( "one" ); console.log("lastIndexOf 查找到的最后字符串位置 :" + index );
6.	localeCompare() 用本地特定的顺序来比较两个字符串。	var str1 = new String( "This is string" ); var index = str1.localeCompare( "This is string"); console.log("localeCompare first :" + index ); //0
7.	match() 查找找到一个或多个正则表达式的匹配。	var str="The rain in SPAIN stays mainly in the plain"; var n=str.match(/ain/g);
8.	replace() 替换与正则表达式匹配的子串	var re = /(\w+)\s(\w+)/; var str = "zara ali"; var newstr = str.replace(re, "$2, $1"); console.log(newstr); // ali, zara
9.	search() 检索与正则表达式相匹配的值	var re = /apples/gi; var str = "Apples are round, and apples are juicy."; if (str.search(re) == -1 ) { console.log("Does not contain Apples" ); } else { console.log("Contains Apples" ); }
10.	slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
11.	split() 把字符串分割为子字符串数组。	var str = "Apples are round, and apples are juicy."; var splitted = str.split(" ", 3); console.log(splitted) // [ 'Apples', 'are', 'round,' ]
12.	substr() 从起始索引号提取字符串中指定数目的字符。
13.	substring() 提取字符串中两个指定的索引号之间的字符。	var str = "RUNOOB GOOGLE TAOBAO FACEBOOK"; console.log("(1,2): " + str.substring(1,2)); console.log("(0,10): " + str.substring(0, 10)); console.log("(5): " + str.substring(5)); // B GOOGLE TAOBAO FACEBOOK
14.	toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射。	var str = "Runoob Google"; console.log(str.toLocaleLowerCase( )); // runoob google
15.	toLocaleUpperCase() 据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射。	var str = "Runoob Google"; console.log(str.toLocaleUpperCase( )); // RUNOOB GOOGLE
16.	toLowerCase() 把字符串转换为小写。	var str = "Runoob Google"; console.log(str.toLowerCase( )); // runoob google
17.	toString() 返回字符串。	var str = "Runoob"; console.log(str.toString( )); // Runoob
18.	toUpperCase() 把字符串转换为大写。	var str = "Runoob Google"; console.log(str.toUpperCase( )); // RUNOOB GOOGLE
19.	valueOf() 返回指定字符串对象的原始值。	var str = new String("Runoob"); console.log(str.valueOf( )); // Runoob

五、数组

数组对象是使用单独的变量名来存储一系列的值。

数组非常常用。

1.接本语法

TypeScript 声明数组的语法格式如下所示：

let array_name[:datatype];        //声明 
array_name = [val1,val2,valn..]   //初始化

或者直接在声明时初始化：

let array_name[:datatype] = [val1,val2...valn]

如：

let sites:string[]; 
sites = ["Google","Runoob","Taobao"]

let numlist:number[] = [2,4,6,8]

整个数组结构如下所示：

索引值第一个为 0，我们可以根据索引值来访问数组元素：

let sites:string[]; 
sites = ["Google","Runoob","Taobao"] 
console.log(sites[0]); 
console.log(sites[1]);

输出结果为：

Google
Runoob

2.Array 对象

我们也可以使用 Array 对象创建数组。

Array 对象的构造函数接受以下两种值：

• 表示数组大小的数值。
• 初始化的数组列表，元素使用逗号分隔值。

指定数组初始化大小：

letr let_names:number[] = new Array(4)  
 
for(let i = 0; i<let_names.length; i++) { 
        let_names[i] = i * 2 
        console.log(let_names[i]) 
}

输出结果为：

0
2
4
6

3.数组迭代

我们可以使用 for 语句来循环输出数组的各个元素：

let j:any; 
let nums:number[] = [1001,1002,1003,1004] 
 
for(j in nums) { 
    console.log(nums[j]) 
}

输出结果为：

1001
1002
1003
1004

4.多维数组

一个数组的元素可以是另外一个数组，这样就构成了多维数组（Multi-dimensional Array）。

最简单的多维数组是二维数组，定义方式如下：

let arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]


let multi:number[][] = [[1,2,3],[23,24,25]]  
console.log(multi[0][0]) 
console.log(multi[0][1]) 
console.log(multi[0][2]) 
console.log(multi[1][0]) 
console.log(multi[1][1]) 
console.log(multi[1][2])

输出结果为：

1
2
3
23
24
25

5.数组方法

下表列出了一些常用的数组方法：

序号	方法 & 描述	实例
1.	concat() 连接两个或更多的数组，并返回结果。	var alpha = ["a", "b", "c"]; var numeric = [1, 2, 3]; var alphaNumeric = alpha.concat(numeric); console.log("tag : " + alphaNumeric ); // a,b,c,1,2,3
2.	every() 检测数值元素的每个元素是否都符合条件。	function isBigEnough(element, index, array) { return (element >= 10); } var passed = [12, 5, 8, 130, 44].every(isBigEnough); console.log("Test Value : " + passed ) // false
3.	filter() 检测数值元素，并返回符合条件所有元素的数组。	function isBigEnough(element, index, array) { return (element >= 10); } var passed = [12, 5, 8, 130, 44].filter(isBigEnough); console.log("Test Value : " + passed ); // 12,130,44
4.	forEach() 数组每个元素都执行一次回调函数。	let num = [7, 8, 9]; num.forEach(function (value) { console.log(value); });
5.	indexOf() 搜索数组中的元素，并返回它所在的位置。 如果搜索不到，返回值 -1，代表没有此项。	var index = [12, 5, 8, 130, 44].indexOf(8); console.log("index is : " + index ); // 2
6.	join() 把数组的所有元素放入一个字符串。	var arr = new Array("Google","Runoob","Taobao"); var str = arr.join(); console.log("str : " + str ); // Google,Runoob,Taobao var str = arr.join(", "); console.log("str : " + str ); // Google, Runoob, Taobao var str = arr.join(" + "); console.log("str : " + str ); // Google + Runoob + Taobao
7.	lastIndexOf() 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。	var index = [12, 5, 8, 130, 44].lastIndexOf(8); console.log("index is : " + index ); // 2
8.	map() 通过指定函数处理数组的每个元素，并返回处理后的数组。	var numbers = [1, 4, 9]; var roots = numbers.map(Math.sqrt); console.log("roots is : " + roots ); // 1,2,3
9.	pop() 删除数组的最后一个元素并返回删除的元素。	var numbers = [1, 4, 9]; var element = numbers.pop(); console.log("element is : " + element ); // 9 var element = numbers.pop(); console.log("element is : " + element ); // 4
10.	push() 向数组的末尾添加一个或更多元素，并返回新的长度。	var numbers = new Array(1, 4, 9); var length = numbers.push(10); console.log("new numbers is : " + numbers ); // 1,4,9,10 length = numbers.push(20); console.log("new numbers is : " + numbers ); // 1,4,9,10,20
11.	reduce() 将数组元素计算为一个值（从左到右）。	var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; }); console.log("total is : " + total ); // 6
12.	reduceRight() 将数组元素计算为一个值（从右到左）。	var total = [0, 1, 2, 3].reduceRight(function(a, b){ return a + b; }); console.log("total is : " + total ); // 6
13.	reverse() 反转数组的元素顺序。	var arr = [0, 1, 2, 3].reverse(); console.log("Reversed array is : " + arr ); // 3,2,1,0
14.	shift() 删除并返回数组的第一个元素。	var arr = [10, 1, 2, 3].shift(); console.log("Shifted value is : " + arr ); // 10
15.	slice() 选取数组的的一部分，并返回一个新数组。	var arr = ["orange", "mango", "banana", "sugar", "tea"]; console.log("arr.slice( 1, 2) : " + arr.slice( 1, 2) ); // mango console.log("arr.slice( 1, 3) : " + arr.slice( 1, 3) ); // mango,banana
16.	some() 检测数组元素中是否有元素符合指定条件。	function isBigEnough(element, index, array) { return (element >= 10); } var retval = [2, 5, 8, 1, 4].some(isBigEnough); console.log("Returned value is : " + retval ); // false var retval = [12, 5, 8, 1, 4].some(isBigEnough); console.log("Returned value is : " + retval ); // true
17.	sort() 对数组的元素进行排序。	var arr = new Array("orange", "mango", "banana", "sugar"); var sorted = arr.sort(); console.log("Returned string is : " + sorted ); // banana,mango,orange,sugar
18.	splice() 从数组中添加或删除元素。	var arr = ["orange", "mango", "banana", "sugar", "tea"]; var removed = arr.splice(2, 0, "water"); console.log("After adding 1: " + arr ); // orange,mango,water,banana,sugar,tea console.log("removed is: " + removed); removed = arr.splice(3, 1); console.log("After removing 1: " + arr ); // orange,mango,water,sugar,tea console.log("removed is: " + removed); // banana
19.	toString() 把数组转换为字符串，并返回结果。	var arr = new Array("orange", "mango", "banana", "sugar"); var str = arr.toString(); console.log("Returned string is : " + str ); // orange,mango,banana,sugar
20.	unshift() 向数组的开头添加一个或更多元素，并返回新的长度。	var arr = new Array("orange", "mango", "banana", "sugar"); var length = arr.unshift("water"); console.log("Returned array is : " + arr ); // water,orange,mango,banana,sugar console.log("Length of the array is : " + length ); // 5

六、Map

Map 对象保存键值对，并且能够记住键的原始插入顺序。

任何值(对象或者原始值) 都可以作为一个键或一个值。

Map 是 ES6 中引入的一种新的数据结构，可以参考 ES6 Map 与 Set。

1.创建 Map

TypeScript 使用 Map 类型和 new 关键字来创建 Map：

let myMap = new Map();

初始化 Map，可以以数组的格式来传入键值对：

let myMap = new Map([
        ["key1", "value1"],
        ["key2", "value2"]
    ]); 

Map 相关的函数与属性：

• map.clear() -- 移除 Map 对象的所有键/值对 。
• map.set() -- 设置键值对，返回该 Map 对象。
• map.get() -- 返回键对应的值，如果不存在，则返回 undefined。
• map.has() -- 返回一个布尔值，用于判断 Map 中是否包含键对应的值。
• map.delete() -- 删除 Map 中的元素，删除成功返回 true，失败返回 false。
• map.size -- 返回 Map 对象键/值对的数量。
• map.keys() - 返回一个 Iterator 对象， 包含了 Map 对象中每个元素的键 。
• map.values() -- 返回一个新的Iterator对象，包含了Map对象中每个元素的值 。

代码如下：

let nameSiteMapping = new Map();
 
// 设置 Map 对象
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
 
// 获取键对应的值
console.log(nameSiteMapping.get("Runoob"));     // 2
 
// 判断 Map 中是否包含键对应的值
console.log(nameSiteMapping.has("Taobao"));       // true
console.log(nameSiteMapping.has("Zhihu"));        // false
 
// 返回 Map 对象键/值对的数量
console.log(nameSiteMapping.size);                // 3
 
// 删除 Runoob
console.log(nameSiteMapping.delete("Runoob"));    // true
console.log(nameSiteMapping);
// 移除 Map 对象的所有键/值对
nameSiteMapping.clear();             // 清除 Map
console.log(nameSiteMapping);

输出结果为：

2
true
false
3
true
Map { 'Google' => 1, 'Taobao' => 3 }
Map {}

2.迭代 Map

Map 对象中的元素是按顺序插入的，我们可以迭代 Map 对象，每一次迭代返回 [key, value] 数组。

TypeScript使用 for...of 来实现迭代：

let nameSiteMapping = new Map();
 
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
 
// 迭代 Map 中的 key
for (let key of nameSiteMapping.keys()) {
    console.log(key);                  
}
 
// 迭代 Map 中的 value
for (let value of nameSiteMapping.values()) {
    console.log(value);                 
}
 
// 迭代 Map 中的 key => value
for (let entry of nameSiteMapping.entries()) {
    console.log(entry[0], entry[1]);   
}
 
// 使用对象解析
for (let [key, value] of nameSiteMapping) {
    console.log(key, value);            
}

执行以上 JavaScript 代码，输出结果为：

Google
Runoob
Taobao
1
2
3
Google 1
Runoob 2
Taobao 3
Google 1
Runoob 2
Taobao 3

七、模块

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

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

1.导出

任何声明（比如变量，函数，类，类型别名或接口）都能够通过添加export关键字来导出。

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

2.导入

模块的导入操作与导出一样简单。 可以使用以下 import形式之一来导入其它模块中的导出内容。

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

八、枚举

使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。

TypeScript支持数字的和基于字符串的枚举

1.数字枚举

首先我们看看数字枚举，如果你使用过其它编程语言应该会很熟悉。

enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}

如上，我们定义了一个数字枚举， Up使用初始化为 1。 其余的成员会从 1开始自动增长。 换句话说， Direction.Up的值为 1， Down为 2， Left为 3， Right为 4。

我们还可以完全不使用初始化器：

enum Direction {
    Up,
    Down,
    Left,
    Right,
}

现在， Up的值为 0， Down的值为 1等等。 当我们不在乎成员的值的时候，这种自增长的行为是很有用处的，但是要注意每个枚举成员的值都是不同的。

使用枚举很简单：通过枚举的属性来访问枚举成员，和枚举的名字来访问枚举类型：

enum Response {
    No = 0,
    Yes = 1,
}

function respond(recipient: string, message: Response): void {
    // ...
}

respond("Princess Caroline", Response.Yes)

2.字符串枚举

字符串枚举的概念很简单，但是有细微的 运行时的差别。 在一个字符串枚举里，每个成员都必须用字符串字面量，或另外一个字符串枚举成员进行初始化。

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

由于字符串枚举没有自增长的行为，字符串枚举可以很好的序列化。 换句话说，如果你正在调试并且必须要读一个数字枚举的运行时的值，这个值通常是很难读的 - 它并不能表达有用的信息（尽管 反向映射会有所帮助），字符串枚举允许你提供一个运行时有意义的并且可读的值，独立于枚举成员的名字。

学习文章：

鸿蒙开发者官方文档

菜鸟教程

TypeScript中文网