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 ！！
Those who are destined can see ！！！
Click on the access ！ Make up your own website , There are also many good articles in it ！
![[网鼎杯 2020 青龙组]AreUSerialz](/img/38/b67f7a42abec1cdaad02f2b7df6546.png)
![[GXYCTF2019]BabySQli](/img/51/a866a170dd6c0160ce98d553333624.png)
