함수를 타이핑하는 방법을 알아보자

🐕 함수 타입 작성해보기(Writing the Function type)

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

화살표 함수처럼 타입을 지정해줄 수 있습니다.

타입스크립트에서 함수의 반환 타입은 다음과 같이 => 화살표 표기를 통해 분명히 할 수 있습니다.

만약 함수가 값을 반환하지 않는다면 비워두는 대신에 void를 사용해 표기합니다.

let myAdd: (x: number, y: number) => void = function (
  x: number,
  y: number,
): void {
  console.log(x + y);
};

이런 식으로 쓸 수 있겠네요!

---

👻타입추론 (Inferring the types)

우리는 사람이니까 number 타입과 number 타입을 더하면 number 타입이 반환된다는것을 알고있습니다.

그리고 놀랍게도 타입스크립트 역시도 그것을 알고 있습니다.

그것을 우리는 타입 추론이라고 불러요!

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

---

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

타입스크립트에서는 모든 매개변수가 함수에 필요하다고 가정합니다.

이것은 함수가 호출될 때 컴파일러는 각 매개변수에 대해

사용자가 값을 제대로 제공했는지를 검사한다는 뜻입니다.

또한 이 검사에서 함수에 주어진 인자의 수는 함수가 기대하는 매개변수의 수와 일치해야합니다.

 

근데 그러면 이런 의문이 생길 수 있습니다.

난 자바스크립트에서 디폴트 값을 지정해주는 것으로 매개변수와 실제 파라미터에 전달하는 값을

다르게 설정하고 싶었던 적이 많은데??

const param = (num1, num2 = 10){
	return num1 + num2
}

param(5) // 15

이런식으로요!

그럼 타입스크립트에서는 이런 디폴트값 지정 혹은 선택적 매개변수라고 부르는 것을

어떻게 표현할 수 있을까요?

function buildName(firstName: string, lastName?: string) {
    // ...
}

function buildName(firstName: string, lastName = "Smith") {
    // ...
}

옵셔널로 설정해도 되고 자바스크립트에서처럼 =  'Smith'와 같이 표현해도 되네요!

---

🌞나머지 매개변수 (rest Parameters)

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

// employeeName 은 "Joseph Samuel Lucas MacKinzie" 가 될것입니다.
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

위와 같이 ...문법을 이용해 rest 파라미터를 사용할 것을 명시해주는 것으로

표현할 수 있습니다.

rest파라미터는 배열의 형태로 전달되기때문에 string 요소만을 가지는 배열이어야한다

라고 조건을 준 것이네요!

---

😋오버로드(Overloads)

let suits = ["hearts", "spades", "clubs", "diamonds"];

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

자바스크립트에서는 오버로드를 이런식으로 구현할 수 있을 것입니다.

위 예제는 만약 매개변수로 object가 들어온다면

랜덤의 숫자를 반환하고 매개변수로 number가 들어온다면

객체를 반환하는 간단한 함수입니다.

이걸 타입스크립트에서 구현하려면 어떻게 해야할까요?

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

몰? 루

나중에 이해할래잉

---

🐶마치며

오버로딩 예제코드가 너무 극혐이라서 정신을 잃고 말았습니다.

---

이해했다고 생각할 때가 가장 무서울 때다.