TypeScript

目录

一. TypeScript 介绍

1.1 TypeScript 是什么

1.2 静态类型和动态类型

1.3 Why TypeScript

1.3.1 TypeScript 开发应用

1.3.2 前置知识

二. 如何学习 TypeScript

相关链接

三. JavaScript 与 TypeScript 的区别

四. 起步

4.1 搭建 TypeScript 开发环境

4.2 编辑器的选择

五. TypeScript 基础法

5.1 TypeScript 保留关键字

5.2 空白和换行

5.3 TypeScript 区分大小写

5.4 分号是可选的

5.5 TypeScript 注释

5.6 TypeScript 支持两种类型的注释

5.7 TypeScript 与面向对象

六. TypeScript 变量声明

6.1、声明变量的类型及初始值：

6.2、声明变量的类型，但没有初始值，变量值会设置为undefined：

6.3、声明变量并初始值，但不设置类型，该变量可以是任意类型：

6.4、声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined：

七. TypeScript 基础类型

7.1 TypeScript 包含的数据类型如下表:

7.2 类型断言

7.2.1 <类型>值

7.2.2 值 as 类型

八. TypeScript 运算符

8.1 算术运算符

8.2 关系运算符

8.3 逻辑运算符

8.4 位运算符

8.5 赋值运算符

8.6 三元运算符 (?:)

8.7 类型运算符

typeof 运算符

instanceof

九. TypeScript 条件语句

十. TypeScript 循环

10.1 for 循环

10.2 for...in 循环

10.3 for…of 、forEach、every 和 some ,map,reduct,filter循环

10.4 while 循环

10.5 do...while 循环

10.6 break 语句

10.7 continue 语句

十一. TypeScript 函数

11.1函数定义

11.2函数调用

11.3函数返回值

11.4带参数的函数

11.5可选参数和默认参数

11.6剩余参数

11.7匿名函数

11.8构造函数

11.9递归函数

11.10 lambda函数（箭头函数）

十二. TypeScript Number

Number 对象属性

Number 对象方法

十三. TypeScript String（字符串）

13.1 语法

13.2 String 对象属性

13.3 String 方法

十四. TypeScript Array(数组)

14.1 实例

14.2 Array 对象

14.3 数组解构

14.4 数组迭代

14.5 多维数组

14.6 数组在函数中的使用

作为参数传递给函数

作为函数的返回值

14.7 数组方法

十五. TypeScript Map 对象

创建 Map

十六. TypeScript 元组

实例

访问元组

十七. TypeScript 联合类型

实例

十八. TypeScript 接口

实例

十九. TypeScript 对象

根据接口定义对象

根据type定义对象

二十. TypeScript 类

创建类的数据成员

二十一.TypeScript 新功能(新增运算符)

21.1 可选链(?.)

21.2 空值合并(??)

---

一. TypeScript 介绍

1.1 TypeScript 是什么

TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。

TypeScript 是 JavaScript 的超集，这意味着他支持所有的 JavaScript 语法。并在此之上对 JavaScript 添加了一些扩展，如 class / interface / module 等。这样会大大提升代码的可阅读性。

和 JavaScript 弱类型不同，TypeScript 这种强类型语言最大的优势在于静态类型检查，可以在代码开发阶段就预知一些低级错误的发生。

TypeScript是什么？

• 一种类似于 JavaScript 的语言，在 JavaScript 的基础之上增加了类型，同时增强了 JavaScript 部分语法功能

• 遵循 EcmaScript 6 标准规范

• 由微软开发

• 背后有微软和谷歌两大公司的支持

• TypeScript 可以编译成 JavaScript 从而在支持 JavaScript 的环境中运行

• TypeScript 和 JavaScript 的关系就好比 less 和 css 的关系

1.2 静态类型和动态类型

静态（static）：无需运行，根据程序代码就能确定结果。

动态（dynamic）：只有运行才能确定结果。

类型：对某个数据所具有的性质进行的描述。如它的结构是怎样的，能进行什么操作。

静态类型：数据拥有类型，且仅有数据拥有类型。

动态类型：数据拥有类型，存放数据的变量、表达式也拥有类型，且类型在编译时是固定的。

动态语言和静态语言各有优劣，而TypeScript提供了静态语言强类型支持，同时兼容动态语言弱类型的语法，使用者根据项目需求自由选择。

