1、我们默认你已经安装了node.js
通过npm安装typescript

npm install -g typescript

2、VSCode 里,点击“终端” “新建终端”,输入 tsc --init  ,会在项目根目录下生成tsconfig.json文件。关于这个文件,有好多资料说要改一下,通常提供了一段json代码,建议读者直接替换掉原来的内容。但是我们复制后报错了,

error TS18003: No inputs were found in config file……一段话

我们将outDir注释后,不再提示错误。也就是说,自动生成的这个文件,如果没有其他要求,就可以不必修改。它还告知了文档:https://aka.ms/tsconfig.json

3、点击终端,选择运行任务,然后输入tsc,选择 tsc 监视 tsconfig.json

我们再次编辑TS文件,就会在同级目录下看到对应的JS文件。

备注:由于我们可以将TS和JS文件放在一起,所以可以忽略第二步中遇到的问题。但是一但我们想要放到不同的文件夹呢?这个问题仍然需要解决

VSCode 自动编译 typescript 为 javascript的更多相关文章

  1. 【ts】 VSCode自动编译TypeScript终端报错

    一.点击终端--运行任务--选择tsc:监视 - tsconfig.json后,终端报出了如下错误:error TS5058: The specified path does not exist 在网 ...

  2. webstorm自动编译typescript

    http://bbs.egret.com/thread-1752-1-1.html http://bbs.egret.com/thread-1912-1-1.html

  3. 安装typescript环境并开启VSCode自动监视编译ts文件为js文件

    一.前言 小编最近开始学习typescript,懂得人都知道,typescript是vue3的基础伴生,配合更加默契.就像vue2和js一样!typescript不像js那样浏览器直接可以解读,需要我 ...

  4. TypeScript 自动编译

    安装Typescript npm install -g typescript 手动编译 tsc greeter.ts 自动编译 tsc -w greeter.ts

  5. [Vscode插件] 自动编译项目中的Sass文件为CSS

    插件名 : Live Sass Compiler 今天在VSCode中发现了一个自动watch项目目录下sass文件的插件,摆脱了在控制台中进行手动watch的繁琐. 安装好以后点击右下角即可自动编译 ...

  6. TypeScript 强类型 JavaScript – Rafy Web 框架选型

    今天看到了 AngularJs 2.0 版本将基于 TypeScript 构建 的消息.与同事们对 TypeScript 展开了讨论.本文记录一些个人的想法. 理想的 JavaScript 开发模式 ...

  7. TypeScript VS JavaScript 深度对比

    TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 Jav ...

  8. 使用顶级 VSCode 扩展来加快开发 JavaScript

    使用顶级 VSCode 扩展来加快开发 JavaScript 发表于 2018年08月24日 by 愚人码头 被浏览 3,942 次 分享到:   小编推荐:掘金是一个面向程序员的高质量技术社区,从 ...

  9. Typescript 和 Javascript之间的区别

    TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 Jav ...

  10. VSCode搭建node + typescript开发环境

    我们一起来喜欢TypeScript 现在写js不用TypeScript,伦家可能会觉得你是外星人. 是的,TypeScript很大程度增强了代码的可读性,可跟踪性,可维护性和减少了bug. 那么没有理 ...

随机推荐

  1. RSA中用到的推导,笔记持续更新

    1.同余式组求p和q 已知条件: 推导过程: 根据上述已知条件,以及同余式性质,我们可以得到如下: c1e2 = (2p + 3q)e1*e2 mod N c2e1 = (5p + 7q)e1*e2  ...

  2. Vue3 企业级优雅实战 - 组件库框架 - 9 实现组件库 cli - 上

    上文搭建了组件库 cli 的基础架子,实现了创建组件时的用户交互,但遗留了 cli/src/command/create-component.ts 中的 createNewComponent 函数,该 ...

  3. B站地区限制破解方法

    B站地区限制破解方法 当我们观看bilibili番剧时,经常会看到"仅限港澳台地区"的字样.那么,有没有一种方法,不需要挂梯子,就可以观看这些被限制的番剧呢? 本教程只适用于bil ...

  4. npm 启动项目报错 Cannot find module '\@babel\compat-data\data\corejs3-shipped-proposals',解决办法

    最近升级了系统的node ,webpack 等等,然后今天打开项目,突然启动不起来了~~ 报错信息如下: Module build failed (from ./node_modules/babel- ...

  5. 今天遇到的报错Babel noteThe code generator has deoptimised the styling of ...as it exceeds the max of 500KB.

    解决办法如下: { test: /.js$/, exclude: /node_modules/, use: 'babel-loader' } 然并卵,我已经设置了这个东西了,突然发现我的文件并不在no ...

  6. Anaconda和pip常用命令汇总:简单,通俗易懂

    前言 在学习 anaconda 的常用命令之前要先安装好 Anaconda for Windows,Anaconda for Ubuntu,这里我总结了 Windows 环境下和 Ubuntu 环境下 ...

  7. java入门与进阶 P-2.7+P-3.1

    判断语句常见错误 忘了大括号 永远在if和else后面加上大括号,即使当时后面只有一条语句 if后面的分号 错误使用== 和= if只要求()里面的值是零或者非零 = 是赋值 == 是判断是否相同 代 ...

  8. java跨域问题解决

    问题描述:在使用前后端分离的情况下,前端访问后端时会出现跨域问题 解决方式: 1.设置跨域 1).单个控制器方法CORS注解 在单个方法中加入注解@CrossOrigin. 2).整个控制器启用COR ...

  9. VUE防止多次点击,重复请求

    1.添加自定义文件 preventReClick.js import Vue from 'vue' const preventReClick = Vue.directive('preventReCli ...

  10. 《Terraform 101 从入门到实践》 第二章 Providers插件管理

    <Terraform 101 从入门到实践>这本小册在南瓜慢说官方网站和GitHub两个地方同步更新,书中的示例代码也是放在GitHub上,方便大家参考查看. 不怕出身低,行行出状元. 插 ...