함수 타입의 호환성과 오버로드

함수 타입의 호환성

함수 타입에서 호환성의 판단은 다음 두 가지로 이뤄진다.

1. 반환값이 호환되는가?
2. 매개변수가 호환되는가?

반환값의 호환

반환값의 호환은 일반적인 타입의 호환과 동일하다. 업 캐스팅일 경우는 가능하며, 다운 캐스팅일 경우에는 불가능하다.

반환값 호환성

매개변수의 호환

매개변수의 경우는 오히려 이와 반대이다. 독특하게도 업 캐스팅이 불가능하며, 다운 캐스팅일 경우에 가능하다.

매개변수의 호환

 

사진을 보면 조금 전 반환값에서는 number 타입을 number 리터럴 타입으로 다운 캐스팅하는 경우라 불가능했지만, 매개변수에서는 number 리터럴 타입을 number 타입으로 업 캐스팅하는 경우에 대해서 에러를 발생시킨다.

매개변수에 대해서는 객체를 기준으로 비교하는 것이 이해하기가 쉽다.

매개변수의 호환 객체로 이해하기

 

Animal 타입과 Animal 타입의 서브타입인 Dog 타입을 만들었다. 그리고 각각의 함수를 만든 뒤 똑같이 서브타입을 슈퍼타입으로 업 캐스팅하자 에러가 발생했다.

이 코드를 좀 더 직접적으로 표현하면 다음과 같이 된다.

매개변수의 호환 2

 

즉, 선언 당시 들어오는 매개변수로는 Animal 타입을 사용하면서, 구현부에서 출력을 보낼 때는 Dog 타입의 프로퍼티인 color를 출력하려고 하면 나올 값이 없으니 에러를 발생시키는 것이다.

매개변수의 갯수가 다른 경우

또한, 매개변수의 갯수가 다른 경우에도 호환차이가 존재한다.

매개변수의 갯수가 다를 때

 

사진과 같이 함수 e의 매개변수는 2개, 함수 f의 매개변수는 1개로 매개변수가 더 많은 함수를 매개변수가 더 적은 함수로 호환할 수 없다.

그리고 당연히 매개변수의 타입이 다를 경우에는 호환되지 않는다.

매개변수의 타입이 다를 때

오버로드

Java나 C를 다뤄본 분들이라면 메서드 오버로딩에 대해 이미 알 것이다. 매개변수의 갯수, 매개변수의 타입, 반환값의 타입에 따라 메서드명이 동일하더라도 다른 메서드로 인식하는 것인데, 이런 기능이 TS에도 존재한다.

참고로, JS에서는 존재하지 않는다. 어떻게 구현하는지 단계별로 따라가보자.

1. 오버로딩할 함수 선언하기(오버로드 시그니처)

다음과 같이 설계에 따라 함수를 선언한다.

오버로드 시그니처

 

같은 이름의 함수를 매개변수의 갯수만 다르게 선언해주었다. 에러가 발생하는데 이는 함수의 선언만 했을 뿐, 구현하지 않아서 발생하는 에러이다.

2. 함수 구현하기

어떻게든 함수만 구현하면 된다. 예를 들어 다음과 같이 극단적으로 구현도 가능하다.

오버로딩 구현

 

오버로드 시그니처로 선언한 함수와 동일한 이름의 함수를 구현했다. 구현부에는 아무것도 없지만 중괄호를 통해 함수 구현은 완료된 상태이다.

이때, 매개변수가 없더라도 오버로딩이 진행된다. 다만, 매개변수 없이 함수를 구현할 수는 없기에 일반적으로는 넣어줘야 한다. 이 부분은 이따 확인하자.

이렇게 구현하면 다음과 같은 현상을 확인할 수 있다.

오버로딩에 따른 에러

 

보면 함수의 구현부에는 매개변수가 없지만, 함수 호출 시에는 매개변수가 1개 또는 3개일 때만 에러 없이 정상적으로 호출되었다.

구현 이전에 선언해둔 선언부가 있기 때문에 매개변수 갯수에 따라 서로 다른 함수가 호출된 것이다.

이렇게 TS에서도 메서드 오버로딩이 가능하다.

 

이제 설계에 따라 함수 구현을 구성해보자.

함수 오버로딩 2

 

우리 설계에 따라 매개변수가 1개일 때와 3개일 때를 조건문으로 분기하여 로직을 구성했다. 그런데 에러가 발생한다.

함수 구현부에서 매개변수 3개를 정의해버렸기에 선언부에서 매개변수 1개짜리 선언이 호환되지 않는 상태이다.

따라서, 이런 경우에 옵셔널 체이닝을 활용해줘야 한다.

함수 오버로딩 완료

 

이렇게 TS에서 함수 오버로딩도 살펴보았다.

참고자료

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런