当前位置：网站首页>Install the typescript environment and enable vscode to automatically monitor the compiled TS file as a JS file

Install the typescript environment and enable vscode to automatically monitor the compiled TS file as a JS file

2022-06-29 12:52:00 【Front end technical station】

One 、 Preface

Xiaobian recently started to learn typescript, Everybody knows that ,typescript yes vue3 Basic association of , More tacit cooperation . It's like vue2 and js equally ！typescript Unlike js That way, the browser can directly interpret , We need to put ts File compiled into js file , So that the browser can interpret . So we're going to install it ts Environment and automatic compilation , To facilitate our follow-up study , You don't have to write a ts The file is being compiled manually ！

Two 、 install typescript Environmental Science

There must be node Environment ！

win + R Input cmd

npm install -g typescript

-g representative global Global installation

View version

tsc -v

3、 ... and 、VSCode Configure automatic monitoring compilation

1. Create a new folder

2. Open at terminal

3. Initialize configuration file

tsc --init

4. Edit profile

52 Row modification generates js The file storage location is ：json Of the directory where the folder is located js Under the folder ,js None of them will help us create ！

79 OK, let's turn off grammar checking , Make yourself at home ！（ Set according to personal preference ）

5. Turn on automatic compilation

find terminal , Click on Run the task

Click on Show all tasks

Find what you want to monitor json file

There is an error ：

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"]'.

Let's not worry , This is not monitored ts file , So the hint , We don't care , Write a ts Test it ！

Four 、 test

1. To write ts file

newly build test.ts

(() => {    function helloWord(str:string){        return ' This is the first one ts Program ：' + str
    }    var text = 'helloword'
    console.log(helloWord(text))
})();

We found that ,js Folder has been compiled into js The file ！

2. To write html file

Let's introduce js Under folder js file ！

<!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. Browser Test

We are test.html Press and hold the shortcut key on the page ：alt + B Open in browser times html file

We F12 See if you have output ： This is the first one ts Program ：helloword

5、 ... and 、 summary

This completes the basic installation and configuration of automatic monitoring ts File compiled into js file , Remember to click three times to help your little friend ！ Thank you for your support ！！

原网站

版权声明
本文为[Front end technical station]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/180/202206291205234708.html