一、前言
小编最近开始学习typescript ,懂得人都知道,typescript 是vue3 的基础伴生,配合更加默契。就像vue2 和js 一样!typescript 不像js那样浏览器直接可以解读,需要我们把ts文件编译成js文件,这样浏览器才可以解读。所以我们要安装一下ts的环境和自动编译,方便我们后续学习,不需要写完一个ts文件在手动编译!
二、安装typescript环境
必须要有node环境哈!
win + R 输入cmd
npm install -g typescript
-g 代表global全局安装
查看版本
tsc -v
![在这里插入图片描述](https://img-blog.csdnimg.cn/61052a7832264cdc9de8d1e5ebc2daef.png)
三、VSCode配置自动监视编译
1. 新建一个文件夹
![在这里插入图片描述](https://img-blog.csdnimg.cn/cef017ce45914988917ce1a790d89ee0.png)
2. 在终端打开
![在这里插入图片描述](https://img-blog.csdnimg.cn/333d6399329e4c349746f13f119908a5.png)
3. 初始化配置文件
tsc --init
![在这里插入图片描述](https://img-blog.csdnimg.cn/c724d8e9035a4e359cdd7ced8777de1c.png)
4. 编辑配置文件
52 行修改生成的js文件存放位置为:json文件夹所在目录的js文件夹下,js不存在会帮助我们新建!
79 行我们关闭语法检查,随意一点哈!(根据个人喜好设置)
![在这里插入图片描述](https://img-blog.csdnimg.cn/ca8089aab8f5431d82447774ad4331e1.png)
5. 开启自动编译
找到终端 ,点击运行任务 ![在这里插入图片描述](https://img-blog.csdnimg.cn/c469f0c96c6b4a5d8fa0f47c7660fe77.png) 点击显示所有任务 ![在这里插入图片描述](https://img-blog.csdnimg.cn/61984c09fe0d4e3b85a77e0e959a4a93.png) 找到要监视的json 文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/ac437670293647e9a52cc8b78b635889.png) 出现报错:
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"]'.
![在这里插入图片描述](https://img-blog.csdnimg.cn/b0ee6f6b80ec4fe4b50d45b8f6010f3d.png) 我们不要着急,这是没有监视到ts文件,所以提示的,我们不用管,直接写一个ts测试一下!
四、测试
1. 编写ts文件
新建test.ts
(() => {
function helloWord(str:string){
return '这是第一个ts程序:' + str
}
var text = 'helloword'
console.log(helloWord(text))
})();
我们发现,js文件夹下已经给我们编译成js文件了!
![在这里插入图片描述](https://img-blog.csdnimg.cn/c28567964c0a43ab8c676562d6d0e8a2.png)
2. 编写html文件
我们直接引入js文件夹下的js文件!
<!DOCTYPE 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>Document</title>
</head>
<body>
<script src="./js/test.js"></script>
</body>
</html>
3. 浏览器测试
我们在test.html 页面按住快捷键:alt + B 在浏览器打开次html文件
我们F12看看是否输出了:这是第一个ts程序:helloword ![在这里插入图片描述](https://img-blog.csdnimg.cn/ecddda7222f44d379f8c62efbc8d302f.png)
五、总结
这样就完成了基础的安装和配置自动监视ts文件编译成js文件,帮到你的小伙伴记得一键三连哦!谢谢小伙伴的支持!!
有缘人才可以看得到的哦!!!
点击访问!小编自己的网站,里面也是有很多好的文章哦!
|