[Typescript ] 03.함수

03.함수

03-01 함수

TypeScript 함수는 JavaScript와 마찬가지로 기명 함수(named function)과 익명 함수(anonymous function) 생성가능

• 타입스크립트 함수 예제코드 
• // 익명 함수 let myAdd = function(x:number, y:number) { return x + y }; console.log(myAdd(1,2))

    // 기명 함수
    function add(x:number, y:number) {
    return x + y;
    }

• 변수 캡처(capture) : 함수가 함수 외부의 변수를 참조할 수 있다.

  let z = 100; function addToZ(x:number, y:number) { return x + y + z; }

03-02 함수 타입 (Function Types)

• 함수의 타이핑 (Typing the function) :
• 각 파라미터와 함수 자신의 반환될 타입을 정해줄 수 있다.

  function add(x: number, y: number): number {
  return x + y; 
  } 
  let myAdd = function(x: number, y: number): number {
  return x + y 
  };

03-03 함수 타입 작성하기 (Writing the function type)

• 함수의 타입은 매개변수의 타입과 반환 타입이 있다.
• 함수의 리턴값이 없는 경우 void로 지정
• 캡처된 변수(함수가 함수 외부의 변수를 참조)는 타입에 반영되지 않는다. -> 타입검사를 할 수 없음
• 사실상 캡처된 변수는 함수의 "숨겨진 상태"의 일부이고 API를 구성하지 않음

  let myAdd: (x: number, y: number) => number = function(x: number, y: number): number 
      { 
      return x + y;
      };

03-04 타입의 추론 (Inferring the types)

• 방정식의 한쪽에만 타입이 있더라도 타입을 알아낼 수 있다는 것03-05 선택적 매개변수와 기본 매개변수 (Optional and Default Parameter)

1.선택적 매개변수 :
- 원래는 함수에 주어진 매개변수의 수와 일치해야 하지만 한개의 매개변수로도 함수를 호출하고 싶을때 사용
- 매개변수 이름 끝에 ? 를 붙여서 사용

    function buildName(firstName: string, lastName?: string) {
    if (lastName) {
    }
    else{
    }

    let result1 = buildName("Bob"); //선택적 매개변수에 의해 정상 동작
    let result2 = buildName("Bob", "Adams", "Sr."); // 오류, 너무 많은 매개변수
    let result3 = buildName("Bob", "Adams");// 정확함
    return firstName;
    return firstName + " " + lastName;
    // lastName 대신 firstName을 선택적으로 하고 싶다면 매개변수의 순서를 변경

[기본형]

// myAdd는 전체 함수 타입을 가집니다 
let myAdd = function(x: number, y: number): number { 
return x + y; 
}; 
// 매개변수 x 와 y는 number 타입을 가집니다
// 매개변수로 number 타입의 값 두 개를 받고, number 타입을 반환하는 함수 타입으로 x와 y가 number타입이라는 것을 추론 가능. 
let myAdd: (baseValue: number, increment: number) => number = function(x, y) {
return x + y; }

2.기본 매개변수 :

• 유저가 값을 제공하지 않거나 undefined로 했을 때에 할당될 매개변수의 값을 정할 수 있다.이를 기본-초기화 매개변수라고 한다

    function buildName(firstName: string, lastName = "Smith") {
    return firstName + " " + lastName; }
    let result1 = buildName("Bob"); // 동작, "Bob Smith" 반환 
    let result2 = buildName("Bob", undefined); // 동작, "Bob Smith" 반환

• 필수 매개변수 뒤에 오는 기본-초기화 매개변수는 자동으로 선택적 매개변수 처리되어 함수 호출시 생략이 가능하다 

• let result1 = buildName("Bob"); // 동작, "Bob Smith" 반환

• 만약 기본-초기화 매개변수가 필수 매개변수보다 앞에 오게 된다면 사용자가 명시적으로 undefined 를 전달해 주어야 기본-초기화 매개변수를 볼 수 있다

  return firstName + " " + lastName; } 
  let result3 = buildName("Bob", "Adams"); // 성공, "Bob Adams" 반환 
  let result4 = buildName(undefined, "Adams"); // 성공, "Will Adams" 반환`

