一、TypeScript介绍
1.TypeScript是由微软开发的一款开源的编程语言。
2.TypeScript是JavaScript的超集，遵循最新的ES6、ES5规范。TypeScript扩展了JavaScript的语法。
3.TypeScript更像后端java、C#面向对象语言。
4.最新的Vue、React也可以集成TypeScript。
5.Nodejs框架Nestjs、midway中用的就是TypeScript语法。
TypeScript相比JS的优势
· 优势一：类型化思维方式，使开发更加严谨，提前发现错误，减少改bug时间
· 优势二：类型系统提高了代码可读性，并使维护和重构代码更加容易
· 优势三：补充了接口、枚举等开发大型应用时JS缺失的功能
配置 typeScript+nodejs 和 react+typeScript 开发环境
1.安装nodejs(中文文档 http://nodejs.cn，node --version查看版本)
运行TS/JS代码的工具：Node.js
JavaScript的运行环境：浏览器、Node.js
Node.js让JavaScript摆脱了浏览器的束缚，可以实现服务端/桌面端编程等等。
2.npm(安装好node时就安装好了npm， npm -v查看是否安装成功)
3.typescript (终端命令，输入 cnpm install -g typescript 或者 yarn global add typescript，输入 tsc -v 查看是否安装成功）
VSCode中搭建typeScript+nodejs开发环境
1.新建一个空文件夹
2.使用VSCode打开文件夹
3.生成package.json 文件
npm init -y
VSCode生成自动编译.ts文件
4.创建tsconfig.json文件
tsc --init 生成配置文件
负责奖ts代dccg转为浏览器和nodejs识别的js代码
5.打开tsconfig.json文件，把其中的 “outDir" 和 ”rootDir“ 的注释打开，然后分别把后面的内容修改成 " ./out " 和 " ./src "，然后就要在左边的文件栏中创建这两个文件（out表示输出文件目录和src表示写代码的资源文件目录）
6.在src下创建一个index.ts文件， 同时会在out文件夹下生成index.js文件
7.运行index.ts的代码，需要修改 package.json 文件中的 "scripts"
修改前：
修改后：
因为修改了 outDir 使得生成的 Index.js 文件放在了定义的文件夹中，那么要编译 typeScript 的代码，实际上就是要编译它的 js 代码文件，所以这里也需要做相应的修改，否则运行报错
8.运行
npm start
搭建 react + typeScript 开发环境
create-react-app react_typescript --typescript
创建成功，再输入终端命令： cd react_typescript
运行：yarn start
TypeScript
1.编译型语言
2.强类型语言
3.真正面向对象的语言
变量
变量：是用来存储数据的容器，并且是可以变化的，为变量指定了类型就只能给这个变量设置相同类型的值
命名规则：变量只能出现：数字、字母、下划线、$，并且不能以数字开头。变量名称区分大小区
基本使用
let age: number = 18
let name: String = 'name'
var的作用域是函数作用域，在内层循环中和外层循环中使用的是同一个变量，在内层的修改会改变外层。
let的作用域是块级作用域，在内层循环中的变量和外层循环中的变量不是同一个变量，在内层的修改不会改变外层。
var：可以声明同名变量，只会得到一个变量，let一个变量只能声明一次
var age = 17; var age = 18; // 不会报错
let age = 0; let age = 1; // 报错
const：定义的是常量，声明的的变量不能被重复赋值，const声明变量是必须立刻赋值；const声明的对象，对象本身是不能被赋值覆盖，但是对象的可修改属性是允许被修改值的
const num: Number = 10;
const info = {
name: 'name',
age: num,
}
info.name = 'na'
info.age = 20
console.log(info);
// { name: 'na', age: 20 }
数据类型
TypeScript中的数据类型分为两大类：原始类型(基本数据类型)、对象类型(复杂数据类型)
常用基本数据类型：number、string、boolean、undefined、null。
基本数据类型
数字类型
数字类型：包含整数和浮点型, 用number表示.
let age: number = 18 // 整数
let score: number = 18.8 // 浮点型
字符串类型
字符串：使用string表示文本数据类型。可以使用(" ")或者(' ')表示字符串
let age: number = 18
let name: sting = '姓名'
console.log( name + `${age}`)
// 姓名18
console.log(name+age) // 加号两边只要有一边是字符串，就执行字符串拼接
// // 姓名18
布尔型
最基本的数据类型就是简单的true/false值，不能用0和1代表
关键字： boolean
let is: boolean = true
数组
数组：是用于存放多个数据的集合。需要声明时指定数组中元素的类型，多个元素之间使用( , )分隔， 数组中的每一项内容称为元素
创建数组
// [](中括号)表示数组。如果数组中没有内容，就是一个空数组
1. [](中括号)表示数组
let 数组名: 元素类型[] = [ 元素1, 元素2, 元素3, ... ]
let list: string[] = []
2. 使用数组泛型表示，Array<元素类型>=[ 元素1, 元素2, 元素3, ... ]：
let list: Array<number> = [1, 2, 3]
3. new Array()
let list: number[] = new Array(1, 2, 3) // 创建一个数组
console.log(list) // [ 1, 2, 3 ]
4.用any类型创建数组
var arr: any[] = ['12345', 2345, true]
// 数组长度
console.log(list.length) // 3
// 修改元素，下标存在表示修改
list[1] = 5
console.log(list) // [ 1, 5, 3 ]
// 添加元素，下标不存在表示添加
list[3] = 5
遍历数组
for (let i = 0; i < list.length; i++) {
console.log(list[i])
}
// 1
// 5
// 3
// 5
· push()方法将一个或多个元素添加到数组的未尾，并返回该数组的长度
let num: number[] = [1, 3, 5]
num.push(7, 9)
console.log(num)
// [ 1, 3, 5, 7, 9 ]
let len = num.push()
console.log(len)
// 5
· forEach
forEach方法的参数是一个函数，这种函数也称为回调函数，是作为forEeach方法的实参传入，不需要指定类型注解
forEach方法的执行过程: 遍历整个数组，为数组的每一项元素，调用一次回调函数，无法中间停止
let num: number[] = [1, 3, 5, 7]
num.forEach(function(item, index){
console.log(item, index)
})
// 1 0
// 3 1
// 5 2
// 7 3
some方法：遍历数组，查找是否有一个满足条件的元素(如果有，就可以停止循环)
循环特点：根据回调函数的返回值，决定是否停止循环，如果返回true，就停止；返回false就继续循环
let num: number[] = [1, 12, 9, 8, 6]
num.some(function(num){
console.log(num)
if (num > 10) {
return true
}
})
// 1
// 12
元组(Tuple)
元组属于数组的一种，就是固定长度的数组，合并了不同类型的对象，规定了元素数量和每个元素类型的数组，声明时要指完元素个数为每个元素规定类型，元素的类型和值必须一一对应。
语法：[数据类型, 数据类型, 数据类型, ... ]
let tuple: [string, number, boolean] = ['tuple', 20, false];
console.log( tuple);
// [ 'tuple', 20, false ]
console.log( tuple[1]);
// 20
修改元组
tuple[1] = 10
console.log(tuple)
// [ 'tuple', 10 ]
在声明一个元组时，可以在元素类型后缀一个问号 ？ 来说明元素是可选的，可选元素类型必须在必选元素类型后面，如果一个元素类型后面后缀了一个问号 ？，那么这个元素之后的所有元素类型都要后缀一个问号。
let tup1: [string, number?, number?]
tup1 = ['tup']
tup1 = ['tup', 1]
tup1 = ['tup', 1, 3]
使用 push() 方法向这个元组中添加新的元素
let tup2: [string, number, number] = ['tup2', 2, 3]
tup2.push('tup')
console.log(tup2);
// [ 'tup2', 2, 3, 'tup' ]
使用 pop() 方法删除元组中最后一个元素
let tup3: [string, number, number] = ['tup2', 2, 3]
tup3.pop()
console.log(tup3);
// [ 'tup2', 2 ]
解构元组
let tup3: [string, number, boolean] = ['tup3', 2, true]
let [a, b, c] = tup3
console.log(a);
console.log(b);
console.log(c);
// tup3
// 2
// true
枚举
枚举是组织有关联数据的一种方式，枚举使用 enum 关键词来声明一个枚举
使用场景：当变量的值只能是几个固定值中的一个，应该使用枚举来实现
数字枚举，声明了一个枚举成员均不带初始化值的枚举，枚举的成员值从 0 开始，依次递增；声明带初始化值的枚举，枚举的成员值是在上一个成员的基础上 +1；
· 枚举的特点
数字枚举经过编译之后会生成 lookup table (反向映射表)，即除了生成键值对的集合，还会生成值键对的集合。
字符串枚举没有自增行为，必须为每一个成员赋值
枚举成员是只读的，只可以访问，不能赋值
创建枚举的语法:
enum 枚举名称 { 成员1, 成员2, 成员3, ... }
enum enumTS {
ts1,
ts2 = 10,
ts3,
ts4 = 'ts4',
ts5 = 'ts5',
}
console.log(enumTS);
// {
// '0': 'ts1',
// '10': 'ts2',
// '11': 'ts3',
// ts1: 0,
// ts2: 10,
// ts3: 11,
// ts4: 'ts4',
// ts5: 'ts5'
// }
console.log(enumTS.ts2);
// 10
Any
Any: 任意类型可以是 Number String Boolean Object ... 等等 JS 中存在的类型，一个变量设置为any类型后相当于对该变量关闭了TS的类型检测
声明变量如果不指定类型，TS会根据最后一次给变量赋值判断变量的类型，变量不赋值会自动判断变量的类型为any，any类型只能赋值给unknown类型
let any: any = 2
any = 'any'
console.log(any);
// any
let anyList: any[] = [1, '2', true, false]
console.log(anyList);
// [ 1, '2', true, false ]
unknown
unknown表示未知类型的值，实际上是一个类型安全的any
unknown类型的变量，不能直接赋值给其他变量，只能赋值给any类型
let u: unknown
u = 10
u = true
u = 'any'
let a
a = u
Void
void 表示空，是 undefined 的子类型，表示没有类型，一般用于表示没有返回值的函数。
// 表示方法没有返回任何类型
function say(): void {
console.log('没有返回值')
}
say()
// 没有返回值
undefined、null 是never数据类型的子类型
· 共同点：只有一个值，值为类型本身(为其它值报错)。
· undefined：表示声明但未赋值的变量值(找不到值)
· null：表示声明了变量并已赋值，值为null(能找到，值就是null)
var num: number
console.log(num) // 会报错(在赋值前使用了变量“num”)
var num: undefined
console.log(num) // 不会报错
定义没有赋值就是undefined
var num: number | undefined
console.log(num) // 不会报错
let u: undefined = undefined
let n: null = null
console.log(u, n)
// undefined null
let u: undefined
console.log(u)
// undefined
never
never代表不存在的值的类型，常用作抛出异常或无限循环的函数返回类型
never类型是ts中的底部类型，所有类型都是never类型的父类，never类型的值可以赋给任意类型的变量
function nev(): never{
while(true) {
console.log('死循环')
}
}
function nev(): never{
throw new Error('错误')
}
Object
Object：表示任意的js对象
let a: object
a = {};
a = function() {
}
// {} 用来指定对象中可以包含的属性
// 语法:{ 属性名: 属性值, 属性名: 属性值, 属性名: 属性值, ... }
// 在属性的后边加上?，表示属性是可选的
let b: { name: string, age?: number}
b = { name: 'name'}
let c: { name: string, [info: string]: any }
c = { name: '1345', age: 10, sex: 12 }
类型别名
简化类型的使用
type type = 1 | 2 | 3 | 4 | 5
let k: type
let l: type
k = 1
联合类型
表示取值可以为多种类型中的一种
let 变量名: 变量类型1 | 变量类型2 | 变量类型3 = 值;
