GaramX

사용자 도구

사이트 도구

현재 위치: home » typescript » function
추적: • function
typescript:function

차이

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

차이 보기로 링크

양쪽 이전 판이전 판
다음 판		이전 판
typescript:function [2019/07/27 16:03] – [this parameters] taekgutypescript:function [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
줄 67: 줄 67:
 let myAdd = function(x: number, y: number): number { return x + y; }; 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 = let myAdd: (baseValue: number, increment: number) => number =
     function(x, y) { return x + y; };     function(x, y) { return x + y; };
줄 258: 줄 258:
 ==== this parameters in callbacks ==== ==== this parameters in callbacks ====
 나중에 콜백 할 라이브러리에 함수를 전달할 때 콜백에서 ''this'' 오류를 실행할 수도 있습니다. 콜백을 호출하는 라이브러리는 일반 함수처럼 호출하기 때문에 ''this''는 ''undefined''일 것입니다. 일부 작업에서는 ''this'' 매개 변수를 사용하여 콜백으로 인한 오류를 방지 할 수 있습니다. 먼저, 라이브러리 제작자는 다음과 같이 ''this''를 갖는 콜백 유형에 주석을 달아야합니다. 나중에 콜백 할 라이브러리에 함수를 전달할 때 콜백에서 ''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의 오버로딩은 함수명과 매개변수의 갯수가 같아야 한다.
typescript/function.1564243397.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)

문서 도구