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

文章目录

- node.js-->TS-->VScode
- - 1.node.js的安装
  - - - 下载
      - 安装
  - 2.node.js的环境配置
  - - - 环境变量配置
      - 验证安装，环境配置
  - 3.TS安装
  - - - 修改默认路径（有点麻烦，可省略这一步）
      - 安装TS环境
  - 4.VScode下使用TS
  - 5.报错情况
  - - - 系统禁止运行脚本
      - 无法将“tsc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

node.js–>TS–>VScode

1.node.js的安装

下载

node.js下载网址

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

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

安装

在这里插入图片描述

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

在这里插入图片描述

安装nodo.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 Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

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

在这里插入图片描述

安装TS环境

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

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

在这里插入图片描述

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

在这里插入图片描述

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

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

在这里插入图片描述

tsc xxx.ts

在这里插入图片描述

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

4.VScode下使用TS

打开VScode–>新建项目文件夹–>创建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”*/
  }
}

到这就完成了！参考文章](https://blog.csdn.net/m0_47584501/article/details/126861650)

5.报错情况

系统禁止运行脚本

如果你在使用 tsc等命令时出现这样的错误

在这里插入图片描述

这是powerShell 执行策略引起的，详情请看官方文档。

解决：

以管理员身份运行power shell（必须以管理员身份运行）
输入(获取当前powerShell 执行策略)命令：
```
Get-ExecutionPolicy
```
此时会出现 Restricted 这个默认的执行政策：允许单个命令，但不允许脚本
这种情况只要改变 powershell执行策略的可以了，还是在 power shell 窗口下输入命令：
```
set-ExecutionPolicy RemoteSigned
```
选全是(A)即可
再次输入 Get-ExecutionPolicy命令，看到输出 RemoteSigned 后便可以正常使用 tsc

无法将“tsc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

这种情况是未安装或者局部安装 typescript 导致的

在vscode新建终端或者cmd命令窗口下输入：

npm install typescript -g