1. TypeScript 简介
烦
教程地址
教程资源：https://ts.xcatliu.com/introduction/what-is-typescript.html#link-1
中文官网：https://www.typescriptlang.org/
TypeScript 特点
- JS的超集
- 包含JS的所有元素
- 能够运行 JS 代码
- 支持 ES 语法
- 是一种开源、跨平台的编程语言
- 编译器编译为 JS 代码，JS 解析器执行
- 完全兼容 JS 代码
- 静态检查器
- 静态类型，更加严格的语法
- 减少运行时异常出现的概率
- 方便后期维护
安装
TypeScript 安装步骤很简单，只需要下面这个简单的命令全局安装一下即可：
npm install -g typescript
执行完后，只需要等待安装完成。
安装完成后，可以通过下面命令检测一下是否安装成功：
tsc -V
如果出现版本号信息，则说明安装成功了。
编写 TS 代码
创建一个 TS 文件。
后缀是 ts 不是 js 了。
注意，TS 不是 JS，但是可以包含任何的 JS 代码的。 首先编写一个代码：
(() => {
function sayHi(str: String) {
return "你好，" + str;
}
})()
上面代码是一个自函数，自己直接调用，里面有一个方法 sayHi，传递了一个参数 str ，后面跟了一个 : String，意思是，这个 str 参数，规定了必须是 String 类型。
接下来，我们调用一下这个方法：
(() => {
function sayHi(str: String) {
return "你好，" + str;
}
sayHi()
})()
看下面截图，报错了，实时的哟，告诉我们需要传递一个参数进来：
那我们传递一个 123 数字进去。
发现也是报错的，因为他说不能把数字类型赋值给字符串类型，因为我们在最开始传参的时候，规定了参数必须是字符串类型。所以换一下试试。
好的，不报错了。所以，TS 对我们的字符串类型进行了简单的校验，方便我们在开发过程中更快的纠错，防止开发错误。
编译
好的，上面我们 TS 代码已经编写好了，我们需要执行一下，但是这是 TS 代码，不能直接运行，我们需要首先把我们编译的代码编译成 JS 代码。
编译有两种方法，一种是手动编译，一种是 vscode 自动编译。
手动编译
因为浏览器只认识 js 代码，所以我们需要把 ts 代码编译成 js 代码。
我们通过下面的命令执行这个操作：
tsc 文件名
我们在终端执行这个命令：
执行后可能稍微需要等下，等他编译完成。
编译完成我们可以看到哈，出现了一个同名的 js 文件，这个文件点进去看一下，就会发现，是我们 ts 文件编译后的 js 文件了。
好的，编译完成之后，我们就可以创建一个 html 文件之后引入使用了，就和之前的用法一样就可以了。
vscode 自动编译
上面手动编译是可以实现将 ts 代码转为 js 代码的，但是开发过程中总归是比较麻烦的，因为有一点修改，都需要我们自己重新在编译一边才可以看到效果，所以现在说一下vscode 自动编译。
如果想实现自动编译，我们需要通过一个命令生成一个配置文件：
tsc --init
终端执行这个命令：
稍微等一下，让他生成配置文件。
生成之后发现在目录又多了一个 json 配置文件。
生成这个文件怎么使用呢？我们点进去很多配置，先不用管，我们先改两个地方：
首先是 outDir ，表示 ts 文件最终编译为 js 文件的存放路径，我们解开注释，然后修改一下：
让他保存在当前路径的 js 文件夹下，统一放在一起。当然在当前文件夹下要创建一个 js 文件哈。
第二一个地方，继续往下找一个严格模式，先把他关了。
暂时关闭，学习嘛，暂时关了。
修改保存完成，我们可以回到 ts 文件去，设置 vscode 自动编译。
然后步骤是： 点击“终端”， 点击“运行任务”，点击“显示所有任务”，点击“tsc:监视 - tsconfig.json”。
这样之后，他就会监听我们文件的变化，然后编译成 js 文件，执行完成之后其实我们 js 文件夹 下已经编译好一个 js 文件了。
这样配置之后，我们后期修改了文件内容并且保存后，不需要在手动编辑，vscode 会自动帮助我们实时的实现编译操作。
总结