1.3 Why TypeScript

• 遵循 ECMAScript 6

• 强大的 IDE 支持

  • 类型检查

  • 严谨的语法提示

• 代码重构

• 可读性良好

1.3.1 TypeScript 开发应用

• React

• Angular

• Node.js

• Vue.js

• ...

凡是可以写 JavaScript 的都可以使用 TypeScript。

1.3.2 前置知识

• EcmaScript 6

• TypeScript 概念及关系

• 具有一定的 JavaScript 开发经验

• 有 Java、C#、C++、C 等静态类型语言使用经验更佳

二. 如何学习 TypeScript

• 官方文档为准

• 阅读别人的代码

• 由于 TypeScript 是兼容 EcmaScript 6 的，所以在开发的时候不需要完全学会 TypeScript 再使用

• 一个建议是有空就学，会了就用

• 虽然兼容 EcmaScript 6，但建议既然使用了 TypeScript 就让你的 TypeScript 代码更加 TypeScript，这样才能发挥出 TypeScript 的威力。

相关链接

• 维基百科 - TypeScript

• 如何评价 TypeScript？

• flow.js/typescript 这类定义参数类型的意义何在？

• TypeScript Github

• TypeScript 官网

• TypeScript 中文网

三. JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

四. 起步

4.1 搭建 TypeScript 开发环境

• 什么是 compiler？

• less 编译器：less

• ECMAScript 6 编译器：babel

• TypeScript 编译器：typescript

• 也就是说把 TypeScript 转换为 JavaScript ，浏览器可以才使用

• 本地开发编译环境

npm i -g typescript
​
# 查看版本号
tsc --version
​
# 查看使用帮助
tsc --help
#初始化ts
tsc --init

4.2 编辑器的选择

• Visual Studio Code

• Sublime

• Webstorm

• ...

新建 demo.ts 并写入以下内容：

安装编译器：

npm i -g typescript

编译：

tsc demo.ts

五. TypeScript 基础法

TypeScript 程序由以下几个部分组成：

• 模块

• 函数

• 变量

• 语句和表达式

• 注释

const hello : string = "Hello World!"
console.log(hello)
tsc demo.ts
tsc demo1.ts demo2.ts demo3.ts  //可以同时编译多个 ts 文件

5.1 TypeScript 保留关键字

break	as	catch	switch
case	if	throw	else
var	number	string	get
module	type	instanceof	typeof
public	private	enum	export
finally	for	while	void
null	super	this	new
in	return	true	false
any	extends	static	let
package	implements	interface	function
do	try	yield	const
continue

5.2 空白和换行

TypeScript 会忽略程序中出现的空格、制表符和换行符。

空格、制表符通常用来缩进代码，使代码易于阅读和理解。

5.3 TypeScript 区分大小写

TypeScript 区分大写和小写字符。

5.4 分号是可选的

每行指令都是一段语句，你可以使用分号或不使用， 分号在 TypeScript 中是可选的，建议使用。

以下代码都是合法的：

console.log("haogu")
console.log("Google");

如果语句写在同一行则一定需要使用分号来分隔，否则会报错，如：

console.log("haogu");console.log("Google");

5.5 TypeScript 注释

注释是一个良好的习惯，虽然很多程序员讨厌注释，但还是建议你在每段代码写上文字说明。

注释可以提高程序的可读性。

注释可以包含有关程序一些信息，如代码的作者，有关函数的说明等。

编译器会忽略注释。

5.6 TypeScript 支持两种类型的注释

