TypeScript新功能實例講解：支持更多EcmaScript6特性

TypeScript 1.5 Alpha正式發布，這是TypeScript 1.5的預覽版。此版本增加許多新功能。

注* 在這篇文章中我們會為每個ts示例附加所編繹出的js文件。通過NPM安裝TypeScript編繹器,并編繹ts文件：

//全局安裝
npm install typescript -g
//編繹TS文件
tsc helloworld.ts

更多的ES6功能的支持

在TypeScript 1.5中，我們加入了大量新的 ES6 功能。這些類型系統將能讓使用新的 ES6 代碼模式。

模塊（Modules）

ES6 的模塊語法是實現模塊化的有力途徑。通過導入整個模塊或個別接口，您可以實現與模塊的交互。

ES6允許你只導出、導入特定的功能，你還可以在模塊功能上面添加default, 比如：

// math.ts

export 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.ts
//只導入math中的add,subtract方法
import {add, subtract} from "math";
//將math中的默認導出方法命名為times
import times from "math";
var result = times(add(2, 3), subtract(5, 3));</pre> 

如果您一直在使用TypeScript，你可能會注意到有關于TypeScript外部模塊(external modules)的報錯。這并不意外。當我們為TypeScript創建外部模塊時，我們正在對解決這個問題。我們鼓勵開發人員使用更強的 ES6 模塊語法。



注* 通過編繹出的結果可以看出export的實現原理：



// math.js

function add(x, y) { return x + y; }
exports.add = add;
function subtract(x, y) { return x - y; }
exports.subtract = subtract;
function multiply(x, y) { return x * y; }
exports.default = multiply;
// myFile.js
var math_1 = require("math");
var math_2 = require("math");
var result = math_2.default(math_1.add(2, 3), math_1.subtract(5, 3));</pre> 


    解構（Destructuring）


解構是ES6的新功能。有了它，你可以分開聲明對象或數組的對象。





// 解構聲明一個數組， x對應10, y對應20
var [x, y] = [10, 20];
[x, y] = [y, x];  // 簡單的交換

// 你還可以在函數傳入參數中使用此聲明
var myClient = {name: "Bob", height: 6};
function greetClient({name, height: howTall}) {
  console.log("Hello, " + name + ", who is " + howTall + " feet tall.");
}
greetClient(myClient); </pre> 

傳入的對象含有name和height屬性，通過此語言，height將被重命名為howTall變量；





注* 編繹出來的結果，你可能會注意到_b變量聲明被放到了最后，實際輸出結果確實如此，但JS會自動把聲明提升，因此不會引起任何問題。



var _a = [10, 20], x = _a[0], y = _a[1];
_b = [y, x], x = _b[0], y = _b[1]; // 簡單的交換

var myClient = { name: "Bob", height: 6 };
function greetClient(_a) {
    var name = _a.name, howTall = _a.height;
    console.log("Hello, " + name + ", who is " + howTall + " feet tall.");
}
greetClient(myClient);
var _b;</pre> 


    更多


我們同樣為枚舉添加了 for-of 支持, let/const 聲明, unicode 支持, 和對 computed properties 更好的支持。








    修飾符（Decorators）




我們也采納了Angular，Ember和Aurelia （Durandal的制造商） 團隊的建議，添加了 ES7 新的修飾符的建議。新的修飾符聲明起來更加簡潔。在此示例中，我們看到 @memoize 裝飾應用在 getter/setter 上的例子：





class Person {
  @memoize
  get name() { return ${this.first} ${this.last} }

  set name(val) {
    let [first, last] = val.split(' ');
    this.first = first;
    this.last = last;
  }
}</pre> 

注* memoize 是指記住（緩存）某些輸入參數的輸出結果，提高響應速度，下面是編繹出的結果：



var __decorate = this.__decorate || function (decorators, target, key, value) {
    var kind = typeof (arguments.length == 2 ? value = target : value);
    for (var i = decorators.length - 1; i >= 0; --i) {
        var decorator = decorators[i];
        switch (kind) {
            case "function": value = decorator(value) || value; break;
            case "number": decorator(target, key, value); break;
            case "undefined": decorator(target, key); break;
            case "object": value = decorator(target, key, value) || value; break;
        }
    }
    return value;
};
var Person = (function () {
    function Person() {
    }
    Object.defineProperty(Person.prototype, "name", {
        get: function () { return this.first + " " + this.last; },
        set: function (val) {
            var _a = val.split(' '), first = _a[0], last = _a[1];
            this.first = first;
            this.last = last;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Person.prototype, "name", __decorate([memoize], Person.prototype, "name", Object.getOwnPropertyDescriptor(Person.prototype, "name")));
    return Person;
})();
 來自：

                    

                        
 本文由用戶 n6xb  自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                        
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                        
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                        
 
本文地址：http://www.baiduhome.net/news/view/5d2a63                        
                        
 TypeScript