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. nuxt.js中引入lib-flexible 和 postcss-px2rem 实现pc自适应

    最近一个需要用nuxt框架实现的pc自适应项目,从网上找了很多资料,最终完美实现 一.下载相关插件 npm i lib-flexible -Snpm i px2rem-loader -Dnpm ins ...

  2. Kali Win-KeX Win

    内容: 概述 用法 开始 启动根会话 会话管理 声音支持 多屏支持 停止 概述 窗口模式下的 Win-KeX 将在单独的窗口中运行 Kali Linux 桌面会话. 窗口模式有助于在视觉上将 Wind ...

  3. Auto-Job任务调度框架

    Auto-Job 任务调度框架 一.背景 生活中,业务上我们会碰到很多有关作业调度的场景,如每周五十二点发放优惠券.或者每天凌晨进行缓存预热.亦或每月定期从第三方系统抽数等等,Spring和java目 ...

  4. 【原创】linux实时应用如何printf输出不影响实时性?

    版权声明:本文为本文为博主原创文章,转载请注明出处 https://www.cnblogs.com/wsg1100.如有错误,欢迎指正. @ 目录 1. 前言 2. linux终端输出 3. 常见的N ...

  5. for循环 rang方法

    今日内容 while循环补充说明 1.死循环 真正的死循环是一旦执行 cpu的功耗急剧上升 直到系统采取紧急措施 2.嵌套及全局标志位 强调: 一个break只能结束他所在那一层的循环 如果想一次性结 ...

  6. 洛谷P1862输油管道问题

    题目传送门 二话不说先上代码: #include<bits/stdc++.h> using namespace std; int n; int x,y[10001]; int main() ...

  7. threeJs构建3D世界

    threejs官网 https://threejs.org/docs/index.html#manual/zh/introduction/Installation (官网非常的详细) 导入安装 npm ...

  8. py之循环,函数

    循环 a=1 while a<10: print(a) a+=1 a=[123,1235,123124,1231] while a: a1=a.pop() print(a1) for a1 in ...

  9. 借助Radamsa变异数据(初探)

    Radamsa 介绍 Radamsa是一款测试用例生成器,通常用来测试程序对格式错误和潜在恶意输入的承受能力(对程序进行模糊测试).它通过你的输入来返回变异后的数据.它的主要卖点是,它已经在真正重要的 ...

  10. 【学习笔记】QT从入门到实战完整版(菜单栏、工具栏、浮动窗口、状态栏、中心部件)(3)

    QMainWindow QMainWindow 是一个为用户提供主窗口程序的类,包含以下几种类型部件,是许多应用程序的基础. 示例代码 void MainWindow::test() { // --- ...