【小白-编程技巧】VScode写typescript实时转换成js预览

女爷i 2021-11-10 14:18 382阅读 0赞

# 最终效果：左编写 右实时编译，终端输出结果 #

`图一`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI3NDU0OQ_size_16_color_FFFFFF_t_70]

## 1：全局安装 TypeScript ##

终端输入命令：`cnpm install -g typescript`

## 2：初始化 tsconfig.json文件 ##

终端输入命令:`tsc --init` 自动生成json配置文件和`js`文件夹

## 3：修改tsconfig.json中文js输出路径 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI3NDU0OQ_size_16_color_FFFFFF_t_70 1]

# 4：终端监视任务： #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI3NDU0OQ_size_16_color_FFFFFF_t_70 2]  
**大功告成：开始变编写一个demo测试一下吧，最终的效果就是`图一`那样！只需4步！**

**如果操作中有不懂，下面留言，我看到后会第一时间回复！  
发教程不易，如果您觉得有用，点赞就是我最大的鼓励谢谢！**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI3NDU0OQ_size_16_color_FFFFFF_t_70]: /images/20211109/31e0feea4f52470a81b94ef818f36187.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI3NDU0OQ_size_16_color_FFFFFF_t_70 1]: /images/20211109/b144e847e07844acba4612874c1e8219.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI3NDU0OQ_size_16_color_FFFFFF_t_70 2]: /images/20211109/5dc42a64f30d4a009b0b669da1e8d737.png

发表评论取消回复

表情：

评论列表（有 0 条评论，382人围观）

还没有评论，来说两句吧...

相关阅读

相关 VSCode设置网页代码实时预览

一、设置描述 1.VSCode作为一款很不错的开发软件，相比DW更小巧，用来测试前端特别不错，那么我们平时开发网页发现只有写完代码，然后保存，接下来到浏览器中刷新查

曾经终败给现在/ 2023年08月17日 17:02/ 0 赞/ 121 阅读

相关 JS打印预览

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" />

小灰灰/ 2023年06月05日 08:49/ 0 赞/ 9 阅读

相关 TypeScript使用vsCode自动编译成js

写TypeScript的时候我们需要先将代码手动编译成javaScript才可以在浏览器运行，当前博客介绍在vsCode中让TypeScript代码可以让编辑器自动编译成j

╰半夏微凉°/ 2022年12月13日 01:40/ 0 赞/ 188 阅读

相关 excel转换成html预览,Excel转换成html

public static void excelToHtml(String xlsfile, String htmlfile) \{ ActiveXComponent ap

Bertha 。/ 2022年10月05日 15:58/ 0 赞/ 238 阅读

相关 JS打印预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

╰半夏微凉°/ 2022年08月08日 09:14/ 0 赞/ 190 阅读

相关 VSCode设置网页代码实时预览

目录一、设置描述二、操作步骤 -------------------- 一、设置描述 1.VSCode作为一款很不错的开发软件，相比DW更小巧，用来测

r囧r小猫/ 2022年05月07日 17:38/ 0 赞/ 351 阅读

相关 VSCode设置网页代码实时预览

目录一、设置描述二、操作步骤 -------------------- 一、设置描述 1.VSCode作为一款很不错的开发软件，相比DW更小巧，用来测

素颜马尾好姑娘i/ 2022年05月07日 03:54/ 0 赞/ 361 阅读

相关【小白-编程技巧】VScode写typescript实时转换成js预览

最终效果：左编写右实时编译，终端输出结果 `图一` ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

女爷i/ 2021年11月10日 14:18/ 0 赞/ 383 阅读

相关 vscode预览markdown文件

![216878-20190707153857526-1536513611.png][] 前提是需要安装Markdown Preview Enhanced插件转载于:ht

清疚/ 2021年11月02日 07:24/ 0 赞/ 453 阅读

相关江湖小白之进阶篇（五）实现PDF实时在线预览功能

在我们创建的网站里我们只要实现的逻辑就是提取成功一页PDF就将提取的文件路径发送给前端，前端接收到信息就及时展示出来，在这个过程中我遇到了一个问题，就是我执行逻辑方法的时...

朱雀/ 2020年10月23日 15:45/ 0 赞/ 853 阅读