TypeScriptメソッドを実行する2つの方法の違いは何ですか？

Question

greetOneの作成方法とgreetTwoの方法の違いは何ですか？

いつどちらかのスタイルを使用する必要がありますか？

各スタイルの賛否両論は何ですか？

活字体：

class Greeter { 
    greeting: string; 
    constructor(message: string) { 
     this.greeting = message; 
    } 
    greetOne() { 
     return "Hello, " + this.greeting; 
    } 
    greetTwo =()=> { 
     return "Hello, " + this.greeting; 
    } 
} 

のJavaScript：

var Greeter = (function() { 
    function Greeter(message) { 
     var _this = this; 
     this.greetTwo = function() { 
      return "Hello, " + _this.greeting; 
     }; 
     this.greeting = message; 
    } 
    Greeter.prototype.greetOne = function() { 
     return "Hello, " + this.greeting; 
    }; 
    return Greeter; 
}()); 

Answer 1

greetOneであなたのグリーターからgreetTwo値は矢印の機能であることを起こる財産である一方、方法です。

最も大きな違いは、サブクラスのメソッドをオーバーライドできますが、継承によってプロパティをオーバーライドすることはできず、サブクラスインスタンスで再割り当てされることです。 this.greetTwoは後GreeterChildコンストラクタ内再を-assignedさ：

は、コンソールの結果がどうなるかを見るためにplaygroundに、この例

One: Child Hello, Joe 
Two: Hello, Joe 

表示されます、次の例

class Greeter { 
    greeting: string; 
    constructor(message: string) { 
     this.greeting = message; 
     console.log("One: "+ this.greetOne()) 
     console.log("Two: "+ this.greetTwo()) 
    } 
    greetOne() { 
     return "Hello, " + this.greeting; 
    } 
    greetTwo =()=> { 
     return "Hello, " + this.greeting; 
    } 
} 

class GreeterChild extends Greeter { 
    constructor(message: string) { 
     super(message); 
    } 
    greetOne() { 
     return "Child Hello, " + this.greeting; //<== OK 
    }   
    greetTwo =()=> { 
     return "Child Hello, " + this.greeting; //<= will not work as you expect 
    } 
} 

new GreeterChild("Joe") 

を考えてみましょうコンストラクタへのスーパーコール、またはGreeterが返す値をログに記録します。 Greeterで定義されている矢印関数。要するに

function GreeterChild(message) { 
    var _this = this; 
    _super.call(this, message); 
    this.greetTwo = function() { 
     return "Child Hello, " + _this.greeting; //<= will not work as expected 
    }; 
} 

をチョキのjavascript

、あなたがサブクラス化し、オーバーライドする必要がある場合はmethods、ないarrow functions（プロパティ）を使用します。

矢印機能には、クラスインスタンスの周囲を保存するなどの独自の利点があります。たとえば、DOM要素イベントハンドラから呼び出すと便利です。

Answer 2

greetOneの方法として知られているcompilere及びIDEからのものです。プロパティとしてgreetTwo。

それは方法として知られている他の人からであるため、だから、「ノーマル」typescriptですユーザーはgreetOneのようなメソッドを定義します。

実際には、関数型からプロパティを作成し、lamba式で設定します。

greetTwo:() => string =() => {/*...*/}; 

これは便利です。メソッドをコールバックとして別の関数に渡したい場合。

// this will not work as expected because jQuery overwrite the "this" 
$(".myclass").click(g.greetOne); 

// this will work as expected because typescript compiler replace "this" in lambas with "_this" 
$(".myclass").click(g.greetTwo); 

// but I dont like that I prevere this style, because I think it is more readable and clear 
$(".myclass").click(() => { g.greetOne() }); 
// or 
$(".myclass").click(function() { g.greetOne() }); 

ハイアーのJavaScriptのECMAScript 5

var Greeter = (function() { 
    function Greeter(message) { 
     var _this = this; 
     this.greetTwo = function() { 
      return "Hello, " + _this.greeting; 
     }; 
     this.greeting = message; 
    } 
    Greeter.prototype.greetOne = function() { 
     return "Hello, " + this.greeting; 
    }; 
    return Greeter; 
}()); 
var g = new Greeter("");