타입스크립트 오버로딩

 

 

타입스크립트 오버로딩

 

 

 

함수 자체를 오버로딩하는 경우

* 오버로딩된 함수의 시그니처를 선언한 후, 바로 뒤에 실제 함수 구현을 제공해야함

 

function add(x: number, y: number): number (+1 overload)

 

 

 

 

*** 오버로딩 순서 중요함 ***

 

function test(a:string): string;
function test(a:string | null): number;


function test(a:string | null): string | number {
  if(a){return "string"}
  else {return 123}
}

const result = test("hi")

 

 

인자를 string으로 넘겼을 때 result는 가장 첫번째에 있는 리턴값 string이 됨

만약 

function test(a:string | null): number;

 

이게 첫번째로 왔다면 result는 number로 추론했을 거임

 

 

함수를 따로따로 써서 오버라이딩하는게 싫다면

이렇게 타입 별칭으로 묶어서도 가능함

 

 

interface Add {
  (x:number, y:number):number;
  (x:string, y:string):string;
}


const add: Add = (x:any,y:any) => x + y


add(1,2)
add('1','2')

 

type Add1 = (x:string, y:string) => string;
type Add2 = (x:number, y:number) => number;

type Add = Add1 & Add2

const add:Add = (x:any, y:any) => x + y;

add(1,2)

 

 

주의할 점

 

 

function a(param:string):string <= 오버로딩 시그니처
function a(param:number):number <= 오버로딩 시그니처

function a(param:string|number):string|number {return param} <= 실제 구현부

function errorA(props:string|number){
  a(props)
}

errorA(1)

 

이건 오류남

 

1. 함수 오버로딩에서 중요한 점은 오버로딩된 시그니처와 실제 구현부 사이의 일치성임

 

2. 오버로딩된 함수의 호출 시점에서 TypeScript는 어떤 시그니처가 호출될지를 먼저 결정함

그리고 결정된 시그니처와 실제 구현이 일치하는지를 확인함

 

3. a(props)는 1를 넘기기 때문에 number로 인식하고 두번째 오버로딩 시그니처를 선택함

4. 근데 시그니처는 number 타입을 반환해야 하지만, 실제 구현은 string | number를 반환하도록 되어 있음

 

 

 

그렇다면 이건...

function a(param: string): string;
function a(param: number): number;
function a(param: any): any {
    return param;
}

function errorA(props: string | number) {
    a(props); 
}

errorA(1);

 

any로 구현부 넓혀주었으나 에러남

 

이유는

함수 오버로딩을 처리할 때

TypeScript는 호출된 인수 타입과 일치하는 가장 구체적인 오버로딩 시그니처를 선택하려고 하기 때문임

 

 

function a(param: string): string;
function a(param: number): number;
function a(param: string | number): string | number; // 추가된 시그니처

function a(param: any): any {
    return param;
}

function errorA(props: string | number) {
    a(props); 
}

errorA(1);

 

요렇게 추가해주어야 문제가 없음

 

 

 

사실 이런 경우엔 그냥 오버로딩 안 쓰는 게 제일 좋음

function a(param:string | number) {
    return param;
}

function errorA(props: string | number) {
    a(props); 
}

errorA(1);

 

 

 

 

 

정리

 

타입스크립트 오버로딩

 

1. 오버로딩된 시그니처 / 구현부로 이루어짐

2. 시그니처와 구현부는 붙어있어야함

3. 구현부는 시그니처를 모두 포함할 수 있는 타입이어야함 (any, 사실 안 써도 되지만 implicitAny 에러 때문에)

4. 구현부를 사용하려고 할 때 타입은 시그니처 안에서 순서대로 찾음

5. 불필요한 오버로딩 주의해야 함

 

 

 

 

 

느낀점

 

책에서 너무 간단하게 이야기해서 chatGPT에게 물어봄 ㅜㅜ..