前言
我们前两篇介绍了TypeScript开发环境的配置，但是这个配置相对来说比较繁琐，更适合用它来做前端开发的，而对于我们只是为了为学习ArkTS做准备来说，其实并不需要如此复杂的配置文件。
今天就和我一起看看如何简单高效的配置好TS的学习环境。
必备软件
- NodeJS：这里我们就不重复介绍了，这个是通用的。
- VSCode：这个是我们用来写TS代码的主要工具，建议大家和我保持一致，因为我们会用到一些它的插件来方便我们开发。
- 浏览器：建议使用Edge。
TS环境配置
在安装好NodeJS的前提下，我们打开VSCode并进入我们的项目目录下并打开Terminal或者使用一个命令行工具，输入下面命令进行TS的安装（如果之前用这个命令安装过了，可以忽略。）
npm install typescript -G
然后运行以下命令查看TS的版本
tsc -V
VSCode的插件
Prettier Formatter: 用来格式划代码
打开VSCode的设置ctrl(command) + shift + p加入以下配置
| "[typescript]": { | |
| "editor.defaultFormatter": "esbenp.prettier-vscode" | |
| }, | |
| "editor.formatOnSave": true, |
Live Server插件，它可以让我们在本地启动一个服务器，可以运行我们写好的html文件
TS的编译设置
我们在自己的项目目录下输入以下内容，生成一个默认配置文件
tsc --init
这里的默认设置我们并不是全部需要的，我们只需要设置如下几个。
| { | |
| "compilerOptions": { | |
| "target": "es2016", | |
| "module": "commonjs", | |
| "rootDir": "./src", | |
| "outDir": "./dist", | |
| "removeComments": true, | |
| "noEmitOnError": true, | |
| "esModuleInterop": true, | |
| "forceConsistentCasingInFileNames": true, | |
| "strict": true, | |
| "skipLibCheck": true | |
| } | |
| } |
这个配置主要设置我们的工作根目录"rootDir": "./src",以及编译好的目录"outDir": "./dist",
其他设置从名称就能知道是什么作用的，这里就不过多介绍了。
在实际工作时需要提前创建好这两个文件夹。
我们运行一个基础演示
我们在src目录下新建一个demo.ts的文件。
然后运行以下命令，该命令的作用是监控我们文件的变化
tsc -W
我们会发现在dist目录下新生成了一个js文件
我们新建一个html文件，和之前一样引用我们的js文件。
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| </body> | |
| <script src="./demo.js"></script> | |
| </html> |
我们点击一个右下角的按钮启动我们之前安装的live server插件
我们可以看到，刚刚新建的html
为了更好的体验变成我建议大家和我一样设置一下分屏
我们后期关注的只是控制台的的内容。
比如我们现在在ts文件中输入一下内容
| const name_str: string = "Tango"; | |
| console.log(name_str); |
当我们保存时即可及时的看到输出结果
结尾
我们今天介绍了一个更适合用来学习的配置环境的方法，后面我们会基于这个环境一起学习一下TS的基础语法。
我是Tango，一个热爱分享技术的程序猿，我们下期见。