简述

TypeScript是微软推出的一门语言

TypeScript是JavaScript的超集（说明在TS中可以使用所有的JS语法）

新增了类型系统和完整的面向对象语法

使用TS编写的项目更加健硕，且容易拓展和维护

TS基础

TS的环境安装

TS文件需要先转换为JS文件才能交给浏览器运行，类似于LESS==>CSS

全局安装TS：

npm install -g typescript

校验TS：

tsc -v

tsc作用：

负责将ts代码转换为浏览器和nodejs识别的js代码

TS的运行

在后缀名为.ts的文件中书写typescript代码
使用tsc将TS代码编译为JS代码
```
tsc TS文件路径
```
在浏览器或者nodejs中执行js代码

TS的自动编译

自动编译：就是省去程序员敲击命令编译文件，由工具来自动完成。

设置VSCode自动编译

运行tsc --init，创建tsconfig.json文件
修改tsconfig.json文件，设置js文件夹："outDir": "./js/"
设置VSCode监视任务：

终端 ==> 运行任务 ==> tsc监视 - tsconfig.json

TS的变量

变量的声明：

let 变量名: 变量类型 = 值

在TS中，为变量指定类型，就只能给这个变量设置相同类型的值。否则就会报错。

TS的数据类型

原有数据类型：

string：字符串

单引号，双引号，反引号表示字符串类型
number：数组

小数，整数，负数
boolean：布尔类型

true和false

注意点：ts中的布尔值不能用1和0去代替
underfined
null
Array：数组

声明时需要指定数组中的元素类型

语法一：let 数组名: 类型[] = [值1，值2]
```
let arrHeros: string[] = ['刘备', '关羽', '张飞']
```
语法二：let 数组名: Array<类型> = [值1，值2]
```
let arrHeros: Array<string> = ['刘备', '关羽', '张飞']
```
特点：元素类型固定，长度不限制
Symbol：标识
Object：对象

新增类型：

tuple：元组

概念：

一个规定了元素数目和每个元素类型的数组

而每个元素的类型可以不相同。

语法：

let 元组名: [类型1，类型2，类型3] = [值1，值2，值3]
```
let tup: [string, number, boolean] = ['讨厌', 18, false]
```
为什么需要元组：

TS中数组元素类型必须保持一致，如果需要不同的元素，就需要使用元组了。

特点：

声明时，要指定元素个数

声明时，要为每个元素指定类型
enum：枚举

声明：
```
enum 枚举名{
  枚举项1 = 枚举值1,
  枚举项2 = 枚举值2
  ...
}
```
枚举项一般使用的是英文和数字，而枚举值一般使用整形数字。

而且枚举值是可以省略的
```
enum 枚举名{
  枚举项1,
  枚举项2
  ...
}
```
此时编译器会自动为他添加枚举值，不过自动添加的枚举值是从0开始的。
any：任意类型

概念：

any代表任意类型，一般在获取dom时使用

我们在接收用户输入或者第三方代码库时，不确定返回什么类型的值，此时可以使用any类型
never：不存在的值的类型

概念：

never表示不存在的值的类型，常用作为抛出异常或者无限循环的函数返回类型。

补充：

never类型是ts中的底部类型，所有类型都是never类型的父类。

所以never类型值可以赋值给任意类型的变量。
void：函数的无返回值类型

概念：void表示没有类型，一般用在没有返回值的函数

TS的类型推断

概念：如果变量的声明和初始化在同一行，可以省略变量类型的声明。因为此时TS会进行类型推断，根据你的值来推断你的变量的数据类型。

TS的联合类型

概念：表示取值可以为多种类型的其中一种。

语法：let 变量名: 变量类型1|变量类型2 = 值

let name: string|null = prompt('请输入小狗的名字')

TS的函数

函数的返回和参数

函数返回值类型

function 函数名():返回值类型 {}
let 变量名 = 函数名()

如果函数没有返回值则定义为void

函数形参类型

function 函数名(形参1:类型, 形参2:类型):返回值类型 {}
let 变量名:变量类型 = 函数名(实参1, 实参2)

特点

实参和形参类型要一致

实参和形参数目要一致

函数的可选参数

函数可选参数

function 函数名(形参?: 类型):返回值类型 {}

调用

可以不进行实参的传递函数名()

可以传递实参函数名(实参值)

函数参数的默认值

函数默认值（带默认值的参数本身也是可选参数）

function 函数名(形参:类型=默认值, 形参:类型=默认值):返回值类型 {}

调用

不传递实参 函数名() => 函数名(默认值1, 默认值2)

传递一个实参 函数名(实参) => 函数名(实参1, 默认值2)

传递两个实参 函数名(实参1, 实参2) => 函数名(实参1,实参2)

只传第二个实参 函数名(underfined, 实参2) => 函数名(默认值1,实参2)

函数参数的剩余参数

语法

function add (形参1:类型, 形参2:类型,...形参3:类型[]):void {}

特点

剩余参数只能定义一个

剩余参数只能定义为数组
调用

传递 函数名(1,2,3,4,5,6)

类

类 - 批量创建对象

创建对象（构造函数 + new）

function City(cName, cLevel) {
	this.cname = cName;
  this.clevel = cLevel
}
City.prototype.about = function () {
	console.log(`这里是${this.cname}`)
}

创建对象（类class - TS）

class City {
  // 定义成员
  cname:string;
	clevel:number;
  // 构造函数，进行初始化
  constructor(cName:string, cLevel:number) {
    this.cname = cName;
    this.clevel = cLevel;
  }
  // 成员方法，定义在类中
  about() {
    console.log(`这里是${this.cname}`)
  }
}

初识TypeScript

简述