当前位置：网站首页>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-22 22:56:00 【Xiao Wang with hair loss】

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

Insert picture description here

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

1. Create a new folder

Insert picture description here

2. Open at terminal

Insert picture description here

3. Initialize configuration file

tsc --init

Insert picture description here

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 ）

Insert picture description here

5. Turn on automatic compilation

find terminal , Click on Run the task
Insert picture description here
Click on Show all tasks

Find what you want to monitor json file

Insert picture description here
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"]'.

Insert picture description here
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 ！

Insert picture description here

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
Insert picture description here

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 ！！

Those who are destined can see ！！！

Click on the access ！ Make up your own website , There are also many good articles in it ！

原网站

版权声明
本文为[Xiao Wang with hair loss]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/173/202206222044533184.html