함수를 타이핑하는 방법을 알아보자
🐕 함수 타입 작성해보기(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);몰? 루
나중에 이해할래잉
🐶마치며
오버로딩 예제코드가 너무 극혐이라서 정신을 잃고 말았습니다.
