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. .Net执行SQL/存储过程之易用轻量工具

    支持.Net/.Net Core/.Net Framework,可以部署在Docker, Windows, Linux, Mac. 由于该工具近来被广东省数个公司2B项目采用,且表现稳定,得到良好验证 ...

  2. TiDB上百T数据拆分实践

    背景 提高TiDB可用性,需要把多点已有上百T TiDB集群拆分出2套 挑战 1.现有需要拆分的12套TiDB集群的版本多(4.0.9.5.1.1.5.1.2都有),每个版本拆分方法存在不一样 2.其 ...

  3. python模块(module)

    目录 模块化(module)程序设计理念 模块和包概念的进化史 标准库模块(standard library) 为什么需要模块化编程 模块化编程的流 模块的 API 和功能描述要点 模块的创建和测试代 ...

  4. Python Kconfiglib初次学习

    1 参考 kconfiglib库官方介绍:kconfiglib · PyPI Kconfiglib源码:GitHub - ulfalizer/Kconfiglib: A flexible Python ...

  5. python之路51 聚合查询 分组查询

    图书管理系统 1.表设计 先考虑普通字段再考虑外键字段 数据库迁移.测试数据录入 2.首页展示 3.书籍展示 4.书籍添加 5.书籍编辑 后端如何获取用户想要编辑的数据.前端如何展示出待编辑的数据 6 ...

  6. [Untiy]贪吃蛇大作战(三)——商店界面

    游戏商店界面: 实际的效果图如下: 要实现这个滑动,首先我们需要,一个内容显示区域,一个内容滚动区域,如下图: 其中ItemContent挂载的组件如下: 红框标注的地方是右方的滑动块. 然后Item ...

  7. CSP/S 2022 游寄

    初赛 HN 初赛分数线好像大 \(32\) 分左右,通过率极高!本人弱弱的拿了 \(60.5\) 分(周围的同学平均分 \(>80\).) Day -1 这一天晚上,我背了背 dijkstra, ...

  8. echarts图例过多,折线过多颜色不知道怎么分配怎么办??优化如下

    优化一:很简单,echarts自身支持legend图例分页,加了分页就优化了图例过多情况. legend['type']: 'scroll', // 添加这一行代码即可实现图例分页功能 option ...

  9. (23)go-micro微服务客户端开发(使用负载均衡)

    目录 一 main.go开发 二 客户端代码开发: 三 客户端测试功能 1.发送注册邮件 2.实现注册功能 3.查询用户功能 四 运行项目 五 最后 一 main.go开发 至此,咱们的项目服务端代码 ...

  10. Dubbo 入门系列之基于 Dubbo API 开发微服务应用

    目标 从零上手开发基于 Dubbo 的微服务 难度 低 环境要求 系统:Windows.Linux.MacOS JDK 8 及以上(推荐使用 JDK17) Git IntelliJ IDEA(可选) ...