Typescript 함수

함수 (Function)

• typeScript 함수는 두가지 함수를 만들 수 있음
  • 기명 함수(named function)
  • 익명 함수(anonymous function)

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

// 익명 함수
let myAdd = function(x, y) { return x + y };

---

함수 타입 (Function Types)

함수 타이핑

• TypeScript는 반환 문을 보고 반환 타입을 파악 -> 반환 타입 생략가능

// ts

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

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

함수 타입 작성하기

• 반환 타입
  • 매개변수 타입들과 반환 타입 사이에 "화살표 표기(=>)" 사용하여 반환 타입 설정
  • 함수가 값을 반환하지 않는다면 비워두는 대신 void를 사용

const add (x: number, y: number) => number = function(x: number, y: number): number { return x + y };

// 작성 이름은 가독성을 위해 매개 변수 이름을 정함
const add (baseValue: number, increment: number) => number = function(x: number, y: number): number { return x + y }; 

---

타입의 추론

• 방정식의 한쪽에만 타입이 있다면 확인 가능

// 전체 함수 타입
const add = function(x: number, y: number): number { return x + y };

// 매개변수 x 와 y는 number 타입을 가짐
const add (baseValue: number, increment: number) => number = function(x, y) { return x + y }; 

---

선택적 매개변수와 기본 매개변수

• 함수에 주어진 인자의 수는 함수가 기대하는 매개변수의 수와 일치해야함
• 선택적 매개변수를 원하면 이름 끝에 "?"를 붙임

function item(name: string, age: number): string {
	return name + " " + age;
}

const result1 = item("Bob"); // error
const result2 = item("Bob", "ABC", 32); // error
const result3 = item("Bob", 32); // Bob 32

// 선택적 매개변수
function item(name: string, age?: number): string {
	if(age !== undefiend) {
      return name + " " + age;
    } else {
      return name;
    }
}

const result1 = item("Bob"); // Bob
const result2 = item("Bob", "ABC", 32); // error
const result3 = item("Bob", 32); // Bob 32

• 선택적 매개변수가 필수 매개변수보다 앞에 온다면 명시적으로 undefined를 전달해야 함

// 선택적 매개변수
function item( age?: number | undefined,  name: string): string {
	if(age !== undefiend) {
      return name + " " + age;
    } else {
      return name;
    }
}

const result1 = item("Bob"); // Bob
const result2 = item("Bob", "ABC", 32); // error
const result3 = item("Bob", 32); // Bob 32

---

Rest 매개변수

• 나머지 매개변수

function add(...nums: number[]){
	return nums.reduce((acc, cur) => acc + cur, 0); 
}

add(1, 2, 3); // 6
add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55

function NameInfo(fristName: string, ...restOfName: string[]): string {
  return firstName+ " " + restOfName.join(" ");
}

console.log(NameInfo("TEST", "AA", "BB", "CC")); // "TEST AA BB CC"

---

this

this 매개변수

interface Card {
  suit: string;
  card: number;
}
interface Deck {
  suits: string[];
  cards: number[];
  createCardPicker(this:Deck): () => void
}

let deck: Deck = {
  suits: ["headrs", "spades", "clubs", "diamonds"],
  cards: Array(55),
  createCardPicker: function(this:Deck) {
    return () -> {
    let pickedCard = Math.floor(Math.random() * 52);
    let pickedSuit = Math.floor(prickedCard /13);
    return {suit: this.suit[pickedSuit], card: pickedCard %13};
  }
 }
}

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

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

콜백에서 this 매개변수

• callback 함수를 라이브러리에 전달할 때 this 때문에 오류 발생할 수 있음
  -> 콜백 타입을 this로 표시해주어야 함

interface UIElement{
 addClickListener(onclick: (this:void, e: Event) => void): void;
}

---

오버로드

• 오버로드 목록으로 동일한 함수에 다중 함수 타입을 설정

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