您现在的位置是:首页 > Javascript
当前栏目
安装typescript环境并开启VSCode自动监视编译ts文件为js文件
2023-02-18 16:42:10 时间
一、前言
小编最近开始学习typescript
,懂得人都知道,typescript
是vue3
的基础伴生,配合更加默契。就像vue2
和js
一样!typescript
不像js那样浏览器直接可以解读,需要我们把ts文件编译成js文件,这样浏览器才可以解读。所以我们要安装一下ts的环境和自动编译,方便我们后续学习,不需要写完一个ts文件在手动编译!
二、安装typescript环境
必须要有node环境哈!
win
+ R
输入cmd
npm install -g typescript
-g
代表global全局安装
查看版本
tsc -v
三、VSCode配置自动监视编译
1. 新建一个文件夹
2. 在终端打开
3. 初始化配置文件
tsc --init
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"]'.
我们不要着急,这是没有监视到ts文件,所以提示的,我们不用管,直接写一个ts测试一下!
四、测试
1. 编写ts文件
新建test.ts
(() => {
function helloWord(str:string){
return '这是第一个ts程序:' + str
}
var text = 'helloword'
console.log(helloWord(text))
})();
我们发现,js文件夹下已经给我们编译成js文件了!
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
五、总结
这样就完成了基础的安装和配置自动监视ts文件编译成js文件,帮到你的小伙伴记得一键三连哦!谢谢小伙伴的支持!!
有缘人才可以看得到的哦!!!
相关文章
- [js]解决postMessage跨域、跨iframe消息传递
- [javascript] 全国省市县JSON/XML数据(包含台湾和海外国家一级)
- [javascript] 解决移动端手机浏览器软键盘遮挡输入框问题
- [PHP]json_encode中文JSON_UNESCAPED_UNICODE在php5.3返回null
- [javascript] 使用javascript实现webrtc视频聊天demo
- [javascript] vue和elementui中的键盘事件
- [javascript] 变量提升
- [javascript] ie下audio不支持一些媒体类型
- [javascript] ie下不支持incudes属性和方法
- [javascript] ES6模板字符串
- [javascript] strict模式严格模式
- [javascript]使用babel转换es6语法
- [js] js中的闭包以及特点
- javascript中js实现导出CSV文件功能
- javascript中js实现类似PHP的trim()函数效果
- 在线客服系统源码开发实战总结:动态加载js文件实现粘贴一段js的sdk代码,直接引入插件效果
- 前端vue2项目引入第三方js文件或者远程js文件并执行相应方法
- vuejs中使用axios网络请求库的多种方式
- vue.js中实现阻止事件冒泡
- javascript对象数组内元素排序