- TS configuration file manually compile the work environment
- Configuring webpack automation package compilation environment (later supplemented)
A, TypeScript learning portal Introduction
Before entering the topic, first described this series of blog I just touched TypeScript study notes, may not be too in-depth interpretation of some aspects of the principle of things. But as much as possible the use of entry-based analytical clear, after all, to implement the project using the TypeScript generally more complex project, not just a simple syntax, but it brings problems characteristic solved is more worthy of our attention , so after this series there will be more in-depth application engineering blog, I hope you can give me some advice and ideas.
Gangster blog quoted Nguyen in such a description: JavaScript is a weakly typed (or dynamically typed ) language, that type of a variable is uncertain. TypeScript is Microsoft in 2012 launched a programming language, is a superset of JavaScript, can be compiled to JavaScript execution. Its biggest feature is support for strongly typed and ES6 Class .
Support strong typing, which could subvert your knowledge of JavaScript the language, but also JavaScript opportunity in the face of increasingly complex projects, as to why do you say wait until the engineering applications of the late blog it. TypeScript does not necessarily become a necessity for every project, but when you need it, you'll know its value.
Nguyen Gangster related blog: strongly typed JavaScript solution
Important information related to the official website (Chinese official website home page has a direct connection to download the document): the typescript language specification (github connection)
Second, the configuration file manually compile the TS working environment
Step 1: Install nodejs environment;
Part II: Installation TypeScript plug: npm install -g the typescript
Create a workspace:
TS_App // folder index.html index.ts
Then copy the code following this TS index.ts of:
1 class Greeter { 2 greeting: string; 3 constructor(message: string) { 4 this.greeting = message; 5 } 6 greet() { 7 return "Hello, " + this.greeting; 8 } 9 } 10 11 let greeter = new Greeter("world"); 12 13 let button = document.createElement('button'); 14 button.textContent = "Say Hello"; 15 button.onclick = function() { 16 alert(greeter.greet()); 17 } 18 19 document.body.appendChild(button);
Tsc then use the command console index.ts line breaks into a js file
tsc index.ts
Interval will generate a file in the current index.js After compilation, this time you can use the generated index.html introduced index.js viewing.
Presented here use a VS Code Editor Plugin: live server
After installing this plugin can just right-html file interface Right (Select) Click: Open with Live Server, this time you can use an automated service to open the html page in a browser, and can dynamically monitor the latest status on this page, when the page or js the page will automatically refresh when a file is changed, so you do not need every time tsc compiled by js also manually refresh the page.
The third step: Compile all the ts file
--init tsc // generate tsconfig.json file tsc // tsc can convert ts files directly to all js files
Use TypeScript Auto Compiler plugin automatically compile ts files in VS Code, the generation js file. This plug-in need to meet tsconfig.json file by tsc --init command ts files in the current directory to compile the relevant description set, as long as one ts file changes can be achieved by tsconfig.json monitoring of all file compiled refresh.
In tsconfig.json file can target field, set js files compiled code meets ES5 ES2015, ES2016 ... other versions of syntax; field module can also set different modular specifications, such as commonjs, none, amd , system, umd, es2015, ESNext; there are strict js code field can be set whether the strict mode; esModuleInterop control module whether to allow interoperation ES2015 and introduced each commonjs certain block.