TypeScript开启

TypeScript是什么？

typescript是以JavaScript为基础构建的语言，是一个Javascript的超集，可以在任何支持JavaScript的平台中执行，typescript扩展了JavaScript，并添加了类型。
注意：ts不能被js直接解析执行，需要经过编译为js执行类似于less这种预处理语言。

typescript增加了什么？

保持js原有类型的同时新增加了一些类型。
支持es的新特性。
添加了es不具备的新特性。
丰富的配置选项。

配置typescript开发环境：

1.下载安装node.js
2.使用npm全局安装typescript
进入命令行。
输入命令：npm i -g typescript
3.创建一个ts文件
4.使用tsc对ts文件进行编译。
进入命令行。
进入ts文件所在目录。
执行命令：tsc xxx.ts。
执行完上述操作之后会产生一个同名的js文件。

ts的基本类型

类型声明：

类型声明式ts非常重要的一个特点。通过类型声明可以指定ts中变量（参数、形参）的类型。
指定类型后，当为变量赋值时。ts编译器会自动检查是否符合类型声明，符合则赋值，否则报错。简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值。
语法：

```typescript
let 变量:类型
let 变量:类型 = 值；
function fn(参数：类型,参数:类型):类型{
	...
}```

1
2
3
4
5
6
7
8

console.log('Hello Typescript');
//先声明后赋值
let a: number;   //a的类型设置为number,在以后的使用过程中a的值只能是数字
a = 10;
a = 33
// a = 'abc' // 此行代码会报错，因为变量a的类型是number，不能赋值字符串。

let b: string;
b = 'abc';
b = 'def';
// b = 1 //此行代码会报错，因为变量b的类型是string,不能赋值数字。



//声明完直接赋值
// let c: boolean = true;

//如果变量的声明和赋值时同时进行的，ts可以自动对变量进行类型检测，一旦赋值完成变量的类型就已经确定了。
let c = true;
c = false;


//js函数中的参数是不考虑类型和个数的
// function sum(a, b){
//   return a + b;
// }
// console.log(sum(123,456))  //579
// console.log(sum('123','456')) //'123456'


//ts中函数传参时可以规定参数的类型，函数返回值的类型，只是在编写代码的阶段会进行报错的提示，编译还是可以进行的。
function sum(a:number, b:number):number{
  return a + b;
}
console.log(sum(123,456))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

自动类型判断：

ts拥有自动的类型判断机制。
当对变量的声明和赋值时同时进行的，TS编译器会自动判断变量的类型。
所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

类型：

这里在使用ts里的变量的时候，产生一个问题，同一个文件夹下(其实不同文件夹下也会产生这样的问题)的t不同s文件怎么会产生重名问题，是因为在一个没有任何设置的普通项目中，vscode编辑器会把当前打开的 ts 文件当作一个整体的作用域进行验证。解决办法是使用命令tsc init 去初始化ts工程，生成一个配置文件tsconfig.json。该文件内部主要有如下内容：
Created a new tsconfig.json with:

target: es2016
module: commonjs //采取文件模块，会在当前文件中创建一个本地作用域
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true

类型使用实例如下：

//可以直接使用字面量来进行类型声明
let d: 10;

//可以使用 | 来连接多个类型(联合类型)
let e: 'male'| 'female';
e = 'female';
e = 'male';

let f: string | number;
f = 'abc';
f = 1

//any表示的是任意类型，当一个变量设置为any后相当于对该变量关闭了TS的类型检测。
//不建议使用any
//g的类型是any，它可以赋值给任意类型的变量
let g: any;  //显式any
// let g  //隐式any 即如果声明变量不指定类型，则ts解析器会自动判断变量的类型为any
g = 1;
g = 'abc';
g = true;

// unknown 表示未知类型的值  效果跟any是一样的
// unknow 实际上就是类型安全的any  该类型的变量不能直接赋值给其他变量
let h: unknown;
h = 1;
h = true;
h = 'abc';

