TypeScript转JavaScript的方法。

r囧r小猫 2023-07-21 05:40 3阅读 0赞

### ts转js方法 ###

*  一、安装node.js
 *  二、安装TypeScript
 *  三、（手动） 转换ts文件为js文件
 *  四、（自动） 转换ts文件为js文件（vscode举例）
 *  五、结束语

# 一、安装node.js #

**node下载地址：**[https://nodejs.org/zh-cn/][https_nodejs.org_zh-cn]  
ps：也可以直接在电脑管家软件商店下载。  
安装node，可以一直点击下一步进行安装。

# 二、安装TypeScript #

（1）安装好node后，打开电脑的cmd小黑窗，或者Powershell 窗口。  
（2）输入指令：`npm install -g typescript` 即可。

# 三、（手动） 转换ts文件为js文件 #

（1）找到ts文件的存储路径。按住**shift**键，然后鼠标右键，选择在此处打开**Powershell 窗口**。使用编辑器的话，可以直接打开**终端**，同理。  
（2）输入 `tsc xxx.ts` （输入需要转为js的ts文件名+后缀）。  
![输入指令][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng_size_16_color_FFFFFF_t_70]  
（3）然后在当前路径里查看，会出现一个和ts文件名字一样的js文件，到这就成功转为js了。  
![获得js][js]  
（4）若是偶尔ts转一下js，那么看到这里就已经可以满足你的需求了。若是长期使用ts进行编写代码，那么你可以看看下面的方法。

# 四、（自动） 转换ts文件为js文件（vscode举例） #

（1）在文件所在目录，打开**Powershell 窗口**或者**小黑窗**。使用编辑器的话，可以直接打开**终端**，同理。  
（2）输入 `tsc --init`，会生成一个tsconfig.json文件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng_size_16_color_FFFFFF_t_70 1]  
（3）打开tsconfig.json文件，然后修改`"outDir": "存放生成的js的存储路径"`，下图中的意思是：在当前目录创建一个js文件夹，用来存放生成的js文件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng_size_16_color_FFFFFF_t_70 2]  
（4）确定之后，在vscode中，选择**终端**，然后选择**运行任务**，会自动检测生成如下图的任务，点击它，进行任务监听。  
![在这里插入图片描述][20200402155947651.png]  
（5）监听后，可以直接写ts代码，按下保存后，会自动更新生成js代码。

# 五、结束语 #

初次写博客，如果对你有帮助的话，点个赞哈。

[https_nodejs.org_zh-cn]: https://nodejs.org/zh-cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng_size_16_color_FFFFFF_t_70]: /images/20230528/fb940484d8b044848c6cead1ad690826.png
[js]: /images/20230528/d7d4cb05cb00458cbd9105eb32bc3437.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng_size_16_color_FFFFFF_t_70 1]: /images/20230528/78dc376c33ca4a729f4c40d2a724dafd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc1Mjg5Ng_size_16_color_FFFFFF_t_70 2]: /images/20230528/ff531c840a4a4491ae8c18ea3b96b3b1.png
[20200402155947651.png]: /images/20230528/dde923aba5ac44cebd382001747bb2bb.png