TypeScript环境搭建并且部署到VSCode的详细步骤

目录
  • TypeScript环境搭建
    • 第一步：下载淘宝镜像
    • 第二步：下载TypeScript
  • 部署到VSCode
    • 先创建一个文件夹tsDemo，
    • 修改tsconfig.json配置
    • 可能会遇到的报错

前言：要想搭建TypeScript，那么就要有npm，要想有cnpm，那么就得有node环境。要是都有了的话，那么接下来，往下看。

TypeScript环境搭建

第一步：下载淘宝镜像

先检查自己有没有成功安装npm

有npm还不行，还要下载cnpm，命令如下（直接复制粘贴）：

npm install -g cnpm --registry=https://registry.npm.taobao.org

下载好之后，会显示成这样。

第二步：下载TypeScript

在命令窗口输入（直接复制粘贴）：

npm install -g typescript

下载好了是这样。

查看版本号：

tsc -v

这样ts就完全整好了。

部署到VSCode

先创建一个文件夹tsDemo，

在tsDemo文件夹下创建一个demo.ts文件，写上内容。。
接着，在命令窗口上跳转到该tsDemo文件夹位置上，

然后需要在这个位置上生成一个tsconfig.json文件。
直接复制这个命令：

tsc --init

然后就会在tsDemo文件夹下生成tsconfig.json文件。

修改tsconfig.json配置

把tsDemo文件夹拖拽到vsCode上去。，找到tsconfig.json，
把我选中的这一行的注释去掉，保存，

然后选中ts文件，点击：终端=>运行生成任务。点击tsc:监听

接着就会在终端生成js文件夹，里面有由ts文件编译生成好的js文件。
大功告成，给自己鼓掌啊🎉🎉🎉

可能会遇到的报错

tsc : 无法加载文件 C:\Users\JMQ\AppData\Roaming\npm\tsc.ps1，
因为在此系统上禁止运行脚本。有关详细信息，请参阅
https:/go.microsoft.co m/fwlink/?LinkID=135170 中的 about_Execution_Policies。

解决方法：

以管理员身份运行vscode。

然后输入在终端输入：

set-executionpolicy remotesigned

就不会报错了

ps：下面看下vscode 执行typescript文件的方法。

1、在vscode 控制台 执行 tsc xxx.ts 命令转换成 xxx.js

2、执行 node xxx.ts 会输出结果

