当前位置：
  1. 首页
  2. 互联网
  3. 正文
本文介绍: TS安装，开发环境的搭建，在VScode运行的流程介绍

node.js–>TS–>VScode

1.node.js的安装

下载

node.js下载网址

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

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

安装

在这里插入图片描述

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

在这里插入图片描述

安装nodo.js的其他包，库

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

2.node.js的环境配置

环境变量配置
  1. 找到安装目录并复制地址

在这里插入图片描述

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

在这里插入图片描述

验证安装，环境配置

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

node -v

在这里插入图片描述

3.TS安装

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

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

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

在这里插入图片描述

在这里插入图片描述

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

  2. 在命令行输入:

    npm config set prefix "D:Program Filesnodejsnode_global"

    npm config set cache "D:Program Filesnodejsnode_cache"

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

在这里插入图片描述

在这里插入图片描述

安装TS环境

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

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

在这里插入图片描述

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

在这里插入图片描述

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

    在这里插入图片描述

    安装tsc编译器：ts–node 并不等于ts的Node.js,仅仅封装了ts编译的过程，提供直接运行ts代码的能力

    npm install ts-node -g

    在这里插入图片描述

  2. 尝试运行(编译ts文件成为js文件)：

在这里插入图片描述

在这里插入图片描述

tsc xxx.ts

在这里插入图片描述

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

4.VScode下使用TS

  1. 打开VScode–>新建项目文件夹–>创建hello.ts文件

在这里插入图片描述

  1. 按 crtl+` 打开vscode的终端，编译ts

    在这里插入图片描述

  2. 如果每次都要tsc去编译一下太麻烦了，按下Ctrl+shift+B 快捷键会进行编译，初次编译会选择编译模式

    ​ 在这里插入图片描述

  3. 如果想要自定义额外的配置，可以在根目录下创建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 执行策略 引起的，详情请看官方文档 。

解决：

  1. 以管理员身份运行power shell（必须以管理员身份运行）

    在这里插入图片描述

  2. 输入(获取当前powerShell 执行策略)命令 ：

    Get-ExecutionPolicy

    在这里插入图片描述

  3. 此时会出现 Restricted 这个默认的执行政策：允许单个命令，但不允许脚本

  4. 这种情况只要改变 powershell执行策略的可以了，还是在 power shell 窗口下输入命令：

    set-ExecutionPolicy RemoteSigned

    选全是(A)即可

    在这里插入图片描述

  5. 再次输入 Get-ExecutionPolicy命令，看到输出 RemoteSigned 后便可以正常使用 tsc

    在这里插入图片描述

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

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

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

npm install typescript -g
显示所有内容
上一篇 vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
下一篇 Invalid attempt to spread non-iterable instance.In order to be iterable, n

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。