[Type Script] 함수에 타입 지정, 오버로딩(Overloading)

 

타입스크립트에서 함수에 타입지정을 해서 사용할 수 있습니다.

| 타입지정

먼저 아래처럼 간단한 함수가 있다고 해보겠습니다.

function 함수(x){
    return x * 5;
}

함수(2) // 10

이런 함수에는 파라미터와 리턴 값에 타입 지정을 해줄 수 있는데

아래 코드처럼 타입을 지정해 주면 됩니다.

function 함수(x :number) :number{
    return x * 5;
}

함수(2) // 10

이때 파라미터 타입 지정은 파라미터 옆에 적으면 되고,

리턴값의 타입 지정은 함수명() 오른쪽에 적으면 됩니다.

 

또한 함수를 만들 때 리턴값이 없는 함수를 만들 수 있는데

이럴 때 void라는 타입을 사용할 수 있습니다.

// 리턴값이 없을 때 void타입
function 함수(x :number) :void{
    console.log(number);
}

// void타입에 리턴값이 있으면 에러
function 함수(x :number) :void{
    return x * 5; // 에러발생
}

그리고 함수의 파라미터에 타입을 지정하면

그 파라미터는 필수 파라미터가 되기 때문에

함수를 호출할 때 파라미터를 안 집어넣으면 에러가 발생합니다.

function 함수(x :number){
    return x * 5;
}

함수(2) // 10
함수() // 에러

여기서 만약 파라미터를 옵션으로 집어넣고 싶으면 아래처럼 ?를 이용하면 됩니다.

function 함수(x? :number){
    return x * 5;
}

함수() // 가능

 

| 오버로딩(Overloading)

오버로딩은 동일한 함수 이름으로 다양한 매개변수 타입 또는 개수에 따라

다른 반환 타입을 갖는 여러 버전의 함수를 정의하는 것을 의미합니다.

 

예를 들어 보통 매개변수로 string이 들어가는 함수를 만들고,

number가 들어가는 함수를 만들려면 아래처럼 이름이 다른 함수를 2개 만들어야 됩니다.

function 함수1(x: string, y: string) {
  return x + y;
}
function 함수2(x: number, y: number) {
  return x + y;
}

하지만 오버로딩을 사용하면 동일한 함수 이름으로 여러 버전의 함수를 정의할 수 있습니다.

function 함수(x: string, y: string): string;
function 함수(x: number, y: number): number;
function 함수(x: any, y: any) {
  return x + y;
}

console.log(함수('a', 'b')); // "ab" 출력
console.log(함수(3, 2)); // 5 출력