到此这篇关于TypeScript环境搭建并且部署到VSCode的详细步骤的文章就介绍到这了,更多相关TypeScript环境搭建内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅谈TypeScript 索引签名的理解

    浅谈TypeScript 索引签名的理解

    目录 1.什么是索引签名 2. 索引签名语法 3. 索引签名的注意事项 3.1不存在的属性 3.2 string 和 number 键 4.索引签名与 Record<Keys, Type>对比 我们用两个对象来描述两个码农的工资: const salary1 = { baseSalary: 100_000, yearlyBonus: 20_000 }; const salary2 = { contractSalary: 110_000 }; 然后写一个获取总工资的函数 function tot

  • 一文搞懂TypeScript的安装、使用、自动编译的教程

    一文搞懂TypeScript的安装、使用、自动编译的教程

    1. 初识 TypeScript 上篇文章给大家介绍过TypeScript的安装.使用.自动编译的实现  需要的朋友点击查看. TypeScript 的介绍 TypeScript 是一种由微软开发的开源.跨平台的编程语言.它是 JavaScript 的超集,最终会被编译为 JavaScript 代码. 2012 年 10 月,微软发布了首个公开版本的 TypeScript,2013 年 6 月 19 日,在经历了一个预览版之后微软正式发布了正式版 TypeScript TypeScript 的作

  • 使用vs2022在.net6中调试带typescript的静态页面

    使用vs2022在.net6中调试带typescript的静态页面

    1.新建一个空的web项目 2.设计.建好目录结构 其中ts存放typescript源文件,web为网站根目录,scripts/js存放ts生成的js脚本. index.html为静态网页. 3.新建ts配置文件tsconfig.json,修改内容为: { "compilerOptions": { "noImplicitAny": false, "noEmitOnError": true, "removeComments":

  • TypeScript环境搭建并且部署到VSCode的详细步骤

    TypeScript环境搭建并且部署到VSCode的详细步骤

    目录 TypeScript环境搭建 第一步:下载淘宝镜像 第二步:下载TypeScript 部署到VSCode 先创建一个文件夹tsDemo, 修改tsconfig.json配置 可能会遇到的报错 前言:要想搭建TypeScript,那么就要有npm,要想有cnpm,那么就得有node环境.要是都有了的话,那么接下来,往下看. TypeScript环境搭建 第一步:下载淘宝镜像 先检查自己有没有成功安装npm 有npm还不行,还要下载cnpm,命令如下(直接复制粘贴): npm install

  • TypeScript环境搭建的实现步骤

    目录 1. 安装TS环境 2. 安装 ts-node 3. 安装nodemon 4. Parcel打包支持浏览器运行TS文件 前提是已经装好了node.js,node.js安装图文教程 1. 安装TS环境 进入到要项目文件夹中,使用 npm init --yes 初始化(该命令在项目文件夹中生成 package.json) 安装 typescript (安装不成功,可能是权限不够) 全局安装:cnpm i typescript -g [建议] 本地安装:cnpm i typescript -D

  • vite + react +typescript 环境搭建小白入门教程

    目录 前言 1. 使用 vite 创建 react 项目 1. npm / yarn 命令初始化 2. 输入项目名称 3. 选择框架 4. 选择 Js / Ts 5. 项目创建完成 6. 启动项目 2. 规范项目目录 3. 使用 react-router-dom 路由 1. 使用 npm / yarn 命令下载 2. 更改 react-router-dom 版本 3. 修改App.tsx文件 4. 配置 alias 别名 5. 配置 Ant Design 样式库 6. 配置axios与顶部加载进

  • Vue.js项目部署到服务器的详细步骤

    Vue.js项目部署到服务器的详细步骤

    前言 最近做完了一个项目,Vue.js 2.0 + vuex + axios,还是有点大的.想着做了这么久,放服务器给朋友们体验一下,帮忙找找BUG,于是就有了研究服务器这一篇文章了. 准备工作 服务器 既然是部署到服务器,肯定是需要一个云的.我这里找基友拿的一个,做测试的话,可以买阿里云的学生机,9.9 一个月,不过不是学生的话就比较麻烦,因为涉及敏感操作都需要验证码. 编译打包 将项目打包成 dist 文件,这里我需要跨域请求一些数据,还写了一个小型服务器, app.js 放到 dist 文

  • 微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤

    本文介绍了微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤,分享给大家,具体如下: 微信小程序框架:mpvue ui框架:mpvue-weui request请求:fly.js 1.项目初始化 注:如果没有安装node环境的请先去网上下载node.js下来安装,安装后默认安装npm了 接下到你要建项目的目录下打开cmd窗口(快捷方法:打开到目录后按住键盘shift,然后点击鼠标右键选择在此处打开powershell窗口即可) npm默认从外网下载包,可能会比较慢,可以换

  • Docker部署Microsoft Sql Server详细步骤

    目录 1 背景 2 创建容器 3 修改SA密码 4 链接mssql 5 容器外链接mssql 总结 1 背景 自 SQL Server 2019 CU3 起,支持 Ubuntu 18.04. 自 SQL Server 2019 CU10 起,支持 Ubuntu 20.04. Docker 引擎 1.8+ 至少 2 GB 的磁盘空间 至少 2 GB 的 RAM 博主机器: Welcome to Ubuntu 20.04.3 LTS (GNU/Linux 5.11.0-37-generic x86_

  • Jenkins部署war包和部署jar包的详细步骤

    零.配置Tomcat 默认情况下Tomcat是没有配置用户角色权限的 但是,后续Jenkins部署项目到Tomcat服务器,需要用到Tomcat的用户,所以修改tomcat以下配置, 添加用户及权限 vi /opt/tomcat/conf/tomcat-users.xml # 内容如下: <role rolename="tomcat"/> <role rolename="role1"/> <role rolename="man

  • Ubuntu Server 20.04 LTS 环境下搭建vim 编辑器Python IDE的详细步骤

    目录 安装配置vim-plug 安装vim-plug 配置vim-plug 安装coc.nvim插件 更新vim 安装node 添加coc.nvim到.vimrc文件 配置服务器 设置TAB 代码补全 设置F5一键执行代码 安装配置vim-plug 安装vim-plug curl -fLo ~/.vim/autoload/plug.vim --create-dirs \ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug

  • 使用xampp搭建运行php虚拟主机的详细步骤

    最近,新装了xampp这么一个软件搭建自己的web开发环境,安装完毕自然要虚拟几个目录放自己的项目了,现将如何在xampp搭建的web服务器环境下新建虚拟主机的过程总结分享一下,大致过程分为三步,如下: 第一步: 用记事本打开C:/WINDOWS/system32/drivers/etc/hosts文件(win7 hosts文件位置:%systemroot%\system32\drivers\etc), 在127.0.0.1       localhost下面我添加了一个127.0.0.1   

  • Vue项目打包并部署nginx服务器的详细步骤

    Vue项目打包并部署nginx服务器的详细步骤

    目录 使用场景: 一.打包 二.部署(nginx) 总结 使用场景: 我们常使用前后端分离项目时,会需要将前端vue打包然后部署. 一.打包 vue项目其实可以直接通过一下语句进行打包: npm run build 默认打包情况如下: 当我们需要将打包名称以及静态资源位置进行修改时便需要进行相应的配置: 1.首先在项目根目录下创建vue.config.js文件 配置内容如下所示(附带跨域问题解决): module.exports = { //打包 publicPath: './', output

随机推荐