TS环境搭建以及在VScode运行的超简洁详细的图文流程介绍

本文介绍: TS安装，开发环境的搭建，在VScode 运行的流程介绍

文章 目录

- node.js–>TS–>VScode

node.js–&g t;TS–>VScode

1.node.js的安装

下载

node.js下载网址

网站会自动判断系统，选择长期维护版即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VlN7TpAT-1679071351162)(Ts.assets1679039305779.png)]

安装

在这里插入图片描述

基本上无脑next即可，这里有两个地方可以注意

在这里插入图片描述

安装nod o.js的其他包，库

在这里插入图片描述

如果你勾选上了，那么安装完毕后，你会弹出命令窗口

在这里插入图片描述

按任意键继续，会出现蓝窗口，需要等下载百分比完毕后关掉即可

在这里插入图片描述

2.node.js的环境 配置

环境变量 配置

在这里插入图片描述

粘贴上面路径地址在环境变量–>系统变量–>path

在这里插入图片描述

验证安装，环境 配置

win+R打开命令行窗口，输入node -v (有空格注意 ) 显示版本号说明成功!

node -v

在这里插入图片描述

3.TS安装

上面是node.js的安装配置，下面开始TS安装

修改 默认 路径（有点麻烦，可省略这一步）

接着我们需要配置 npm安装全局模块时的存储路径和缓存路径，默认是安装在如图路径里，当然你也可以不修改，只要C盘够大

在这里插入图片描述

在你的node.js安装文件夹里新建两个文件夹：“node _global”和“node_cache”

在命令行输入:

npm config set prefix "D:Program Filesnodejsnode_global"

npm config set cache "D:Program Filesnodejsnode_cache"

注意:如果命令窗口爆红可能是文件夹权限不够，不能写入，需要对两个文件夹的安全权限如下修改

在这里插入图片描述

安装TS环境

全局安装Ts：打开命令窗口，输入:

npm install -g typescript 
（-g就是全局下载的意思）

在这里插入图片描述

出现以上提示说明安装TS环境成功，你也可以输入：tsc -v查看

在这里插入图片描述

TS是不能被直接执行的，必须要编译成JS

安装t sc 编译器：ts–node 并不等于 ts的Nod e.js,仅仅封装了t s 编译的过程，提供直接运行 t s 代码的能力
```
npm install ts-node -g
```
尝试运行(编译 t s 文件成为 js 文件)：

在这里插入图片描述

tsc xxx.ts

在这里插入图片描述

到这说明安装TS以及tsc 编译器成功，下面将讲解如何在vscode上使用TS

4.VSco d e下使用TS

打开VSc o d e–>新建项目文件夹–>创建 hello.ts 文件

在这里插入图片描述

按 crtl+` 打开 vscode的终端，编译ts
如果每次都要tsc去编译一下太麻烦了，按下Ctrl+shift+B 快捷键会进行编译，初次编译会选择编译模式

如果想要自定义额外的配置，可以在根目录下创建 tsconfig.json 文件

在这里插入图片描述

可粘贴以下配置

{
  "compilerOptions": {
    "watch":true,                 //自动检测源文件的修改并编译代码
    "module": "commonjs",        // 生成代码的模板标准
    "target": "es6",             // 目标语言的版本，现在基本都是ES6
    "noImplicitAny": true,       // 不允许隐式的any类型
    "outDir": "./dist",          // 指定输出目录
    "removeComments": true,     /* 禁用发出注释，从而减少js文件的体积 */
    "noUnusedLocals": true,     /* 在未读取局部变量时，变量未声明类型启用错误报告,让编译器做更严格的验证 */
    "strictNullChecks": true,   /* 当类型检查时，考虑“null”和“undefined”*/
  }
}