A tutorial on how to install, use, and automatically compile TypeScript

1. Introduction to TypeScript

The previous article introduced the installation, use, and automatic compilation of TypeScript. Click to view if you need it.

Introduction to TypeScript

TypeScript is an open source, cross-platform programming language developed by Microsoft. It is a superset of JavaScript and will eventually be compiled into JavaScript code.

In October 2012, Microsoft released the first public version of TypeScript. On June 19, 2013, after a preview version, Microsoft officially released the official version of TypeScript.

The author of TypeScript is Anders Hejlsberg, the chief architect of C#. It is an open source and cross-platform programming language.

TypeScript extends the syntax of JavaScript, so any existing JavaScript program can run in a TypeScript environment.

TypeScript is designed for large-scale application development and can be compiled to JavaScript.

TypeScript is a superset of JavaScript that mainly provides a type system and support for ES6+. It is developed by Microsoft and the code is open source on GitHub.

TypeScript is a superset of JavaScript that provides a type system and support for ES6+. It was developed by Microsoft and its code is open source on GitHub (opens new window)

Features of TypeScript

TypeScript has three main features:

From JavaScript to JavaScript
TypeScript can compile to pure, concise JavaScript code and can run on any browser, Node.js environment, and any JavaScript engine that supports ECMAScript 3 (or higher).

Strong type system
The type system allows JavaScript developers to use efficient development tools and common operations such as static checking and code refactoring when developing JavaScript applications.

Advanced JavaScript
TypeScript provides the latest and evolving JavaScript features, including those from ECMAScript 2015 and future proposals, such as asynchronous functions and Decorators, to help build robust components.

Summarize

TypeScript is becoming more and more popular in the community. It is very suitable for some large projects and some basic libraries, which greatly helps us improve development efficiency and experience.

2. Install TypeScript

Run the following command on the command line to install TypeScript globally:

npm install -g typescript

After the installation is complete, run the following command in the console to check whether the installation is successful (3.x):

tsc -V

3. Your first TypeScript program

Writing TS programs

src/helloworld.ts

//The parameter str is of type string. function aa(str: string){
        return "Hello" + str
    }
    let text = 'little cutie'
    console.log(aa(text))

src/index.html

//If the ts file is directly imported, the browser will report an error (if the ts file only contains the js syntax of the word, it can be imported and used normally)
  <script src="./helloworld.ts"></script>

Manually compile the code

We used a .ts extension, but this code is just JavaScript.

In your terminal, run the TypeScript compiler:

tsc helloworld.ts

The output is a helloworld.js file that contains the same JavaScript code as the input file.

In the terminal, run this code through Node.js:

node helloworld.js

Modify src/index.html

<script src="./helloworld.js"></script>

Console output:

Hello, Yee

Let's look at the code in helloworld.js

 function aa(str) {
        return "Hello" + str;
    }
    var text = 'Little cutie';
    console.log(aa(text));

Summarize

• If you write js syntax code directly in the ts file, then you can directly import the ts file in the html file and use it directly in Google's browser.
• If there is ts syntax code in the ts file, you need to compile the ts file into a js file and reference the js file in the html file to use it.
• If a parameter in a function in a ts file is modified with a certain type, then there will be no such type in the compiled js file.
• The variables in the ts file are modified by let, and the modified variables in the compiled js file are changed to var.

vscode automatic compilation

1). Generate the configuration file tsconfig.json

step:
Create a new folder, open the terminal, enter the command, and the tsconfig.json configuration will be automatically generated.

tsc --init

2). Open the file and modify the tsconfig.json configuration

 "outDir": "./js",
    "strict": false, 

3). Start monitoring task:

Terminal -> Run Task -> Show All Tasks -> Watch tsconfig.json

Modify and save again, and the corresponding js file will be automatically generated.

The above is the detailed content of the tutorial on how to install, use, and automatically compile TypeScript. For more information about the installation and use of automatic compilation of TypeScript, please pay attention to other related articles on 123WORDPRESS.COM!