• 单行注释 ( // ) − 在 // 后面的文字都是注释内容。

• 多行注释 (/* */) − 这种注释可以跨越多行。(Alt+Shift+A)

注释实例：

// 这是一个单行注释/* 这是一个多行注释 这是一个多行注释 这是一个多行注释 
*/

5.7 TypeScript 与面向对象

面向对象是一种对现实世界理解和抽象的方法。

TypeScript 是一种面向对象的编程语言。

面向对象主要有两个概念：对象和类。

• 对象：例如，一条狗是一个对象，它的状态有：颜色、名字、品种；行为有：摇尾巴、叫、吃等。

• 类：类是一个模板，它描述一类对象的行为和状态。

• 方法：方法是类的操作的实现步骤。

六. TypeScript 变量声明

变量是一种使用方便的占位符，用于引用计算机内存地址。

我们可以把变量看做存储数据的容器。

TypeScript 变量的命名规则：

• 变量名称可以包含数字和字母。

• 除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。

• 变量名不能以数字开头。

变量使用前必须先声明，我们可以使用 var 来声明变量。

我们可以使用以下四种方式来声明变量：

6.1、声明变量的类型及初始值：

var [变量名] : [类型] = 值;
var uname:string = "haogu";

6.2、声明变量的类型，但没有初始值，变量值会设置为undefined：

var [变量名] : [类型];
var uname:string;

6.3、声明变量并初始值，但不设置类型，该变量可以是任意类型：

var [变量名] : [类型];
var uname:string;

6.4、声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined：

var [变量名];
var uname;

七. TypeScript 基础类型

7.1 TypeScript 包含的数据类型如下表:

数据类型	关键字	描述
任意类型	any	声明为 any 的变量可以赋予任意类型的值。
数字类型	number	双精度 64 位浮点值。它可以用来表示整数和分数。let binaryLiteral: number = 0b1010; // 二进制 let octalLiteral: number = 0o744; // 八进制 let decLiteral: number = 6; // 十进制 let hexLiteral: number = 0xf00d; // 十六进制
字符串类型	string	一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（）来定义多行文本和内嵌表达式。let name: string = "haogu"; let years: number = 5; let words: string = 您好，今年是 ${ name } 发布 ${ years + 1} 周年;`
布尔类型	boolean	表示逻辑值：true 和 false。let flag: boolean = true;
数组类型	无	声明变量为数组。// 在元素类型后面加上[] let arr: number[] = [1, 2]; // 或者使用数组泛型 let arr: Array<number> = [1, 2];
元组	无	元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。let x: [string, number]; x = ['haogu', 1]; // 运行正常 x = [1, 'haogu']; // 报错 console.log(x[0]); // 输出 haogu
枚举	enum	枚举类型用于定义数值集合。enum Color {Red, Green, Blue}; let c: Color = Color.Blue; console.log(c); // 输出 2
void	void	用于标识方法返回值的类型，表示该方法没有返回值。function hello(): void { alert("Hello haogu"); }
null	null	表示对象值缺失。
undefined	undefined	用于初始化变量为一个未定义的值
never	never	never 代表从不会出现的值。

注意：

• TypeScript 和 JavaScript 没有整数类型。

• 使用泛型来创建可重用的数据，一个数据可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用数据。

7.2 类型断言

类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。

语法格式：

<类型>值 或:

值 as 类型

7.2.1 <类型>值

var str = '1' 
var str2:number = <number> <any> str;   //str、str2 是 string 类型
console.log(str2)

7.2.2 值 as 类型

//as关键字表示断言
//在Typescript中，表示断言有两种方法。一种是括号表示法：let someValue: any = "this is a string";let strLength: number = (someValue).length;//另一种使用as关键字：let someValue: any = "this is a string";let strLength: number = (someValue as string).length;

八. TypeScript 运算符

运算符用于执行程序代码运算，会针对一个以上操作数项目来进行运算。

TypeScript 主要包含以下几种运算：

• 算术运算符

• 关系运算符

• 逻辑运算符

• 位运算符

• 赋值运算符

• 三元/条件运算符

• 字符串运算符

• 类型运算符

8.1 算术运算符

运算符	描述	例子	x 运算结果	y 运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取模（余数）	x=y%2	1	5
++	自增	x=++y	6	6
x=y++	5	6
--	自减	x=--y	4	4
x=y--	5	4

8.2 关系运算符

关系运算符用于计算结果是否为 true 或者 false。

x=5，下面的表格解释了关系运算符的操作：

运算符	描述	比较	返回值
==	等于	x==8	false
!=	不等于	x!=8	true
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

8.3 逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3，下表解释了逻辑运算符：

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
||	or	(x==5 || y==5) 为 false
!	not	!(x==y) 为 true

8.4 位运算符

位操作是程序设计中对位模式按位或二进制数的一元和二元操作。

运算符	描述	例子	类似于	结果	十进制
&	AND，按位与处理两个长度相同的二进制数，两个相应的二进位都为 1，该位的结果值才为 1，否则为 0。	x = 5 & 1	0101 & 0001	0001	1
|	OR，按位或处理两个长度相同的二进制数，两个相应的二进位中只要有一个为 1，该位的结果值为 1。	x = 5 | 1	0101 | 0001	0101	5
~	取反，取反是一元运算符，对一个二进制数的每一位执行逻辑反操作。使数字 1 成为 0，0 成为 1。	x = ~ 5	~0101	1010	-6
^	异或，按位异或运算，对等长二进制模式按位或二进制数的每一位执行逻辑异按位或操作。操作的结果是如果某位不同则该位为 1，否则该位为 0。	x = 5 ^ 1	0101 ^ 0001	0100	4
<<	左移，把 << 左边的运算数的各二进位全部左移若干位，由 << 右边的数指定移动的位数，高位丢弃，低位补 0。	x = 5 << 1	0101 << 1	1010	10
>>	右移，把 >> 左边的运算数的各二进位全部右移若干位，>> 右边的数指定移动的位数。	x = 5 >> 1	0101 >> 1	0010	2
>>>	无符号右移，与有符号右移位类似，除了左边一律使用0 补位。	x = 2 >>> 1	0010 >>> 1	0001	18.5

8.5 赋值运算符

赋值运算符用于给变量赋值。

给定 x=10 和 y=5，下面的表格解释了赋值运算符：

运算符	例子	实例	x 值
= (赋值)	x = y	x = y	x = 5
+= (先进行加运算后赋值)	x += y	x = x + y	x = 15
-= (先进行减运算后赋值)	x -= y	x = x - y	x = 5
*= (先进行乘运算后赋值)	x *= y	x = x * y	x = 50
/= (先进行除运算后赋值)	x /= y	x = x / y	x = 2

8.6 三元运算符 (?:)

三元运算有 3 个操作数，并且需要判断布尔表达式的值。该运算符的主要是决定哪个值应该赋值给变量。

Test ? expr1 : expr2

• Test − 指定的条件语句

• expr1 − 如果条件语句 Test 返回 true 则返回该值

• expr2 − 如果条件语句 Test 返回 false 则返回该值

8.7 类型运算符

typeof 运算符

typeof 是一元运算符，返回操作数的数据类型。

instanceof

instanceof 运算符用于判断对象是否为指定的类型，后面章节我们会具体介绍它。

九. TypeScript 条件语句

条件语句用于基于不同的条件来执行不同的动作。

TypeScript 条件语句是通过一条或多条语句的执行结果（True 或 False）来决定执行的代码块。

通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

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

• if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码

• if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码

• if...else if....else 语句- 使用该语句来选择多个代码块之一来执行

• switch 语句 - 使用该语句来选择多个代码块之一来执行

十. TypeScript 循环

10.1 for 循环

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

语法格式如下所示：

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

下面是 for 循环的控制流程解析：

1. init 会首先被执行，且只会执行一次。这一步允许您声明并初始化任何循环控制变量。您也可以不在这里写任何语句，只要有一个分号出现即可。

2. 接下来，会判断 condition。如果为 true，则执行循环主体。如果为 false，则不执行循环主体，且控制流会跳转到紧接着 for 循环的下一条语句。

3. 在执行完 for 循环主体后，控制流会跳回上面的 increment 语句。该语句允许您更新循环控制变量。该语句可以留空，只要在条件后有一个分号出现即可。

4. 条件再次被判断。如果为 true，则执行循环，这个过程会不断重复（循环主体，然后增加步值，再然后重新判断条件）。在条件变为 false 时，for 循环终止。

10.2 for...in 循环

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

语法格式如下所示：

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

val 需要为 string 或 any 类型。

10.3 for…of 、forEach、every 和 some ,map,reduct,filter循环

10.4 while 循环

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

语法格式如下所示：

while(condition)
{statement(s);
}

在这里，statement(s) 可以是一个单独的语句，也可以是几个语句组成的代码块。

condition 可以是任意的表达式，当条件为 true 时执行循环。 当条件为 false 时，程序流将退出循环。

10.5 do...while 循环

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

语法格式如下所示：

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

请注意，条件表达式出现在循环的尾部，所以循环中的 statement(s) 会在条件被测试之前至少执行一次。

如果条件为 true，控制流会跳转回上面的 do，然后重新执行循环中的 statement(s)。这个过程会不断重复，直到给定条件变为 false 为止。

10.6 break 语句

break 语句有以下两种用法：

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

2. 它可用于终止 switch 语句中的一个 case。

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

语法格式如下所示：

break;

10.7 continue 语句

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

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

语法格式如下所示：

continue;

十一. TypeScript 函数

函数是一组一起执行一个任务的语句。

您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的，但在逻辑上，划分通常是根据每个函数执行一个特定的任务来进行的。

函数声明告诉编译器函数的名称、返回类型和参数。函数定义提供了函数的实际主体。

11.1函数定义

11.2函数调用

11.3函数返回值

11.4带参数的函数

11.5可选参数和默认参数

结合 ?: 一般用用于TS文件里面：意思指的是自动加上undefined的类型(下面的例子表示y可以是number类型或者undefined)

// 默认参数
function add1 (x: number, y: number = 10, z?:number): number {return x + y + (z || 0)
}
console.log(add1(1)) // 11

11.6剩余参数

11.7匿名函数

11.8构造函数

11.9递归函数

11.10 lambda函数（箭头函数）

十二. TypeScript Number

TypeScript 与 JavaScript 类似，支持 Number 对象。

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

语法

var num = new Number(value);

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

Number 对象属性

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

序号	属性 & 描述
1.	MAX_VALUE可表示的最大的数，MAX_VALUE 属性值接近于 1.79E+308。大于 MAX_VALUE 的值代表 "Infinity"。
2.	MIN_VALUE可表示的最小的数，即最接近 0 的正数 (实际上不会变成 0)。最大的负数是 -MIN_VALUE，MIN_VALUE 的值约为 5e-324。小于 MIN_VALUE ("underflow values") 的值将会转换为 0。
3.	NaN非数字值（Not-A-Number）。
4.	NEGATIVE_INFINITY负无穷大，溢出时返回该值。该值小于 MIN_VALUE。
5.	POSITIVE_INFINITY正无穷大，溢出时返回该值。该值大于 MAX_VALUE。
6.	prototypeNumber 对象的静态属性。使您有能力向对象添加属性和方法。
7.	constructor返回对创建此对象的 Number 函数的引用。

Number 对象方法

Number对象 支持以下方法：

序号	方法 & 描述	实例
1.	toExponential()把对象的值转换为指数计数法。	//toExponential() var num1 = 1225.30 var val = num1.toExponential(); console.log(val) // 输出： 1.2253e+3
2.	toFixed()把数字转换为字符串，并对小数点指定位数。	var num3 = 177.234 console.log("num3.toFixed() 为 "+num3.toFixed()) // 输出：177 console.log("num3.toFixed(2) 为 "+num3.toFixed(2)) // 输出：177.23 console.log("num3.toFixed(6) 为 "+num3.toFixed(6)) // 输出：177.234000
3.	toLocaleString()把数字转换为字符串，使用本地数字格式顺序。	var num = new Number(177.1234); console.log( num.toLocaleString()); // 输出：177.1234
4.	toPrecision()把数字格式化为指定的长度。	var num = new Number(7.123456); console.log(num.toPrecision()); // 输出：7.123456 console.log(num.toPrecision(1)); // 输出：7 console.log(num.toPrecision(2)); // 输出：7.1
5.	toString()把数字转换为字符串，使用指定的基数。数字的基数是 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。	var num = new Number(10); console.log(num.toString()); // 输出10进制：10 console.log(num.toString(2)); // 输出2进制：1010 console.log(num.toString(8)); // 输出8进制：12
6.	valueOf()返回一个 Number 对象的原始数字值。	var num = new Number(10); console.log(num.valueOf()); // 输出：10

十三. TypeScript String（字符串）

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

13.1 语法

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

13.2 String 对象属性

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

序号	属性 & 描述	实例
1.	constructor对创建该对象的函数的引用。	var str = new String( "This is string" ); console.log("str.constructor is:" + str.constructor)输出结果：str.constructor is:function String() { [native code] }
2.	length返回字符串的长度。	var uname = new String("Hello World") console.log("Length "+uname.length) // 输出 11
3.	prototype允许您向对象添加属性和方法。	function employee(id:number,name:string) { this.id = id this.name = name } var emp = new employee(123,"admin") employee.prototype.email="admin@小好.com" // 添加属性 email console.log("员工号: "+emp.id) console.log("员工姓名: "+emp.name) console.log("员工邮箱: "+emp.email)

13.3 String 方法

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

序号	方法 & 描述
1.	charAt()返回在指定位置的字符。
2.	charCodeAt()返回在指定的位置的字符的 Unicode 编码。
3.	concat()连接两个或更多字符串，并返回新的字符串。
4.	indexOf()返回某个指定的字符串值在字符串中首次出现的位置。
5.	lastIndexOf()从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
6.	localeCompare()用本地特定的顺序来比较两个字符串。
7.	match()查找找到一个或多个正则表达式的匹配。
8.	replace()替换与正则表达式匹配的子串
9.	search()检索与正则表达式相匹配的值
10.	slice()提取字符串的片断，并在新的字符串中返回被提取的部分。
11.	split()把字符串分割为子字符串数组。
12.	substr()从起始索引号提取字符串中指定数目的字符。
13.	substring()提取字符串中两个指定的索引号之间的字符。
14.	toLocaleLowerCase()根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射。
15.	toLocaleUpperCase()据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射。
16.	toLowerCase()把字符串转换为小写。
17.	toString()返回字符串。
18.	toUpperCase()把字符串转换为大写。
19.	valueOf() 返回指定字符串对象的原始值。

十四. TypeScript Array(数组)

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

14.1 实例

创建一个 number 类型的数组：

var numlist:number[] = [2,4,6,8]
// 索引值第一个为 0，我们可以根据索引值来访问数组元素：

14.2 Array 对象

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

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

• 表示数组大小的数值。

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

14.3 数组解构

var arr:number[] = [12,13] 
var[x,y] = arr // 将数组的两个元素赋值给变量 x 和 y
console.log(x) 
console.log(y)

14.4 数组迭代

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

14.5 多维数组

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

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

var arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]
var 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])

14.6 数组在函数中的使用

• 作为参数传递给函数

var sites:string[] = new Array("Google","小好","Taobao","Facebook") function disp(arr_sites:string[]) {for(var i = 0;i<arr_sites.length;i++) { console.log(arr_sites[i]) }  
}  
disp(sites);

• 作为函数的返回值

function disp():string[] { return new Array("Google", "小好", "Taobao", "Facebook");
} var sites:string[] = disp() 
for(var i in sites) { console.log(sites[i]) 
}

14.7 数组方法

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

序号	方法 & 描述
1.	concat()连接两个或更多的数组，并返回结果。
2.	every()检测数值元素的每个元素是否都符合条件。
3.	filter()检测数值元素，并返回符合条件所有元素的数组。
4.	forEach()数组每个元素都执行一次回调函数。
5.	indexOf()搜索数组中的元素，并返回它所在的位置。如果搜索不到，返回值 -1，代表没有此项。
6.	join()把数组的所有元素放入一个字符串。
7.	lastIndexOf()返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
8.	map()通过指定函数处理数组的每个元素，并返回处理后的数组。
9.	pop()删除数组的最后一个元素并返回删除的元素。
10.	push()向数组的末尾添加一个或更多元素，并返回新的长度。
11.	reduce()将数组元素计算为一个值（从左到右）。
12.	reduceRight()将数组元素计算为一个值（从右到左）。
13.	reverse()反转数组的元素顺序。
14.	shift()删除并返回数组的第一个元素。
15.	slice()选取数组的的一部分，并返回一个新数组。
16.	some()检测数组元素中是否有元素符合指定条件。
17.	sort()对数组的元素进行排序。
18.	splice()从数组中添加或删除元素。
19.	toString()把数组转换为字符串，并返回结果。
20.	unshift()向数组的开头添加一个或更多元素，并返回新的长度。

十五. TypeScript Map 对象

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

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

//编译使用es6编译
tsc --target es6 文件名

创建 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对象中每个元素的值 。

十六. TypeScript 元组

我们知道数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组。

元组中允许存储不同类型的元素，元组可以作为参数传递给函数。

创建元组的语法格式如下：

var tuple_name = [value1,value2,value3,…value n]

实例

声明一个元组并初始化：

var mytuple = [10,"小好"];

或者我们可以先声明一个空元组，然后再初始化：

var mytuple = []; 
mytuple[0] = 120 
mytuple[1] = 234

访问元组

元组中元素使用索引来访问，第一个元素的索引值为 0，第二个为 1，以此类推第 n 个为 n-1，语法格式如下:

tuple_name[index]

十七. TypeScript 联合类型

联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。

注意：只能赋值指定的类型，如果赋值其它类型就会报错。

创建联合类型的语法格式如下：

Type1|Type2|Type3 

实例

• 声明一个联合类型：

var val:string|number 
val = 12 
console.log("数字为 "+ val) 
val = "小好" 
console.log("字符串为 " + val)

• 联合类型作为函数参数使用

function disp(name:string|string[]) { if(typeof name == "string") { console.log(name) } else { var i; for(i = 0;i<name.length;i++) { console.log(name[i])} } 
} 
disp("小好") 
console.log("输出数组....") 
disp(["小好","Google","Taobao","Facebook"])

• 也可以将数组声明为联合类型

var arr:number[]|string[]; 
var i:number; 
arr = [1,2,4] 
console.log("**数字数组**")  for(i = 0;i<arr.length;i++) { console.log(arr[i]) 
}  arr = ["小好","Google","Taobao"] 
console.log("**字符串数组**")  for(i = 0;i<arr.length;i++) { console.log(arr[i]) 
}

十八. TypeScript 接口

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

TypeScript 接口定义如下：

interface interface_name { 
}

实例

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

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

interface IPerson { firstName:string, lastName:string, sayHi: ()=>string 
} var 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())  var employee:IPerson = { firstName:"Jim",lastName:"Blakes", sayHi: ():string =>{return "Hello!!!"} 
} console.log("Employee  对象 ") 
console.log(employee.firstName) 
console.log(employee.lastName)

十九. TypeScript 对象

• 根据接口定义对象

  interface User = {name: stringage: number
  };
  let stu:User={name:'小好',age:10}

• 根据type定义对象

  type User = {name: stringage: number
  };
  let stu:User={name:'小好',age:10}

泛型在接口和对象中的使用

二十. TypeScript 类

TypeScript 是面向对象的 JavaScript。

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

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

TypeScript 类定义方式如下：

class class_name { // 类作用域
}

定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：

• 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。

• 构造函数 − 类实例化时调用，可以为类的对象分配内存。

• 方法 − 方法为对象要执行的操作。

创建类的数据成员

以下实例我们声明了类 Car，包含字段为 engine，构造函数在类实例化后初始化字段 engine。

this 关键字表示当前类实例化的对象。注意构造函数的参数名与字段名相同，this.engine 表示类的字段。

此外我们也在类中定义了一个方法 disp()。

二十一.TypeScript 新功能(新增运算符)

21.1 可选链(?.)

TypeScript 3.7 实现了呼声最高的 ECMAScript 功能之一：可选链（Optional Chaining）

访问 address ，你必须遍历 data.customer.address，而且 data 或 customer 有可能是 undefined，所以通常使用 && 运算符或类似例子中的技巧遍历检查每个层次的定义。

现在你可以用 ?. 运算符来选择性地对数据访问。通过这种方式，如果存在尚未定义的父级对象，则会在链中的任何位置返回未定义，而不是在运行时崩溃。

// v3.7 以前
if (data && data.customer && data.customer.address) {const {address} = data.customerconst fullAddress = `${address.street}, ${address.city}, ${address.state }${address.zipcode}`
}
// v3.7
// data access
const address = data?.customer?.address
const fullAddress = `${address?.street}, ${address?.city}, ${address?.state } ${address?.zipcode}`// 也适用于数组
customers?.[0]?.['address']// 检查方法是否已定义并调用
customer.approve?.()

21.2 空值合并(??)

从 v3.7 可用

空值合并运算符是 || 的替代方法，如果左侧是 null 或 undefined，则它返回右侧的表达式。这和 || 有什么不同？ || 本质上是 JavaScript 中的布尔 OR 运算符，我们尝试利用短路返回第一个非 false 值。这可能会产生意想不到的结果，因为当要求数字 0 或空字符串作为有效输入时，将会被视为 false。让我们用一个例子来说明：

// 以前
passPhrase = data.inputString || 'Unknown'  //不会接受 "" (空字符串)
passCode =  data.number || '-1111' // 不会接受 0 
rememberMe = data.rememberFlag || true // 将会总是 true!!!// 现在
passPhrase = data.inputString ?? 'Unknown'  //仅在 inputString 未定义时为 Unknown
passCode =  data.number ?? '-1111' // 0 可以通过
rememberMe = data.rememberFlag ?? true // false 是有效值