查看昵称，领取全套angular视频教程
一、Typescript
typescript简称ts，是js语法的超集，很多js新的语法就借鉴了ts语法。ts是由微软团队维护的
1.1 TS简介
1.1.1 Github地址
https://github.com/Microsoft/typescript
在过去，js的出现是为了解决页面中的一些简单交互，因此js被设计非常简单，被很多开发者接受
js特点
弱类型：定义变量没有具体的类型，可以存储任何类型的数据
动态的：变量存储的数据需要开辟多少内存空间，不是在定义时候说的算，而是运行时候动态开辟的
...
由于js是弱类型的，因此变量存储的是什么样式的数据，需要多少的内容空间，我们在定义的时候无法获知，只能在js运行的时候，动态的分配，所以js运行的时候，一边处理业务逻辑，一边分配内存空间，对于小型项目来说，运行是临时分配空间的性能消耗是可以接受的，在大型项目中，这种消耗是无法接受的。所以在一些强类型语言中，为变量在定义的时候指明类型，这样运行前就可以针对变量的类型分配内存空间，这样在程序运行的时候就不需要分配空间了，可以减少不必要的资源消耗，所以ts是一个强类型语言
在大型项目中，为了提高代码可维护性，我们通常采用面向对象编程方式，但是在面向对象编程中，我们势必要使用类，继承，接口，私有属性，共有属性等等，但是这些关键字，诸如：class，extends， implement， interface， private， public等等js都不支持，但是js为了实现这些功能，自身模拟了这些功能，但是为了模拟这些功能势必会产生一些不必要的开销，在大型项目中，这些开销是无法接受的。所以TS基于面向对象编程方式，实现了这些关键字。
... ts语法着眼于未来与大型项目。
遗憾的是，这些功能并没有一个浏览器实现，也没有一个浏览器宣称要实现（并且IE浏览器都没有实现），所以我们就要将其编译成js语言（ES3.1版本或者是ES5版本）。
图片1.png
1.1.2官网
http://www.typescriptlang.org/
1.1.3中文网站
https://www.tslang.cn/
1.2浏览器端编译
浏览不识别ts，我们既要将ts编译成js语言，在学习中，为了测试方便，我们可以在浏览器端编译。
我们要引入两个库
typescript.min.js 用来检测ts语法的
typescript.compile.min.js 用来编译ts语法的
想使用ts，就要创建一个ts环境，我们通过将script标签的type属性值改成text/typescript即可使用ts
ts环境一定要写在引入库的前面
1.3数据类型
ts是一个强类型语言，因此定义的任何数据，我们都要赋值类型。这样在运行前，就可以获知需要多大内存空间了。
ts是js语法的超集，因此js支持数据类型，ts也支持，
例如
数字 number
字符串 string
布尔值 boolean
...
定义类型的语法
var 数据: 类型 = 值
ts也允许我们定义变量的时候，忽略数据类型，此时ts就会对数据进行类型的猜测了
如果赋值了。就根据赋值的数据猜测类型
如果没有赋值，此时将猜测该变量的类型是any类型。
any类型是ts中新增的一种类型，可以存储任何类型的数据
由于ts加载需要时间，ts编译成js也需要时间，js再执行也需要时间，因此需要很多时间，不适合在浏览器端编译。
1 <!-- 创建ts运行环境 -->
2 <script type="text/typescript">
3 // 定义ts语法了
4 var color:string = 'red';
5 var hasChoose:boolean = true;
6 var num = 100;
7 // ts根据赋值，猜测num类型是number类型，因此就不能在赋值其他类型
8 // num = 'red';
9 var num2;
10 num2 = 300;
11 num2 = true;
12 // 等价于
13 var demo: any = true;
14 demo = 200;
15 </script>
16 <!-- 引入ts库 -->
17 <script type="text/javascript" src="lib/typescript.min.js"></script>
18 <script type="text/javascript" src="lib/typescript.compile.min.js"></script>
1.4工程化编译
我们已经学习了gulp，webpack等工程化工具，所以我们可以用这些工具，将ts编译成js的语法（es3.1, es5）.
例如，我们用webpack编译，我们就需要引入ts的编译插件：ts-loader
npm install ts-loader
由于ts-loader依赖于typescript，因此我们要安装typescript
npm install typescript
在webpack看来，ts文件也是一类资源，是资源就可以模块化打包加载
为了区分ts和js文件，我们通常将ts的拓展名定义成.ts
定义ts加载机
{
test: /.ts$/,
loader: ‘ts-loader’
}
在编译ts的时候，typecript模块需要tsconfig.json，所以我们要定义出来
1.5数组
ts中定义数组的语法
var 数组:类型[] = 数据;
这里的类型就约束了，数组中每一个成员的类型。
如果成员类型不确定，我们可以将类型定义成any
1 // 定义数组
2 let nums:number[] = [1, 2, 3];
3 let nums:any[] = [1, 2, 'color'];
4 console.log(nums)
1.6其他类型
ts是js语法的超集，因此js中的基本类型，ts都支持：number，boolean，string, symbol, null, undefined...
1.7类型推断
当我们定义变量的时候，没有定义类型，ts会根据变量赋值结果来推断数据类型，如果没有赋值，此时就定义成any
1.8元组
类似数组，只不过声明了数组中每个成员的类型
语法 let 数据:[成员1类型，成员2类型] = 数据
成员类型的个数是有限的，当我们添加其他成员的时候，其他成员的类型将这几种类型的联合类型
其他成员的类型为: 成员1类型 | 成员2类型...
如果为变量赋值的时候，成员不符合以上要求，就会抛出错误
1.9类型断言
很多时候，ts要猜测数据的类型，有时候我们可能比机器更了解该数据的类型，此时我们可以使用类型断言（有点类似数据类型转换的意思）
只能断言数据类型，不能转换数据类型
两种语法
第一种：let 数据1:类型1 = (<类型2>数据2)其他语句
第二种：let 数据1:类型1 = (数据2 as 类型2)其他语句
1.10枚举类型
枚举类型是介于数组与对象之间的一种类型
我们可以像数组一样，通过索引值访问属性名称
我们可以像对象一样，通过属性名称访问索引值
枚举类型通过enum关键字定义
语法 enum 数据 {
定义枚举个体
}
注意
1 枚举数据变量首字母大写
2 我们可以为枚举个体定义索引值，此时前面的成员索引值不变，后面成员索引值递增
1 // 定义数据
2 // let arr:[number, string];
3 let arr:[number, string, boolean];
4 // 为arr赋值
5 // arr = [100, 'red'];
6 arr = [100, 'red', false];
7 // 颠倒位置
8 // arr = ['red', 100];
9 // 添加新的成员数据
10 arr[5] = 200;
11 arr[4] = 'green';
12 arr[3] = true;
13 // 不能添加不在元组中的类型数据
14 // arr[6] = [];
15 // console.log(arr)
16
17 // 定义一个字符串
18 let str:string = 'hello';
19 // let str:number = 200;
20
21 // 获取字符串的长度
22 let strLen:number = (<string>str).length;
23 // 第二种语法
24 // let strLen:number = (str as string).length;
25
26 // console.log(strLen)
27
28 // 定义枚举类型
29 enum Color {
30 red,
31 green = 10,
32 blue
33 }
34
35 // 可以像数组一样使用
36 console.log(Color[0])
37 console.log(Color[1])
38 console.log(Color[2])
39 // 可以像对象一样使用
40 console.log(Color.red)
41 console.log(Color.green)
42 console.log(Color.blue)
1.11函数
在js中，函数有三种定义形式：函数定义式，函数表达式，构造函数式
当我们用函数定义式定义函数的时候，在函数中的哪些位置会出现数据？
函数的参数以及函数的返回值会出现数据，所以我们要通过数据类型来约束他们
函数定义类型的语法
function demo(arg1:type1, arg2:type2):type {}
对于函数来说，执行完毕可能有结果，可能没有结果
函数有结果，肯定是基本类型之一，我们可以定义
函数没有结果，我们就要约束为void类型
函数抛出错误，永远不会执行完毕，我们要约束成never
使用函数的时候的说明
1 为函数传递的参数类型，一定要与定义时函数参数类型一致
2 为函数传递的参数的个数，一定要与定义时函数参数的个数一致
3 如果函数的参数是可有可无的，我们可以在定义函数参数的时候，在参数后面添加?
1.12泛型
也叫泛类型，在表达式前后，让变量的类型必须一致，我们可以使用泛型
有的时候，我们输入一种数据类型，但是得到了另外一种数据类型，我们未来让输入与输出的类型统一，我们可以使用泛型
语法是：<类型>
使用泛型函数
使用泛型函数的时候，有两种方式
一种是在使用前指明类型
ickt<string>(‘hello’)
一种是省略类型，让ts猜测(工作中常用)
ickt(‘hello’)
1.13联合类型
我们通过|定义联合类型
数据可以是联合类型中的任意一种类型
1 // 定义函数
2 // 参数可有可无，添加问号
3 function add(num1:number, num2?:number):number {
4 // 如果不存在第二个参数
5 if (num2 === undefined) {
6 return num1 + 10;
7 }
8 return num1 + num2;
9 }
10
11 // 使用函数
12 // 个数不统一
13 console.log(add(10, 20, 30))
14 // 参数类型不对
15 console.log(add(10, '20'))
16 console.log(add(10, 20))
17 // 第二个参数可有可无
18 console.log(add(10))
19
20 // 没有返回值定义成void
21 function say():void {
22 console.log('say fn')
23 }
24 say();
25 function errFn():never {
26 console.log('before error')
27 throw new Error('find a error');
28 console.log('after error')
29 }
30 // 执行函数
31 errFn();
32
33 // 定义函数
34 function ickt(arg:any):any {
35 return 'hello ' + arg;
36 }
37 // 使用函数
38 // 输入的是字符串，得到的也是字符串
39 console.log(ickt('爱创课堂'), typeof ickt('爱创课堂'))
40 // 输入的是数字，得到的确是字符串
41 console.log(ickt(100), typeof ickt(100))
42
43 // 我们可以定义泛型，解决上述问题
44 function ickt<T>(arg:T):T {
45 return arg;
46 }
47
48 console.log(ickt('爱创课堂'), typeof ickt('爱创课堂'))
49 console.log(ickt(100), typeof ickt(100))
50 console.log(ickt<number>(100), typeof ickt<number>(100))
51
52 // 联合类型
53 function ickt(arg1:number, arg2?:number):number|string {
54 if (arg2) {
55 return arg1 + arg2;
56 }
57 return 'hello ' + arg1;
58 }
59 console.log(ickt(100, 200))
60 console.log(ickt(100))
1.14类
跟es6一样，我们也通过class关键定义类
class 类名 {}
1.14.1构造函数
我们constructor定义构造函数
构造函数中如果出现了参数，就要定义参数的类型
构造函数是没有返回值的，因此我们不能为构造函数定义返回值（构造函数是唯一一个不需要定义返回值的函数）
如果构造函数的参数可有可无，我们在参数后面添加?
1.14.2属性
我们可以在类体中直接声明属性，并且要定义类型，没有声明类型，就会猜测类型
ts中为属性赋值有两种语法
第一种在构造函数外部，直接在声明属性的时候赋值
第二种在构造函数内部，为声明的属性赋值
即使在构造函数内部赋值，我们也要在构造函数外部声明
注意：参数的类型要与属性的类型相同
赋值的时候我们可以使用构造函数的参数，如果用构造函数的参数为属性赋值，此时就实现数据由类的外部流入类的内部存储
声明的属性，如果没有被赋值，编译的时候会移除
1.14.3方法
定义方法的语法跟es6一样
方法名称(arg: type):type {}
方法中的参数要定义类型
方法的返回值要定义类型
如果方法的参数是可有可无的，我们要添加?
1.14.4关键字
面向对面语言在定义类的时候，可以使用一些关键字，实现一些功能，例如static, public, private, protected等等，ts也都支持
但是ts要编译成js语言，在js中public, private, protected等关键字无法模拟，或者模拟成本很高，因此编译的时候忽略（很多框架用这些关键字实现了一些语法糖）
但是static关键定义的是静态属性和静态方法，js可以实现（就是对类添加），因此我们可以定义，就是在类的属性和方法前面，添加static关键字，就是静态的了，
静态的属性和方法，只能通过类来访问，实例化对象无法访问
注意：在类的外部为静态属性赋值，该静态属性也一定要在类的内部通过static关键字声明
**关注公众号“icketang”，获取最新前端资讯，学习资料
B战搜索“爱创课堂专业前端培训” 免费观看前端视频以及项目实战**