ts 准备工作，及自动编译

查询typescript版本 ↓(两种方式)

①

②

因为浏览器无法直接解析ts文件，需要先将.ts文件编译成.js文件。

可以手动编译，也可以直接在编辑器内进行自动编译的设置。

在ts文件的上级目录下，小黑窗输入 ↓

接着对vscode进行设置 ↓ 终端 -->运行任务 -->tsc:监视

tada~~

准备工作已经做好，vscode也可自动编译啦~

搭建环境 - 安装 node.js

安装 typeScript

创建程序文件

.ts 文件类似于js文件

.tsx 文件提供的另一种文件类型 可以书写 JSX语法

编译

tsc [要编译的文件] --outFile [编译后保存文件]

直接命令行运行 ts 文件

1. tsc --init 创建tsconfig.json

2. 修改tsconfig.json文件，设置js文件输出路径 "outDir":"./js"

3. 设置vscode 监视任务

选择 监视 tsconfig.json，保存ts文件之后，vscode就会帮我们自动编译js

webpack结合ts使用

1.初始化webpack， npm init -y 生成package.json 文件

自己加一个打包命令 "build": "webpack"

2.安装开发依赖 npm i -D webpack webpack-cli typescript ts-loader

3.自己创建配置文件webpack.config.js

4.创建tsconfig配置文件，这个相关配置在上个文章中已经介绍过了，我们只简单选择三项，开启严格模式。

5.都配置好以后，再编译ts 就可以直接使用 npm run bulid 去编译了。

以上就是最简单的webpack打造的ts开发编译环境。

---