Typescript Environment Construction

Environment construction

This article will briefly introduce typescript and document the development environment, using visual Studio code for a simple demo development process.

The first part, introduction

Typescript is a free and open source programming language developed by Microsoft. is a superset of JavaScript. It adds a number of features of static languages, including but not limited to the following, on the basis of preserving the characteristics of the JavaScript language itself:

• • Optional static type
  • enumerations, interfaces, and classes
  • Name space
  • Module
  • Lambda expression
  • Compile-Time type checking

In June 2013, Microsoft officially released version 0.9. The ECMAScript (ES6) standard is gradually supported in the ongoing update process.

By leveraging static language features and new standards, JavaScript development is becoming more and more straightforward. At the same time also very well in line with the current front-end development of the modular, engineering development mode and trend.

Part II, Environment preparation first, installing node. js

Installation file: node. js Downloads. Typescript source code needs to be compiled to run, and node. JS provides a compilation environment.

Second, install the typescript compilation tool

After installing node. js, open the cmd window and enter the following command

NPM install-g typescript

Use the NPM Package management tool to download the typescript package and install it in a global environment, and then compile the typescript source code with the TSC command after successful installation.

You can view the current typescript version with the Tsc-v command. Currently the latest version is: 1.8

Part III, development using visual Studio code

The following directory structure is a simple demo of the structure

Mainly including but not limited to the following directories and files

/ts:typescript the folder where the source files are stored

/js: The folder where JavaScript files generated after compilation are stored

Tsconfig.json:TypeScript compiling a configuration file

In addition, Vscode is a unique folder for the VS Code development tool, which is used primarily to store the configuration files needed for debugging.

First, Tsconfig.json

1 {2     "compileroptions": {3         "target": "ES5", 4         "Noimplicitany": false, 5         "module": "Commonjs", 6         " Removecomments ": True, 7         " Sourcemap ": false, 8         " OutDir ":" JS "9     },10     " include ": [One         " ts "     ] ,     "Exclude": [+         ] js "     ]16}

There are several important attributes that need to be explained:

• • Target: The standard to follow for JavaScript files generated after compilation. There are three candidates: Es3, ES5, es2015.
  • Noimplicitany: False if the compiler is unable to determine the type based on the use of the variable, the any type is used instead. When True, a strong type check is made, and the type cannot be inferred when the error is prompted.
  • Module: The JavaScript module specification followed. The main candidates are: Commonjs, AMD and es2015. To be consistent with node. js in the back, we choose COMMONJS here.
  • Removecomments: Compiles the generated JavaScript files to remove comments.
  • Sourcemap: Whether to generate the corresponding source map file at compile time. This file is primarily used for front-end debugging. When the current-side JS file is compressed, an error can be found by using the source map file with the same name to find the wrong location in the original file.
  • OutDir: Compile the folder where the output JavaScript files are stored.
  • Include, exclude: folders that need to be included/rejected at compile time.

Second, add the demo source file

Add app.ts and demo.ts two source files in the TS folder, directory structure and source file contents as follows

demo.tsapp.tsIii. Configuring compilation and debugging Files

Add Tasks.json files to. vscode

1 {2     //See https://go.microsoft.com/fwlink/?  linkid=733558 3     //For the documentation about the Tasks.json format 4     "version": "0.1.0", 5     "command": "TSC", 6     "Isshellcommand": True, 7     "args": ["-P", "."], 8     "showoutput": "Always", 9     "Problemmatcher": "$ TSC "10}

Switch to debug mode and click the Configure button to select the node. JS Environment. Because the next demo demo will be in the node. JS Environment.

Modify the contents of the generated Launch.json file, specifying the path to the boot portal file

1 {2     "version": "0.2.0", 3     "Configurations": [4         {5             "name": "Start", 6             "type": "Node", 7             "Request" : "Launch", 8             "program": "${workspaceroot}/js/app.js", 9             "Stoponentry": false,10             "args": [],11             ] CWD ":" ${workspaceroot} ","             prelaunchtask ": null,13             " runtimeexecutable ": null,14             " Runtimeargs ": [15                 "--nolazy"             ],17             "env": {"                 node_env": "Development"             },20             "Externalconsole": false,21 "             sourcemaps": false,22             "OutDir": null23         },24         {+             //...         },27         {            //...         }30     ]31}

When the above configuration is complete, start compiling with ctrl+shift+b, and if the output window of VS code does not display any exception information, the compilation succeeds. A compiled JavaScript file will be generated in the JS folder.

Demo.js

1 "Use strict"; 2 var demo = (function () {3     function demo (A, b) {4         this.a = A; 5         this.b = b; 6     } 7     DEMO.PROTOTYPE.S Um = function () {8         return THIS.A + this.b; 9     };10     return demo;11} ()); exports. Demo = demo;

App.js

1 "Use strict"; 2 var demo_1 = require ('./models/demo '); 3 var demo = new Demo_1.demo (1, 2); 4 Console.log (Demo.sum ());

Compared to typescript source files and generated JavaScript files, the structure has undergone a major change.

Start debugging, view the debug console, output the correct calculation results: 3

Other related content

The most popular JavaScript module specifications currently follow the following two types:

• • CommonJS: Synchronous mode loading module, mainly used in server. node. JS Modularity follows this specification. How to use: require (' Module name ').
  • AMD: Asynchronous mode loading module, mainly applied on the browser side. Requirejs follows this standard. How to use: define ([' Module name 1 ', ...], function (' module parameter 1 ', ....) { }) 

Typescript Environment Construction