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 ！

install typescript Environment and turn on VSCode Automatically monitor compilation ts File for js More articles about the document

  1. stay Windows/Ubuntu Lower installation OpenGL Environmental Science （GLUT/freeglut) And cross platform compilation （mingw/g++）

    GLUT/freeglut What is it? ? OpenGL What does it have to do with them ? OpenGL It's just a standard , Its implementation usually comes with the operating system , Just make sure the graphics card driver is new enough to use . If you need to use it directly in the program OpenGL, ...

  2. wamp Install... Locally PHP Environmental Science , Turn on curl Expand

    Open the following 2 File : wamp\bin\php\(your php version)\php.ini wamp\bin\Apache\(your apache version)\bin\php. ...

  3. Win10 Environment VScode Of C++ Compile environment

    Thoughts before writing : Before and after , Toss several times , Finally, under the leadership of Amway, the senior student , Start to enter the pit vscode 了 . One reason is that it is small , And that is vs The way to create a new project code question consumes too much memory , Basically every project is based on MB Calculated in units , Then I hope to use this article to record myself ...

  4. vscode Hide run ts Generated js Document and map file

    stay code- Preferences - Put the following code in the user settings , Cover the original { "files.exclude": { "node_modules": true, "**/ ...

  5. install typescript development environment

    Reference documents : http://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html There are two ways : 1. install vs 2017, Ann ...

  6. 【 primary 】 Anencephalic operation ：TypeScript Environment building

    summary : This article describes TypeScript Environment building , And based on VSCode Automatic compilation settings and debugging settings . Many corresponding articles on the Internet are out of date or can't be tested successfully . ------------------------------ ...

  7. Take you step by step to build TypeScript Environmental Science

    Continue to update today , In this article, we talk about environment construction , Mainly share some learning resources and installation steps for environment construction , Solve some problems that may occur during installation . Now let's go to the first step of learning , build TypeScript Environmental Science : One . Environment building 1.1. ...

  8. electron course ( The second part of Fan Wai ): Use TypeScript Version of electron, VSCode debugging TypeScript, TS Version of ESLint

    my electron Tutorial series electron course ( One ): electron Installation and project creation electron course ( I'll take a look at it ): Development environment and plug-ins , VSCode debugging , ESLint + Google ...

  9. TypeScript Environment building

    Environment building This article will briefly introduce TypeScript, And record the construction of the development environment . Use Visual Studio Code Do a simple Demo The development process . The first part . brief introduction TypeScript It's developed by Microsoft ...

  10. Front end development environment GRUNT Automatically WATCH Compress JS File and compilation SASS File environment Ruby install sass Common error analysis

    Preface : 1.sass Compiled into css file , Write at an earlier time css, Later I saw sass Pretty good , So it is used in new projects sass.(grunt need ruby Environmental Science , So you need to install it first ruby,sass Environmental Science ) ① install ru ...

Random recommendation

  1. mysql Data to Redis Fast import

    Redis agreement *<args><cr><lf> Number of parameters $<len><cr><lf> The first parameter is length <arg0> ...

  2. Random forest oob error It is estimated that

    Abstract : In random forest Bagging It can be found in the law that Bootstrap Every time I have an appointment 1/3 The sample of will not appear in Bootstrap In the collection of samples collected , Of course, I didn't participate in the establishment of decision tree , Does that mean it's useless , The answer is No ...

  3. Oracle_ Table data splitting and merging

    Reference documents : [1]http://blog.itpub.net/8858072/viewspace-426960/ [2]http://blog.csdn.net/mattlinsheep/articl ...

  4. Explain profound theories in simple language Node.js (5) - Memory control

    5.1 V8 Garbage collection mechanism and memory limit 5.1.1 Node And V8 5.1.2 V8 Memory limit of 5.1.3 V8 Object allocation of 5.1.4 V8 Garbage collection mechanism 5.1.5 Check the garbage collection log 5.2 Use it efficiently ...

  5. &quot;git rm&quot; and &quot;rm&quot; The difference between

    "git rm" and "rm" The difference between FEB 3RD, 2013 | COMMENTS This is a relatively superficial problem , But for the git For beginners , It is still necessary to mention ...

  6. 2017Java curriculum design 201521123007

    1. Course design blog link Project address 2. The individual is responsible for the module or task description ps: A project done by one person A login jsp file , Log in successfully and enter the product interface , A commodity jsp file , Display all product information , Data from MySql Database import , Sure ...

  7. PowerDesigner Connect MySQL And reverse engineering drawings

    0. Let me write it out front Recently, I want to sort out the inter table relationship of the company's projects , Start with the operation of the project background management system , And code hibernate Start with notes , Are not particularly satisfactory , So at last, I did something about it PowerDesigner Reverse engineering drawing of , such ...

  8. Browser execution code yes jsp The server executes &lt;%%&gt;

    Then the last video , Want to make the logout page have a good effect , Then can we go back to the front page <head> The following code is written in the label ? The answer is definitely not . See the effect after implementation , After performing , See the web page source code , As shown in the figure below , That's why ...

  9. jdk8--stream Parallel flow

    stream A framework to understand parallel flows is as follows : Single thread , Multithreading versus parallel streaming package com.atguigu.java8; import java.util.concurrent.ForkJoinPo ...

  10. Gym - 100971J （ thinking + Simple bfs）

    Topic link :http://codeforces.com/gym/100971/problem/J J. Robots at Warehouse time limit per test 2.0 s mem ...