如何在vscode中使ts自动转译成js文件

最新推荐文章于 2024-06-18 15:16:26 发布
最新推荐文章于 2024-06-18 15:16:26 发布
阅读量609 收藏 3
点赞数 3
文章标签： vscode javascript ide
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Elope_/article/details/138084042
版权

1.tsc init

tsc init

先初始化ts，会在目标文件生成一个tsconfig.json

生成的json：

2.然后将tsconfig.json文件中的outDir注释打开，路径改成自己的

3. 新建一个ts文件（注意，此时js文件还没生成，此js文件时笔者已经生成后的）

4. 终端 -》运行任务

5.选择typeScript

6.选择此时文件下的tsconfig.json文件

7.ctrl+s后就会自动更新js目录下的js文件

ps：然后你如果安装了node，就可以使用node your_js_file.js直接在命令行运行这个js文件啦

node your_js_file.js

Elope_
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
【小白-编程技巧】VScode写typescript实时转换成js预览
weixin_42274549的博客
08-03 580
最终效果：左编写 右实时编译，终端输出结果 图一 1：全局安装 TypeScript 终端输入命令：cnpm install -g typescript 2：初始化 tsconfig.json文件 终端输入命令:tsc --init 自动生成json配置文件和js文件夹 3：修改tsconfig.json中文js输出路径 4：终端监视任务： 大功告成：开始变编写一个demo测试一下吧，最终...
完整版 JS转d.ts语法工具V1.0免安装.rar
01-09
亲测好用，挺不错的资源，大家快来下载吧！挺有用的！需要的话可以来下载哦！JS转d.ts语法工具V1.0免安装，主要的作用就是把第三方的js库，转换成ts项目可以识别的d.ts文件。
编译.ts、ts转换为js文件
空山新雨后，天气晚来秋
06-27 2302
一次搞定编译.ts的方法、ts转换为js文件
TS安装及JS转换
最新发布
技术btbysj的博客
06-18 378
TS安装及JS转换介绍，Typescript使用tsc提示禁止执行脚本的解决方法
vscode 自动编译TS文件到JS
冷雨温喉的博客
10-13 890
点击终端 -> 运行任务 ，可以看到当前项目所要打开的 tsc: 监视 -tsconfig.json。点击ctrl+‘,’ 打开设置，将配置改为cmd，重新打开运行任务点击监视，就可以了。2. 修改 tsconfig.json 配置。如果报以下错误：禁止运行脚本。点击进入监视编译状态，
ts转js
weixin_45727472的博客
02-18 4210
1，在线编译，进入typescript官网http://www.typescriptlang.org/，点击里面的playground就可以直接写代码了。 2，在本地编译运行Typescript需要使用npm下载typescript   npm install -g typescript tsc Hello.ts 运行后就会发现在同一文件夹下生成了Hello.js 3，webstorm编辑器可以自动生成相应的js 转载：https://juejin.cn/post/6844903696120152078
前端之TS类型注解、接口（vscode自编译ts→js）
weixin_46372074的博客
06-27 5533
1.命令行安装自动编译命令 2.修改配置中的输出js存储位置和关闭严格模式 3.启动监视，自动编译ts为js启动监视任务: 终端 -> 运行任务 -> 监视tsconfig.json 1.html： 2.ts： 3.自动编译的js 结果：
TypeScript配置vscode自动编译ts文件为js文件
qq_43955202的博客
07-27 3595
废话不多说，直接上步骤 第一步：在你的文件目录下进入cmd命令行 输入命令：tsc --init 此时你的目录下会产生一个tsconfig.json文件。 第二步：在vscode中打开文件夹 打开tsconfig.json文件。 看到一个outDir. 将其修改为 ==“outDir”: “./js”, == 修改前: 修改后： 第三步:创建ts文件 第四步：点击终端->运行任务 选择typescript 选择tsc监视 ok，大功告成 第五步：ctrl+s保存ts文件 可以.
vscode中ts自动转为js
qq_40685439的博客
01-13 2998
前提： 已经全局安装了typeScript：cnpm install -g typescript； 项目中有tsconfig.json文件，生成方法：tsc --init(在当前项目目录执行的命令)；然后修配置文件中的outDir vscode的配置： 1.点击工具栏终端 2.选择运行任务 3.选择tsc监视 若出现此项，则说明tsc监视成功，在ts文件中写的代码，按保存就能自动编译成js文件 ...
ts使用vscode自动编译生成js文件
LZhizi的博客
05-21 1531
新建文件夹在vscode打开 终端输入命令 tsc --init 会自动生成tsconfig.json文件 把"outDir": “./js”, 注释取消 如图所示 打开 终端–>运行任务–>typescript–>tsc 监视
利用VSCode任务让ts自动转js
sirria1的专栏
12-27 1824
选择 “tsc:监视 -tsconfig.json ”，没有就点击 “显示所有任务（Show All Tasks...）”创建tsconfig.json文件，然后根据自己的需要进行修改，比如输入输出目录，包含的库等等。2.设置一下vscode的监视任务，当ts文件变化时，则会自动编译同步更新js文件。菜单栏选择 终端（Terminal）->运行任务（Run Task）这样每次ts代码变化的时候，js也会同步更新。1.首先在ts项目目录下运行。
解决JSON.stringify()自动将中文转译成unicode的问题
10-18
下面小编就为大家分享一篇解决JSON.stringify()自动将中文转译成unicode的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
python二进制文件的转译详解
09-19
在Python编程中，处理二进制文件是一项重要的任务，特别是在数据存储、文件读写和通信协议等领域。Python的`struct`模块为此提供了强大的支持。本文将深入探讨如何使用`struct`进行二进制文件的转译，以及相关的重要...
ECMAScript-Gulp:在gulpfile中测试ES6语法并进行转译
04-29
在"ECMAScript-Gulp:在gulpfile中测试ES6语法并进行转译"的主题中，我们将深入探讨如何在gulpfile中利用ES6的新特性，并通过Gulp将这些代码转换为浏览器兼容的JavaScript代码。这涉及到以下几个关键知识点： 1. **...
通过js简单实现将一个文本内容转译成加密文本
10-26
将文本内容转译成加密文本，在某些情况下还是比较实用的，下面通过js简单实现下，感兴趣的朋友不要错过
vs code 如何配置配置自动编译将TypeScript代码编译成为JavaScript代码看这一篇就够了！！！
一个记录的博客
12-19 1159
本文介绍了在visual stdio code 如何配置并开启自动编译TypeScript代码为JavaScript代码。希望对看到本文的你有帮助。上一篇 Linux命令——压缩和解压缩下一篇 待定上一篇 Linux命令——压缩和解压缩下一篇 待定。
vscode 配置ts自动转换成js文件
jyf_568的博客
01-13 736
全局安装typescript cnpm install -g typescript 新建项目，生成tsconfig.json配置文件 cd 目录 tsc --init
ts 编译 js vscode
weixin_46211267的博客
07-05 334
js html格式转译成tsx格式
05-27
将 HTML 格式转换成 TSX（TypeScript JSX）格式需要以下步骤： 1. 将 HTML 格式的代码复制到一个字符串变量中。 2. 使用正则表达式或者 DOM 解析器将字符串解析成 DOM 对象。 3. 遍历 DOM 对象，将每个节点转换成相应的 TSX 代码。 4. 将所有转换后的 TSX 代码拼接成一个字符串，并返回该字符串。 以下是一个示例代码，用于将 HTML 格式的代码转换成 TSX 格式： ```javascript function convertHtmlToTsx(html) { // 使用正则表达式将字符串解析成 DOM 对象 const domParser = new DOMParser(); const doc = domParser.parseFromString(html, 'text/html'); // 遍历 DOM 对象，将每个节点转换成相应的 TSX 代码 const elements = Array.from(doc.body.children); const tsxElements = elements.map((element) => { const tagName = element.tagName.toLowerCase(); const attributes = Array.from(element.attributes).map((attribute) => { return `${attribute.nodeName}="${attribute.nodeValue}"`; }).join(' '); const children = Array.from(element.children).map((child) => { if (child.nodeType === Node.TEXT_NODE) { // 如果是文本节点，直接返回文本内容 return child.textContent.trim(); } else { // 递归调用 convertHtmlToTsx 函数，转换子元素 return convertHtmlToTsx(child.outerHTML); } }).join('\n'); return `<${tagName} ${attributes}>${children}</${tagName}>`; }); // 将所有转换后的 TSX 代码拼接成一个字符串，并返回该字符串 return tsxElements.join('\n'); } ``` 使用示例： ```javascript const html = ` <div class="container"> <h1>Hello, world!</h1> <p>This is a paragraph.</p> </div> `; const tsx = convertHtmlToTsx(html); console.log(tsx); ``` 输出结果： ```typescript <div className="container"> <h1>Hello, world!</h1> <p>This is a paragraph.</p> </div> ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值