타입스크립트에서 함수는 어떻게 타입을 선언하는지 확인해보자.
overloading 개념과, this bind, rest 매개변수의 사용 경우도 확인한다.
기본적으로 매개변수에 타입을 설정할수있고, 함수의 실행에따른 반환값의 타입을 설정할 수 있다.
function add (x: number, y: number): number {
return x + y
}
//x, y 매개변수의 타입은 number이고, 함수실행 결과 반환되는 값도 number 타입인 함수다.
예를 들어 number 타입 매개변수 자리에 string 타입의 매개변수가 들어왔을경우 반환값으로 string 타입으로 안내문구를 반환하는 경우를 보자.
function multiple (x: number, y: number | string): number:string {
if(typeof y === 'number'){
return x * y
}
return `매개변수y는 숫자로 입력해주세요`
}
위와 같이 타입을 지정할 수 있다. 물론 이렇게 사용해도 문제가 없을 수 있겠지만!, 좀더 명확히 하기 위해서 overloading이란 개념을 이용할수 있다.
이름은 같지만 매개 변수 유형 및 반환 유형이 다른 함수를 여러 개 가질 수 있는 개념이다. 하지만 매개변수의 수는 같아야 한다.
위의 식에 overloading을 적용하면 아래와 같이 사용할 수 있다.
function multiple (x: number, y: number): number;
function multiple (x: number, y: string): string;
function multiple (x: number, y: number | string): number:string {
if(typeof y === 'number'){
return x * y
}
return `매개변수y는 숫자로 입력해주세요`
}
함수에 this를 지정해줄때도 타입을 따른다.
interface User {
name: string;
}
const Sam: User = { name: 'Sam' }; // 타입이 User인 변수.
function showName(this: User, age: number, gender: 'm' | 'f') { // 이함수의 this는 타입이 User인 값만 가능하다.
console.log(this.name, age, gender);
}
// bind 사용
const thisBind = showName.bind(Sam);
thisBind(30, 'm'); // => Sam 30 m
// call 사용
showName.call(Sam, 30, 'f'); // => Sam 30 f
// applye 사용
showName.apply(Sam, [30, 'm']); // => Sam 30 m