?更适合学习TypeScript基础知识的环境配置
原创?更适合学习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，一个热爱分享技术的程序猿，我们下期见。
我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。