更适合学习TypeScript基础知识的环境配置

前言

我们前两篇介绍了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文件。

<!DOCTYPE html>
<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，一个热爱分享技术的程序猿，我们下期见。