03-06. 나머지 매개변수 (Rest Parameters)

• 다수의 매개변수를 그룹 지어 작업하기를 원하거나, 함수가 최종적으로 얼마나 많은 매개변수를 취할지 모를 때 사용
• JavaScript와 같이 모든 함수 내부에 위치한 (...)arguments라는 변수를 사용
• 선택적 매개변수들의 수를 무한으로 취급

function buildName(firstName: string, ...restOfName: string[]) {
	return firstName + " " + restOfName.join(" "); 
} 
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie"); // "Joseph Samuel Lucas MacKinzie" 
let buildNameFun: (fname: string, ...rest: string[]) => string = buildName; // "Joseph Samuel Lucas MacKinzie"

03-07. this

1. this와 화살표 함수 (this and arrow functions)

• JavaScript에서, this는 함수가 호출될 때 정해지는 변수
• 유연한 기능이지만 항상 함수가 실행되는 콘텍스트에 대해 알아야 한다.
  특히 함수를 반환하거나 인자로 넘길 때의 혼란스러움이 있다.
• 예제코드

1. this가 deck 객체가 아닌 window에 설정되었기 때문에 오류 발생 (strict mode에서는 this가 window 대신 undefined)

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

2. 화살표 함수는 함수가 호출 된 곳이 아닌 함수가 생성된 쪽의 this를 캡처하기 때문에 화살표함수로 변경 하여준다.

    let deck = {
        suits: ["hearts", "spades", "clubs", "diamonds"],
        cards: Array(52),
        createCardPicker: function() {
            // NOTE: 아랫줄은 화살표 함수로써, 'this'를 이곳에서 캡처할 수 있도록 합니다
            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);

* this.suits[pickedSuit] 의 this는 any 타입

2.this 매개변수 (this parameter)

• this에 매개변수를 사용하여 함수 내부에서 this가 가리킬 객체의 타입을 정의할 수 있고 이를 통해 함수의 올바른 객체를 가리키며 오류를 방지할 수 있다.

예제코드

    interface Card {
        suit: string;
        card: number;
    }
    interface Deck {
        suits: string[];
        cards: number[];
        createCardPicker(this: Deck): () => Card;
         // Deck은 this의 매개변수이다. 
    }
    let deck: Deck = {
        suits: ["hearts", "spades", "clubs", "diamonds"],
        cards: Array(52),
        // NOTE: 아래 함수는 이제 callee가 반드시 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}; 

                // this는 무조건 Deck타입 즉 Deck 함수를 가리키기 떄문에 오류를 방지할 수 있다. 
            }
        }
    }

    let cardPicker = deck.createCardPicker();
    let pickedCard = cardPicker();

    alert("card: " + pickedCard.card + " of " + pickedCard.suit);

3.콜백에서 this 매개변수 (this parameters in callbacks)

• 라이브러리는 콜백을 일반 함수처럼 호출하므로 this사용시 undefined 나옴
• 이때 this 매개변수를 사용하여 이 오류를 막을수 있다.
• 라이브러리 작성자는 콜백 타입을 this로 표시

03-08. 오버로드 (Overloads)

• 오버로드(Overload)는 하나의 함수에 대해 다양한 매개변수 조합과 반환 타입을 지정할 수 있는 기능
• 오버로드를 사용하면 하나의 함수에 다중 함수 타입을 제공

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 { 
    // 인자가 배열 또는 객체인지 확인
    // 만약 그렇다면, deck이 주어지고 card를 선택합니다.
    if (typeof x == "object") {
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard; 
    } 
	// 그렇지 않다면 그냥 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); 

 // 결과 :
 myDeck = [
    { suit: 'diamonds', card: 2 },
    { suit: 'spades', card: 10 },
    { suit: 'hearts', card: 4 } 
 ] 

pickedCard1 = { suit: 'spades', card: 10 }
pickedCard1 = { suit: 'spades', card: 2 }