TypeScript学习总结

---

前言

这篇笔记主要记录了我在学习TypeScript时的重点知识总结。通过web应用基础这门课程的学习，我对于TypeScript是什么，TypeScript的基本用法和语法有了初步的了解。

---

一、TypeScript是什么？

TypeScript是JavaScript类型的超集（当前我们处于ES5），它可以编译成纯JavaScript。

TypeScript给JavaScript加上可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。 TypeScript的开发体验远远超过以往纯JavaScript的开发体验，无需运行程序即可修复潜在bug。

TypeScript支持未来的ES6甚至ES7。在TypeScript中，可以直接使用ES6的最新特性，在编译时它会自动编译到ES3或ES5。

TypeScript可以构建大型程序，并在任何浏览器、任何计算机和任何操作系统上运行，且是开源的。

---

二、JavaScript 与 TypeScript 的区别

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

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

---

三、TypeScript基础

3.3、TypeScript 基础语法

TypeScript 程序由以下几个部分组成：模块、函数、变量、语句和表达式、注释

3.3.1、TypeScript 基础类型

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

数据类型	关键字
任意类型	any
数字类型	number
字符串类型	string
布尔类型	boolean
数组类型	无
元组	无
枚举	enum
void	void
null	null
undefined	undefined
never	never

3.3.2、TypeScript变量声明

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

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

TypeScript 变量的命名规则：

• 变量名称可以包含数字和字母。
• 除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。
• 变量名不能以数字开头。

变量使用前必须先声明，我们可以使用 var、let、const 来声明变量。var是函数作用域，let是块作用域，不允许重复声明,const是块作用域且初始化后无法改变其值。
我们可以使用以下四种方式来声明变量：

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

3.3.3、TypeScript 运算符

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

• 算术运算符：+，-，*，/，%，++，--
• 逻辑运算符：&&，||，！
• 关系运算符：==，!=，>，<，>=，<=
• 按位运算符：&，|，~，^，<<，>>，>>>>
• 赋值运算符：=，+=，-=，*=，/=
• 三元/条件运算符

    //Test ? expr1 : expr2
     //Test − 指定的条件语句
     //expr1 − 如果条件语句 Test 返回 true 则返回该值
     //expr2 − 如果条件语句 Test 返回 false 则返回该值
     var num:number = -2 
     var result = num > 0 ? "大于 0" : "小于 0，或等于 0" 
     console.log(result)
  

• 字符串运算符：+ 运算符可以拼接两个字符串
• 类型运算符：typeof 运算符

3.3.4、TypeScript 条件语句

TypeScript 中的条件语句：

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

3.3.5、TypeScript 循环

TypeScript 中的循环语句：

• for 循环
• for…in 循环
• for…of 、forEach、every 和 some 循环
• while 循环
• do…while 循环
  TypeScript 中的终止循环语句：
• break 语句
• continue 语句

3.3.6、TypeScript Array(数组)

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

• 表示数组大小的数值。
• 初始化的数组列表，元素使用逗号分隔值。
  csharp var arr_names:number[] = new Array(4) for(var i = 0; i<arr_names.length; i++) { arr_names[i] = i * 2 console.log(arr_names[i]) }
  数组解构：把数组元素赋值给变量

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

数组迭代使用 for 语句来循环输出数组的各个元素：

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

多维数组
一个数组的元素可以是另外一个数组，这样就构成了多维数组（Multi-dimensional Array）。
最简单的多维数组是二维数组，定义方式如下：
csharp var arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]
数组在函数中的使用

• 作为参数传递给函数
• 作为函数的返回值

常用的数组方法：

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

3.3.7、TypeScript Map 对象

Map 相关的函数与属性：

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

Map 对象中的元素是按顺序插入的，我们可以迭代 Map 对象，每一次迭代返回 [key, value] 数组。
TypeScript使用 for…of 来实现迭代.

3.3.8、TypeScript Map 接口

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

TypeScript 接口定义如下：interface interface_name { }，需要注意接口不能转换为 JavaScript。 它只是 TypeScript 的一部分。

接口继承就是说接口可以通过其他接口来扩展自己。Typescript 允许接口继承多个接口，继承的各个接口使用逗号 , 分隔。继承使用关键字 extends。

单接口继承语法格式：Child_interface_name extends super_interface_name

多接口继承语法格式：Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

3.3.9、TypeScript 类

TypeScript 是面向对象的 JavaScript。

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

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

TypeScript 类定义方式如下：

class class_name { 
    // 类作用域
}

 定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：
 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。
 构造函数 − 类实例化时调用，可以为类的对象分配内存。
 方法 − 方法为对象要执行的操作。