Typescript series 1-1. Version 5 new features

1. Introduction

with the rapid migration of PC-side to mobile, the concept of mobile (experience) first becomes louder. Since Reactjs currently only supports iOS, the mobile Web development framework can only be selected: Angularjs/angula2 + ionic framework + Cordova. To learn good Angula2 and to read its code, you must understand and learn typescript, and therefore need to learn good ES6 and Web Component. We will start learning typescript language in the near future.

Let 's take a look at the development of Typescript language:

Microsoft introduced the new Open source programming language--typescript in 2012, given that JavaScript is a very difficult scripting language to use for large-scale web application development. As another work of Anders Hejisberg, the parent of Object Pascal and C #, Typescript is a superset of JavaScript, but fully compatible with JavaScript. The addition of optional types, classes, and modules to Javascript,typescript expands the original syntax to make code organization and reuse more orderly and facilitates the development of large Web applications.

Microsoft was in 2012.11 months to open the typescript language, 0.8.1 is the second open source version [1].

[2] In April 2014, the TypeScript 1.0 release was officially released. After that, Microsoft continued to update the language, with the release of version 1.3 and 1.4.

[3] The TypeScript1.5 version was officially released on July 20, 2015.  

2. new features of the TypeScript 1.5 version

[4] Although the new features of the typescript 1.5 version are translated, some of the key words are far more biased, and no example code is given, the following is mainly referred to [3][4] re-organized.

first, in ES6 (ECMAScript 6, that is, ECMAScript 2015) support aspects. TypeScript 1.5 version added to ES6 modules, Destructuring, Spread, for. For, Symbols, Computed Properties, Let/const, and tagged String Templates support for new features. These new features make typescript a big step towards becoming a superset of ES6 and providing type checking for all of the main features of ES6.

Public API , you can even import only the part of the public API that you need to use.

Import * as Math from "My/math"; import {add, subtract} from "My/math";

Also, developers can use the default export declaration to represent the core of the module, allowing more granular control over the API.

// math.tsexport function add (x, y )  { return x + y }export function subtract (x, y)  {  Return x – y }export default function multiply (x, y)  {  return x * y }// myfile.tsimport {add, subtract} from  "Math"; import times from  "math"; var result = times (Add (2, 3),  subtract (5,  3)); 

The last line of the Math.ts file uses ' export Default ', which controls this as a ' default ' export, which is exported when the specific exports is simply imported with the name rather than curly braces ({}). Just like the second line of the Myfiles.ts file.

In addition, TypeScript 1.5 The module is simplified and replaced with a more concise name-the internal module is renamed "namespace", the external module is "module".

since JavaScript is used both for the browser and for the server side, Typescript already supports compiling the module to AMD or CommonJS. To support more JavaScript practices, TypeScript 1.5 has added two new module output formats:Systemjs and UMD, where SYSTEMJS can make ES6 modules closer to native semantics (native semantics) without the need for a ES6 compatible browser engine,the UMD outputs a single module that can be combined with AMD and Commonjs .

again, in terms of creating lighter-weight, portable projects. Since the VS Code, Sublime, Atom, and other editors have started to support Tsconfig.json files, the TypeScript 1.5 compiler is also starting to support that type of file. Enables users to specify files and compilation options in the project. The project created by this method can be developed in both the command line and the editor, and is more lightweight.

Finally, TypeScript 1.5 also added support for the proposed decorator feature in ES7, which is currently co-developed by Angular, Ember, and Aurelia teams in  . As the ES7 is still in the development stage, its decorator characteristics are also considered as experimental properties. However, the user is now able to experience and feel the power of it.

decorators:

import {component, view, ngfor, bootstrap} from  "Angular2/angular2";import  {loadfile} from  "AudioFile";import {displayaudiofile} from  "Displayaudio"; @Component ( {selector:  ' File-list '}) @View ({  template:  '       <select id= "FileSelect"   Size= "5" >          <option *ng-for= "#item  of  items;  #i  = index "               [selected]= "Selected === item" (click) = "Updateselection ()" &GT;{{&NBSP;ITEM&NBSP;}}       </option>      </select> ',     directives: [ngfor]}) class mydisplay {    items:  String[];    constructor ()  {        this.items = ["Item1",  "item2"];    }    updateselection ()  { ... }}

Decorators can associate metadata (metadata) to classes and class members, and update those features that are decorated. In the above code, Angular 2 uses decorators to define the HTML selector and template in the class.

3.References

[1] Announcing TypeScript 0.8.1, http://blogs.msdn.com/b/typescript/archive/2012/11/15/ Announcing-typescript-0-8-1.aspx

[2] Announcing TypeScript 1.0, 2 Apr, http://blogs.msdn.com/b/typescript/archive/2014/04/02/ Announcing-typescript-1-0.aspx

[3] Announcing TypeScript 1.5, Jul, http://blogs.msdn.com/b/typescript/archive/2015/07/20/ Announcing-typescript-1-5.aspx

[4] TypeScript 1.5 official release: Deep support ECMAScript, July 26, 2015, Http://www.infoq.com/cn/news/2015/07/TypeScript-ECMAScript

[5] The rise of TypeScript, April 13, 2015, http://www.infoq.com/cn/news/2015/04/TypeScript-rise

English the Rise of TypeScript? March, http://developer.telerik.com/featured/the-rise-of-typescript/

Typescript series 1-1. Version 5 new features