TypeScript 메서드를 수행하는 두 가지 방법의 차이점은 무엇입니까?

Question

greetOne의 방식과 greetTwo의 방식에는 어떤 차이가 있습니까?

언제 다른 스타일을 사용해야합니까?

각 스타일의 장단점은 무엇입니까?

타이프 :

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

스크립트 :

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 5에서 ECMA 스크립트는 방법이다.

가장 큰 차이점은 하위 클래스의 메서드를 재정의 할 수 있지만 상속을 기준으로 속성을 재정의 할 수 없으며 하위 클래스 인스턴스에서 다시 할당된다는 것입니다. 이다 this.greetTwo을 이 후 GreeterChild 생성자 내부 -assigned 재 :

는 콘솔 결과가

One: Child Hello, Joe 
Two: Hello, Joe 

보기 무슨 일 볼 수있는 playground에이 예가 될 것이다

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") 

다음의 예를 고려 생성자에 대한 슈퍼 호출 또는에 의해 반환 된 값을 기록하는 GreeterGreeter에 정의 된 화살표 함수. 한마디로

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

를 싹둑 자바 스크립트

, 당신은 서브 클래스 화해 오버라이드해야하는 경우 methods하지 arrow functions (속성)를 사용합니다.

화살표 기능에는 클래스 인스턴스의 주변을 그대로 유지하는 등의 고유 한 이점이 있습니다. 예를 들어 DOM 요소 이벤트 핸들러에서 호출하면 편리합니다.

Answer 2

greetOne이 방법으로 알려진 compilere 및 IDE로한다. 재산으로 두 가지 인사 해. 이 방법으로 알려져 다른 사람 때문에

그래서 "정상적인"타이프 라이터 사용자는 greetOne 같은 방법을 정의합니다.

greetTwo를 사용하면 실제로 함수 유형에서 속성을 만들고 lamba 식으로 설정합니다.

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

한 가지로 이것은 유용합니다. 다른 함수에 메소드를 콜백으로 제공하려는 경우. greetTwo 값은 화살표 함수일 일어나는 재산권 동안

// 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() }); 

하이어 귀하에 Greeter에서 자바 스크립트

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("");