安裝typescript環境並開啟VSCode自動監視編譯ts檔案為js檔案

小王寫部落格 發表於 2022-06-23
VSCode

一、前言

小編最近開始學習typescript,懂得人都知道,typescriptvue3的基礎伴生,配合更加默契。就像vue2js一樣!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檔案,幫到你的小夥伴記得一鍵三連哦!謝謝小夥伴的支援!!


有緣人才可以看得到的哦!!!

點選訪問!小編自己的網站,裡面也是有很多好的文章哦!