安装typescript环境并开启VSCode自动监视编译ts文件为js文件

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

一、前言

小编最近开始学习typescript，懂得人都知道，typescript是vue3的基础伴生，配合更加默契。就像vue2和js一样！typescript不像js那样浏览器直接可以解读，需要我们把ts文件编译成js文件，这样浏览器才可以解读。所以我们要安装一下ts的环境和自动编译，方便我们后续学习，不需要写完一个ts文件在手动编译！

二、安装typescript环境

必须要有node环境哈！

win + R 输入cmd

npm install -g typescript

1
2

-g代表global全局安装

查看版本

tsc -v

1
2

在这里插入图片描述

三、VSCode配置自动监视编译

1. 新建一个文件夹

在这里插入图片描述

2. 在终端打开

在这里插入图片描述

3. 初始化配置文件

tsc --init

1
2

在这里插入图片描述

4. 编辑配置文件

52行修改生成的js文件存放位置为：json文件夹所在目录的js文件夹下，js不存在会帮助我们新建！

79行我们关闭语法检查，随意一点哈！（根据个人喜好设置）

在这里插入图片描述

5. 开启自动编译

找到终端，点击运行任务
在这里插入图片描述
点击显示所有任务

找到要监视的json文件

在这里插入图片描述
出现报错：

error TS18003: No inputs were found in config file 
'd:/file-wang/vue/code/test/tsconfig.json'. 
Specified 'include' paths were '["**/*"]' and 'exclude' paths were '["./js"]'.

1
2
3
4

在这里插入图片描述
我们不要着急，这是没有监视到ts文件，所以提示的，我们不用管，直接写一个ts测试一下！

四、测试

1. 编写ts文件

新建test.ts

(() => {
    function helloWord(str:string){
        return '这是第一个ts程序：' + str
    }
    var text = 'helloword'
    console.log(helloWord(text))
})();

1
2
3
4
5
6
7
8

我们发现，js文件夹下已经给我们编译成js文件了！

在这里插入图片描述

2. 编写html文件

我们直接引入js文件夹下的js文件！

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script src="./js/test.js">script>
body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13

3. 浏览器测试

我们在test.html页面按住快捷键：alt + B在浏览器打开次html文件

我们F12看看是否输出了：这是第一个ts程序：helloword
在这里插入图片描述

五、总结

这样就完成了基础的安装和配置自动监视ts文件编译成js文件，帮到你的小伙伴记得一键三连哦！谢谢小伙伴的支持！！

有缘人才可以看得到的哦！！！
点击访问！小编自己的网站，里面也是有很多好的文章哦！

相关阅读:
56.合并区间 | 1288.删除被覆盖的区间 | 986.区间列表的交集
 商汤绝影发布车路协同平台，“车-路-云”一体打造安全高效的交通环境
 阿里P7爆款《K8s+Jenkins》技术笔记，读了后确实有实质性的帮助
 统一、灵活、全面，语义分割开源库 MMSegmentation 全面升级
 OpenCascade模型导入与导出及Shap的读写
 蓝桥杯题库简单每日十题 day13
卷积神经网络CNN学习笔记-卷积计算&Conv2D函数的理解
 Webpack 打包commonjs 和esmodule 模块的产物对比
 软件系统集成企业如何实施CMMI认证
 Linux基本工具——vim
原文地址：https://blog.csdn.net/www_xuhss_com/article/details/125424963