注意：这只是我学习的笔记！！！
注意：这只是我学习的笔记！！！
注意：这只是我学习的笔记！！！
本章目录如下：
一、对象
二、接口
三、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
Google2.访问方法
let sites = {
site1: "Runoob",
site2: "Google",
sayHello: function () { } // 类型模板
};
sites.sayHello = function () {
console.log("hello " + sites.site1);
};
sites.sayHello();输出结果为：
hello Runoob3.对象也可以作为一个参数传递给函数
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
Blakes2.联合类型和接口
以下实例演示了如何在接口中使用联合类型：
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: 235.实现接口
与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
正无穷大:Infinity2.NaN 实例
let month = 0
if( month<=0 || month >12) {
month = Number.NaN
console.log("月份是："+ month)
} else {
console.log("输入月份数值正确。")
}输出结果为：
月份是：NaN3.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
Runoob2.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
63.数组迭代
我们可以使用 for 语句来循环输出数组的各个元素：
let j:any;
let nums:number[] = [1001,1002,1003,1004]
for(j in nums) {
console.log(nums[j])
}输出结果为：
1001
1002
1003
10044.多维数组
一个数组的元素可以是另外一个数组，这样就构成了多维数组（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
255.数组方法
下表列出了一些常用的数组方法：
| 序号 | 方法 & 描述 | 实例 |
|---|---|---|
| 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中文网
243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