let i:string;
// i = g;  //不报错
h = 'hello';
// i = h; //会报错  不能把uknow的值赋给h  
//改成这样则不会报错
// if(typeof h === 'string') {
//   i = h;
// }

// 类型断言 用来告诉解析器变量的实际类型
//语法：1.变量 as 类型
//      2.<类型>变量
i = h as string
i = <string> h

//void用来表示空,以函数为例，就表示没有返回值的函数
function fn():void {
  // return undefined;
  // return null;这两个返回值都为空。 或者只写或不写return都不会报错。
}

//never表示永远不会返回结果
function fn2():never {
  throw new Error("报错了");
}

//对象的类型声明
//object表示一个js对象  用的较少 js中一切皆对象 一般限制 我们是想限制对象里边包含有哪些属性
let j: object;
j = {};
j = function(){};
//{}用来指定对象中可以包含哪些属性
//语法：{属性名:属性值,属性名:属性值}
//在属性名后边加上?表示属性是可选的 否则必须包含这几个属性而且未指定的属性不能出现 否则会报错 
let k:{name: string,age?: 20};
k = {name: 'abc',age: 20}
//如果我们想要实现一个 一定包含name属性，其他属性随意的对象
// [propName:string]:any  表示任意类型的属性
let l:{name:string,[propName:string]:any}

l = {name:'zs',age:18,id:8888}


//这样写意义不大
// let m:Function;
//设置函数结构的类型声明
//语法：(形参:类型,形参:类型...)=>返回值
let m:(a:number,b:number)=>number
m = function(a1,a2){
  return a1 + a2
}

//数组的类型声明
//n:string[]表示一个字符串数组
let n:string[];

let o:number[]; //这个表示数值数组

let p:Array<string> //也表示字符型数组


// 元组：元组就是固定长度的数组
//语法：[类型,类型,类型]
let q:[string,number];
q = ['abc',123];

//enum枚举
enum Gender{
  male,
  female
}
let r: {name:string,sex:Gender}
r = {name:'LiHua',sex:Gender.male}

console.log(r.sex === Gender.male)


//&表示同时
let s:{name:string} & {age:number};  //s必须满足这两个对象


//类型的别名
type myType = string  //给string类型起个别名为mytype，但这样用没有意义，所以在下列情况，我们使用类型别名来简化代码
type myType1 = 1 | 2 | 3 | 4 | 5
let t: myType1;
let u: myType1;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

TS编译选项

（1）tsc xxx.ts -w
这里的w是watch的意思，输入这样的命令之后，会帮助我们监视该ts文件，当该文件内容发生变化之后，会帮助我们在一定的时间间隔之后自动编译ts文件。
（2）ts配置文件
tsconfig.json是js编译器的配置文件，ts编译器可以根据它的信息对ts文件进行编译。

{
// include用来指定哪些ts文件需要编译
  // exclude用来指定哪些ts文件不需要编译
  // **表示任意目录   *表示任意文件
  "include": [
    "./**/*"
  ],
  "exclude": [
    //默认值
    // "node_modules","bowser_components","jspm_packages"
  ],
  "extends": "./xxx.json", //定义被继承的配置文件
  "files": [] ,// 要编译哪些文件直接罗列出来即可
  "compilerOptions": {
  	"strict": false, //所有严格检查的总开关 所有严格检查可以在这里统一控制 
  	"target": "ES5",   //编译后的js版本
  	"module": "ES2015",  //编译后的模块化规范
    "lib": [], //指定项目中使用的库
	"outDir": "./dist",
	"ourFile":"",  //将代码合并为一个文件
	"allowJs": false, //是否对js文件进行编译 默认不编译
	"checkJs": true,  //是否检查js代码语法符合规范
    "removeComments": false, //是否移除注释
    "noEmit": false, //不生成编译后的文件
    "noEmitOnError": false,  //当有错误时，不生成编译文件
    "alwaysStrict": false,  //用来设置编译后的代码是否使用严格模式
    "noImplicitAny": true, //不允许隐式的any类型
    "noImplicitThis": true, //不允许不明确类型的this
    "strictNullChecks": true, //严格的检查空值
  },


 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33