차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- typescript:function [2019/07/27 15:40] – [this] taekgu
+++ typescript:function [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 67: / 줄 67: @@
 let myAdd = function(x: number, y: number): number { return x + y; };
-// The parameters 'x' and 'y' have the type numbe
+// The parameters 'x' and 'y' have the type number
 let myAdd: (baseValue: number, increment: number) => number =
     function(x, y) { return x + y; };
@@ 줄 160: / 줄 160: @@
 ===== this =====
+JavaScript에서 ''this''를 사용하는 방법을 배우는 것은 통과 의례의 일입니다. TypeScript는 JavaScript의 상위 집합이므로 TypeScript 개발자는 이 메서드를 사용하는 방법과 올바르게 사용되지 않는 시점을 찾는 방법을 배워야합니다. 다행스럽게도 TypeScript를 사용하면 두 가지 기술을 사용하여 잘못된 용도를 잡을 수 있습니다. 그러나 이것이 JavaScript에서 어떻게 작동하는지 알아야 할 필요가 있다면 [[https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/|Yehuda Katz의 Understanding JavaScript Function Invocation과 "this"]]를 먼저 읽으십시오. 예후다(Yehuda)의 기사는이 내부 동작에 대해 설명합니다. 여기서는 기본 사항 만 다루겠습니다.
+==== this and arrow functions ====
+JavaScript에서 ''this''는 함수가 호출 될 때 설정된 변수입니다. 이것은 매우 강력하고 유연한 기능이지만 항상 함수가 실행되는 문맥에 대해 알 필요가 있습니다. 특히 함수를 반환하거나 인수를 함수로 전달할 때 이것은 혼란스럽습니다.
+예제를 살펴 보겠습니다:
+<code javascript>
+let deck = {
+    suits: ["hearts", "spades", "clubs", "diamonds"],
+    cards: Array(52),
+    createCardPicker: function() {
+        return function() {
+            let pickedCard = Math.floor(Math.random() * 52);
+            let pickedSuit = Math.floor(pickedCard / 13);
+            return {suit: this.suits[pickedSuit], card: pickedCard % 13};
+        }
+    }
+}
+let cardPicker = deck.createCardPicker();
+let pickedCard = cardPicker();
+alert("card: " + pickedCard.card + " of " + pickedCard.suit);
+</code>
+createCardPicker는 그 자체로 함수를 반환하는 함수입니다. 예제를 실행하려고하면 예상되는 경고 상자 대신 오류가 발생합니다. 이것은 createCardPicker에 의해 생성된 함수에서 사용되는 this가 deck 객체 대신 window로 설정되기 때문입니다. 그 이유는 우리가 cardPicker()를 단독 호출하기 때문입니다. 이와 같은 최상위 비메소드 구문 호출은 window를 사용합니다. (참고 : strict mode하에서 ''this''는 ''window''가 아니라 ''undefined''이다.)
+나중에 사용할 함수를 반환하기 전에 함수가 ''this''가 올바른지 확인하여 이 문제를 해결할 수 있습니다. 이렇게하면 나중에 사용되는 방법에 관계없이 원래의 ''deck''객체를 계속 볼 수 있습니다. 이를 위해 함수 표현식을 ECMAScript 6 화살표 구문을 사용하도록 변경합니다. 화살표 함수는 호출 된 곳이 아닌 함수가 생성 된 곳을 캡처합니다.
+<code javascript>
+let deck = {
+    suits: ["hearts", "spades", "clubs", "diamonds"],
+    cards: Array(52),
+    createCardPicker: function() {
+        // NOTE: the line below is now an arrow function, allowing us to capture 'this' right here
+        return () => {
+            let pickedCard = Math.floor(Math.random() * 52);
+            let pickedSuit = Math.floor(pickedCard / 13);
+            return {suit: this.suits[pickedSuit], card: pickedCard % 13};
+        }
+    }
+}
+let cardPicker = deck.createCardPicker();
+let pickedCard = cardPicker();
+alert("card: " + pickedCard.card + " of " + pickedCard.suit);
+</code>
+더 좋게도, 컴파일러에 --noImplicitThis 플래그를 전달하면이 실수를 할 때 TypeScript가 경고합니다. this.suits [pickedSuit]의 this는 any 유형입니다.
+==== this parameters ====
+불행히도 this.suits [pickedSuit]의 유형은 여전히 any입니다. 이는 객체 리터럴 내부의 함수 표현식에서 비롯 되었기 때문입니다. 이 문제를 해결하려면이 매개 변수를 명시적으로 제공 할 수 있습니다. 이 매개 변수는 함수의 매개 변수 목록에서 처음 나오는 가짜 매개 변수입니다.
+<code javascript>
+function f(this: void) {
+    // make sure `this` is unusable in this standalone function
+}
+</code>
+위의 예인 Card와 Deck에 몇 가지 인터페이스를 추가하여 유형을 명확하고 쉽게 재사용 할 수 있게 하십시오.
+<code javascript>
+interface Card {
+    suit: string;
+    card: number;
+}
+interface Deck {
+    suits: string[];
+    cards: number[];
+    createCardPicker(this: Deck): () => Card;
+}
+let deck: Deck = {
+    suits: ["hearts", "spades", "clubs", "diamonds"],
+    cards: Array(52),
+    // NOTE: The function now explicitly specifies that its callee must be of type Deck
+    createCardPicker: function(this: Deck) {
+        return () => {
+            let pickedCard = Math.floor(Math.random() * 52);
+            let pickedSuit = Math.floor(pickedCard / 13);
+            return {suit: this.suits[pickedSuit], card: pickedCard % 13};
+        }
+    }
+}
+let cardPicker = deck.createCardPicker();
+let pickedCard = cardPicker();
+alert("card: " + pickedCard.card + " of " + pickedCard.suit);
+</code>
+이제 TypeScript는 createCardPicker가 Deck 객체에서 호출 될 것으로 예상합니다. 즉, 이것은 Deck 형식이므로 아무 것도 아니므로 --noImplicitThis는 오류를 발생시키지 않습니다.
+==== this parameters in callbacks ====
+나중에 콜백 할 라이브러리에 함수를 전달할 때 콜백에서 ''this'' 오류를 실행할 수도 있습니다. 콜백을 호출하는 라이브러리는 일반 함수처럼 호출하기 때문에 ''this''는 ''undefined''일 것입니다. 일부 작업에서는 ''this'' 매개 변수를 사용하여 콜백으로 인한 오류를 방지 할 수 있습니다. 먼저, 라이브러리 제작자는 다음과 같이 ''this''를 갖는 콜백 유형에 주석을 달아야합니다.
+<code javascript>
+interface UIElement {
+  addClickListener(onclick: (this: void, e: Event) => void): void;
+}
+</code>
+''this: void''는 ''addClickListener''가 ''onclick''이 ''this'' 유형을 필요로하지 않는 함수가 될 것으로 예상 함을 의미합니다. 둘째, ''this''를 갖는 호출 코드에 주석을 달아라.
+<code javascript>
+class Handler {
+  info: string;
+  onClickBad(this: Handler, e: Event) {
+    // oops, used `this` here. using this callback would crash at runtime
+    this.info = e.message;
+  }
+}
+let h = new Handler();
+uiElement.addClickListener(h.onClickBad); // error!
+</code>
+''this'' 주석을 사용하면 처리기의 인스턴스에서 onClickBad를 호출해야한다는 사실을 명시하게됩니다. 그런 다음 TypeScript는 addClickListener에 this: void가 있는 함수가 필요하다는 것을 감지합니다. 오류를 수정하려면 다음 유형을 변경하십시오.
+<code javascript>
+class Handler {
+  info: string;
+  onClickGood(this: void, e: Event) {
+    // can't use `this` here because it's of type void!
+    console.log('clicked!');
+  }
+}
+let h = new Handler();
+uiElement.addClickListener(h.onClickGood);
+</code>
+onClickGood는이 유형을 this: void로 지정하기 때문에 addClickListener에 전달할 수 있습니다. 물론 이것은 this.info를 사용할 수 없다는 것을 의미합니다. 둘 다 원한다면 화살표 함수를 사용해야합니다.
+<code javascript>
+class Handler {
+    info: string;
+    onClickGood = (e: Event) => { this.info = e.message }
+}
+</code>
+이것은 화살표 함수가 this를 사용하기 때문에 작동합니다. 그래서 당신은 항상 이것을 기대하는 무언가에 전달할 수 있습니다 this: void. 단점은 처리기 유형의 객체 당 하나의 화살표 함수가 작성된다는 것입니다. 한편, 메소드는 한 번만 작성되어 Handler의 프로토 타입에 첨부됩니다. 핸들러 유형의 모든 객체간에 공유됩니다.
+===== Overloads =====
+<code javascript>
+let suits = ["hearts", "spades", "clubs", "diamonds"];
+function pickCard(x: {suit: string; card: number; }[]): number;
+function pickCard(x: number): {suit: string; card: number; };
+function pickCard(x): any {
+    // Check to see if we're working with an object/array
+    // if so, they gave us the deck and we'll pick the card
+    if (typeof x == "object") {
+        let pickedCard = Math.floor(Math.random() * x.length);
+        return pickedCard;
+    }
+    // Otherwise just let them pick the card
+    else if (typeof x == "number") {
+        let pickedSuit = Math.floor(x / 13);
+        return { suit: suits[pickedSuit], card: x % 13 };
+    }
+}
+let myDeck = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
+let pickedCard1 = myDeck[pickCard(myDeck)];
+alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);
+let pickedCard2 = pickCard(15);
+alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);
+</code>
+컴파일러가 올바른 유형 검사를 선택하기 위해 기본 JavaScript와 비슷한 과정을 거칩니다. 오버로드 목록을보고 첫 번째 오버로드로 진행하여 제공된 매개 변수를 사용하여 함수를 호출합니다. 일치하는 것을 찾으면,이 과부하를 올바른 과부하로 선택합니다. 이러한 이유 때문에 가장 구체적인 상세에서 거의 구체적인 상세까지 오버로드 순서로하는 것이 일반적입니다.
+pickCard(x) 함수는 모든 객체가 오버로드리스트의 일부가 아니므로 객체를 취하는 오버로드와 숫자를 취하는 오버로드의 두 가지 오버로드 만 있습니다. 다른 매개 변수 유형으로 pickCard를 호출하면 오류가 발생합니다.
+==== 예제 ====
+<code javascript>
+function add(a: string, b: string): string;
+function add(a: number, b: number): string;
+function add(a, b): any {
+  return a + b;
+}
+</code>
+함수명과 매개변수의 개수는 같지만 타입을 다른 경우.
+다른 언어의 오버로드는 함수명만 동일하면 되지만 TypeScript의 오버로딩은 함수명과 매개변수의 갯수가 같아야 한다.

GaramX

사용자 도구

사이트 도구

차이

문서 도구