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

更新时间：2022年06月23日 10:12:32 作者：小王写博客

这篇文章主要介绍了安装typescript环境并开启VSCode自动监视编译ts文件为js文件,本文教大家最基础的安装和配置自动监视ts文件编译成js文件，需要的朋友可以参考下

一、前言

小编最近开始学习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文件！！

到此这篇关于安装typescript环境并开启VSCode自动监视编译ts文件为js文件的文章就介绍到这了,更多相关安装typescript环境内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript中reduce()的5个基本用法示例
这篇文章主要给大家介绍了关于JavaScript中reduce()的5个基本用法示例，文中通过示例代码以及图文介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2020-07-07
JS中${}什么意思有什么作用
在JavaScript中,${}用于模板文字（template literals）,为ES6中新增的字符串方法,其作用是配合反单引号实现字符串拼,代替以前传统复杂的引号双引号与+的拼接,简介明了,非常好用,本文给大家介绍JS中‘${}‘什么意思有什么作用,感兴趣的朋友一起看看吧
2023-08-08
JS仿百度搜索自动提示框匹配查询功能
这篇文章主要介绍了JS输入框模糊匹配查询功能，主要是仿百度搜索自动提示框的功能，大家参考使用吧
2013-11-11
IE6下出现JavaScript未结束的字符串常量错误的解决方法
JavaScript文件只在IE6下出错（“未结束的字符串常量”）的解决办法。
2010-11-11
Javascript简写条件语句(推荐)
下面小编就为大家带来一篇Javascript简写条件语句(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
javascript算法学习实现代码
有1到100000共10万个数。从中随机抽走两个。再把原来的数字顺序打乱。如何快速找到被抽走的两个数
2011-04-04
微信小程序顶部可滚动导航效果
最近领导安排做一个小程序之做头部做导航分类效果，下面小编给大家分享实现代码，需要的朋友参考下吧
2017-10-10
微信公众号获取用户地理位置并列出附近的门店的示例代码
这篇文章主要介绍了微信公众号获取用户地理位置并列出附近的门店的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
BootStrap表单验证实例代码
这篇文章主要介绍了bootstrap表单验证的实例代码，代码中包括引入的js文件，具体实现方法，大家参考本文
2017-01-01
javascript封装的sqlite操作类实例
这篇文章主要介绍了javascript封装的sqlite操作类,可实现SQLite数据库的初始化及执行SQL语句的功能,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07