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

待我称王封你为后i 2023-10-02 19:58 20阅读 0赞

### 一、前言 ###

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

### 二、安装typescript环境 ###

必须要有node环境哈！

`win` \+ `R` 输入`cmd`

npm install -g typescript

`-g`代表global全局安装

查看版本

tsc -v

![在这里插入图片描述][61052a7832264cdc9de8d1e5ebc2daef.png]

### 三、VSCode配置自动监视编译 ###

#### 1. 新建一个文件夹 ####

![在这里插入图片描述][cef017ce45914988917ce1a790d89ee0.png]

#### 2. 在终端打开 ####

![在这里插入图片描述][333d6399329e4c349746f13f119908a5.png]

#### 3. 初始化配置文件 ####

tsc --init

![在这里插入图片描述][c724d8e9035a4e359cdd7ced8777de1c.png]

#### 4. 编辑配置文件 ####

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

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

![在这里插入图片描述][ca8089aab8f5431d82447774ad4331e1.png]

#### 5. 开启自动编译 ####

找到`终端`，点击`运行任务`  
![在这里插入图片描述][c469f0c96c6b4a5d8fa0f47c7660fe77.png]  
点击`显示所有任务`  
![在这里插入图片描述][61984c09fe0d4e3b85a77e0e959a4a93.png]  
找到要监视的`json`文件

![在这里插入图片描述][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"]'.

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

### 四、测试 ###

#### 1. 编写ts文件 ####

新建`test.ts`

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

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

![在这里插入图片描述][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`  
![在这里插入图片描述][ecddda7222f44d379f8c62efbc8d302f.png]

### 五、总结 ###

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

--------------------

有缘人才可以看得到的哦！！！

[点击访问！小编自己的网站，里面也是有很多好的文章哦！][Link 1]

[61052a7832264cdc9de8d1e5ebc2daef.png]: https://img-blog.csdnimg.cn/61052a7832264cdc9de8d1e5ebc2daef.png
[cef017ce45914988917ce1a790d89ee0.png]: https://img-blog.csdnimg.cn/cef017ce45914988917ce1a790d89ee0.png
[333d6399329e4c349746f13f119908a5.png]: https://img-blog.csdnimg.cn/333d6399329e4c349746f13f119908a5.png
[c724d8e9035a4e359cdd7ced8777de1c.png]: https://img-blog.csdnimg.cn/c724d8e9035a4e359cdd7ced8777de1c.png
[ca8089aab8f5431d82447774ad4331e1.png]: https://img-blog.csdnimg.cn/ca8089aab8f5431d82447774ad4331e1.png
[c469f0c96c6b4a5d8fa0f47c7660fe77.png]: https://img-blog.csdnimg.cn/c469f0c96c6b4a5d8fa0f47c7660fe77.png
[61984c09fe0d4e3b85a77e0e959a4a93.png]: https://img-blog.csdnimg.cn/61984c09fe0d4e3b85a77e0e959a4a93.png
[ac437670293647e9a52cc8b78b635889.png]: https://img-blog.csdnimg.cn/ac437670293647e9a52cc8b78b635889.png
[b0ee6f6b80ec4fe4b50d45b8f6010f3d.png]: https://img-blog.csdnimg.cn/b0ee6f6b80ec4fe4b50d45b8f6010f3d.png
[c28567964c0a43ab8c676562d6d0e8a2.png]: https://img-blog.csdnimg.cn/c28567964c0a43ab8c676562d6d0e8a2.png
[ecddda7222f44d379f8c62efbc8d302f.png]: https://img-blog.csdnimg.cn/ecddda7222f44d379f8c62efbc8d302f.png
[Link 1]: https://wangzhenjun.xyz