[Typescript]Function, overloading

홍인열·2022년 1월 2일
0

타입스크립트에서 함수는 어떻게 타입을 선언하는지 확인해보자.
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

이름은 같지만 매개 변수 유형 및 반환 유형이 다른 함수를 여러 개 가질 수 있는 개념이다. 하지만 매개변수의 수는 같아야 한다.

위의 식에 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의 사용

함수에 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
profile
함께 일하고싶은 개발자

0개의 댓글