아이템 50 - 오버로딩 타입보다는 조건부 타입을 사용하기

오버로딩 타입이란?

오버로딩 타입은 아이템 3에서 다루었던 개념이다. 다시 정리하자면 다음과 같다.

 

우선 함수 오버로딩이란 동일한 이름에 매개변수만 다른 여러 버전의 함수를 허용하는 것이다. 하지만 타입스크립트에서는 불가능하다. 타입스크립트에 비슷한 기능을 지원하지만 이는 타입 수준에서만 동작하므로 오버로딩 타입이라고 한다. 즉, 하나의 함수에 대해 여러 개의 선언문을 작성할 수 있지만, 구현체는 오직 하나뿐이다.

function add(a: number, b: number): number; // add 함수에 대한 선언문 1
function add(a: string, b: string): string; // add 함수에 대한 선언문 2

// add 함수 구현체
function add(a, b) {
  return a + b;
}

const ab = add(12, 4);
const bc = add('3', '1');

오버로딩 타입으로 함수에 타입 정보를 추가하기

오버로딩 타입을 사용하여 함수에 타입 정보를 추가하는 방법은 여러 가지가 있습니다. 몇 가지를 살펴보며 해당 타입이 가지는 단점에 대해 살펴본다.

1️⃣ 유니온 타입으로 추가하기

function double(x: number | string): number | string; // double 함수에 대한 선언문

// double 함수 구현체
function double(x: any) {
  return x + x;
}

const num = double(4); // 타입이 string | number
const str = double('3'); // 타입이 string | number

double 함수의 매개변수 x에는 number와 string 타입이 올 수 있습니다. 어떤 타입의 매개변수를 받느냐에 따라 반환되는 값의 타입도 정해진다.

 

즉, number 타입의 매개변수를 받는다면 number 타입의 값을 반환하고 string 타입의 매개변수를 받는다면 string 타입의 값을 반환한다. 하지만 매개변수의 타입이 어떤 것이든 상관없이 반환값의 타입이 string | number 인 것을 확인할 수 있다.

2️⃣ 제네릭을 사용하기

위에서 작성한 double 함수에 대한 선언문을 제네릭으로 바꾸면 타입을 보다 구체적으로 만들 수 있다.

function double<T extends number | string>(x: T): T; // double 함수에 대한 선언문

// double 함수 구현체
function double(x) {
  return x + x;
}

const num = double(4); // 타입이 4
const str = double('3'); // 타입이 "3"

하지만 반환 타입이 너무 구체적으로 바뀌었다. 즉, T를 받아 T를 반환하는 타입이므로 매개변수로 받는 값이 매개변수의 타입이 되면서 동시에 반환되는 값의 타입도 된다. 결국 num과 str은 각각 8, "33" 이지만 타입과 맞지 않습니다. 이는 문제가 있다.

 

반환되는 값의 타입은 string 또는 number이고 싶다. 

3️⃣ 여러 가지 타입 선언으로 분리하기

아마, 오버로딩 타입을 사용을 한다면 해당 방법을 가장 많이 사용하지 않을까 싶다.

function double(x: number): number; // double 함수에 대한 선언문 1
function double(x: string): string; // double 함수에 대한 선언문 2

// double 함수 구현체
function double(x: any) {
  return x + x;
}

const num = double(4); // 타입이 number
const str = double('3'); // 타입이 string

위와 같이 상황에 따른 여러 가지 타입을 선언하여 double 함수의 타입을 개선할 수 있습니다. 하지만 유니온 타입 관련해서는 여전히 문제가 발생합니다. 다음과 같은 함수가 있다.

function somethingFn(x: number | string) {
  return double(x);
}

somethingFn 내부에서 double 함수를 호출하고 있습니다. 이때 매개변수 x의 타입은 number | string 입니다. 하지만 위에서 선언한 double 함수에 대한 선언문에서 x의 매개변수의 타입은 number, string 뿐입니다. 때문에 다음과 같은 오류가 나타난다.

타입 오류

위와 같은 문제를 해결해 봅시다.

4️⃣ 세 번째 오버로딩 타입을 추가하기

아래와 같은 오버로딩 타입을 추가하면 간단하게 오류를 해결할 수 있다.

function double(x: number | string): number | string; // double 함수에 대한 선언문 3

5️⃣ 조건부 타입(conditional type) 사용하기

세 번째 오버로딩 타입을 추가하여 3번의 오류를 해결할 수 있지만 가장 좋은 해결책은 조건부 타입을 사용하는 것이다. 조건부 타입은 타입 공간의 if 구문과 같으며 자바스크립트의 삼항 연산자(?:)처럼 사용하면 된다.

// double 함수에 대한 선언문
function double<T extends number | string>(
  x: T
): T extends number ? number : string;

// double 함수 구현체
function double(x: any) {
  return x + x;
}

const num = double(4); // 타입이 number
const str = double('3'); // 타입이 string

function somethingFn(x: number | string) {
  return double(x);
}

T가 number | string 이라면 타입스크립트는 조건부 타입을 다음 단계로 해석한다.

 

1. (number | string) extends number ? number : string

2. number extends number ? number : string | string extends number ? number : string

3. number | string

 

이러한 조건부 타입은 다음과 같은 장점이 있다.

 

1. 개별 타입과 유니온으로 일반화하기 때문에 타입이 더 정확해진다.

2. 타입 체커가 단일 표현식으로 받아들이기 때문에 유니온 문제(3번에서 봤던 문제)를 해결할 수 있다.

요약

1. 오버로딩 타입을 작성 중이라면 조건부 타입을 사용해서 개선할 수 있을지 검토하기

2. 오버로딩 타입보다 조건부 타입을 사용하는 것이 좋음

3. 조건부 타입은 추가적인 오버로딩 없이 유니온 타입을 지원