TypeScript 保姆级教程，再也不用担心学不会啦

什么是 TypeScript？

TypeScript，简称 ts，是微软开发的一种静态的编程语言，它是 JavaScript 的超集。
那么它有什么特别之处呢?

1. 简单来说，js 有的 ts 都有，所有js 代码都可以在 ts 里面运行。
2. ts 支持类型支持，ts = type +JavaScript。

那么 ts 和 js 有什么区别呢？

1. JavaScript 属于动态编程语言，而ts 属于静态编程语言。
   • js：边解释边执行，错误只有在运行的时候才能发现
   • ts：先编译再执行，在写的时候就会发现错误了（ts不能直接执行，需要先编译成 js ）
2. ts 完全支持 js ，可以直接转换
   
3. ts 有类型支持，有强大的代码类型提示

相信大家现在对 ts 有一个基本的了解了，那么它应该怎么使用呢？
首先先做一些简单的准备工作：

1. 下载一个全局的包

npm i  -g  typescript
或者
yarn  global add  typescript

2. 打开cmd 输入命令 tsc -v 查看包是否下载成功
   
   当 cmd 输入指令出现版本号，就说明下载成功啦
3. 首先打开 vscode， 新建一个 .ts文件。如 hello.ts
   

接下来就可以书写 ts 的代码啦！

1. 新建文件，如 hello.ts。（ts文件的后缀名都是 .ts哦）
2. 书写代码
3. 编译代码：在终端输入 tsc ./hello.ts, 会自动生成一个js 文件，接下来就可以用 node 命名来运行js 的文件，在浏览器打开看效果啦

如果不想下载包的话，也可以在线运行，链接如下：
在线运行
接下来了解一下 ts 的类型注解

什么是类型注解？

就是给变量添加类型约束，可以显示标记出代码中的意外行为，从而降低了发生错误的可能性
语法：

let 变量名: 类型 = 初始值
let age: number = 18

这样写有啥好处捏？更好的规定了数据的类型，避免了不必要的错误。
如果你不小心写错了，他会直接提示你类型错误哦。是不是很贴心呢?

代码中的 : number 就是类型注解。

注：这里的代码错误提示，我是下载了一个插件才有的。如果大家也想有提示的话，可以在 vscode 里面下载。我把插件的截图贴在下面。

ts 的类型

ts 的常用基础类型分为两种：
js 已有类型

1. 原始类型：number/string/boolean/null/undefined/symbol
2. 对象类型：object（包括，数组、对象、函数等对象）

ts 新增类型

1. 联合类型
2. 自定义类型(类型别名)
3. 接口
4. 元组
5. 字面量类型
6. 枚举
7. void
8. any
9. 等等

原始类型：
number/string/boolean/null/undefined/symbol
语法比较简单，基本和 js 差别不大

// 数值类型
let age: number = 18

// 字符串类型
let myName: string = '小花'

// 布尔类型
let isLoading: boolean = false

// undefined
let un: undefined = undefined

// null
let timer:null = null

// symbol
let uniKey:symbol = Symbol()

类型推论
在 TS 中，某些没有明确指定类型的情况下，TS 的类型推论机制会自动提供类型。好处：由于类型推论的存在，有些情况下的类型注解可以省略不写
有如下两种场景：

1. 声明变量并初始化时
   

2. 决定函数返回值时
   
   已知函数的两个参数都是number类型，那么该函数的返回值也是 number 类型。

联合类型：

需求：如何定义一个变量可以是null也可以是 number 类型?
这个时候，前面所学的已经不能满足我们的需求了，就需要用到一个新的类型 - 组合类型。
语法：

let 变量: 类型1 | 类型2 | 类型3 .... = 初始值
let arr1 :number | string = 1 // 可以写两个类型

注意： 这里的 | 竖线，在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种。不要和 js 中的 || 搞混哦。
应用场景：
定时器id

// | 联合类型  变量可以是两种类型之一
let timer:number|null = null
timer = setTimeout()

类型别名

在我们定义类型的时候，有时候自己定义的类型名往往很长，这个时候就需要在定义个别名，方便书写。
语法：

type 别名 = 类型

type s = string // 定义

const str1:s = 'abc'
const str2:string = 'abc'

作用：

1. 给类型起别名
2. 定义了新类型

使用场景：给复杂的类型起个别名

 type NewType = string | number

 let a: NewType = 1
 let b