[함수와 타입] 함수 타입의 호환성

해당 게시글은

강의 사이트, 인프런에서 이정환님이 진행하시는

'한 입 크기로 잘라먹는 타입스크립트' 를

들어보며 블로그를 작성하려고 합니다.

다음 게시글 내용은 해당 강의에 핸드북의 내용으로

출처는 다음과 같습니다.

 

https://ts.winterlood.com/7250edd7-a3fd-4662-b756-f11f927c73f2

타입스크립트를 소개합니다 - 타입스크립트 개론

 

chapter2.ts 에서 실습을 진행했습니다.

 

함수 타입의 호환성이란?

함수 타입의 호환성이란

특정 함수 타입을 다른 함수 타입으로 괜찮은지

판단하는 것을 의미합니다.

다음 2 가지 기준으로 함수 타입의 호환성을 판단하게 됩니다.

● 두 함수의 반환값 타입이 호환되는가?

● 두 함수의 매개변수의 타입이 호환되는가?

첫 번째 기준부터 차례대로 살펴보겠습니다.

 

기준1: 반환값 타입이 호환되는가?

A 와 B 함수 타입이 있다고 가정할 때,

A 반환값 타입이 B 반환값 타입의 슈퍼타입이라면

두 타입은 호환됩니다.

type A = () => number;
type B = () => 10;

let a: A = () => 10;
let b: B = () => 10;

a = b; // ✅
b = a; // ❌

A 의 반환값 타입은 Number, 

B 의 반환값 타입은 Number Literal 입니다.

따라서 변수 a 에 b 를 할당하는 것은 가능하지만,

반대로는 불가능합니다.

---

기준2: 매개변수의 타입이 호환되는가?

두 번째 기준인 매개변수의 타입이 호환되는지 판단할 때에는

두 함수의 매개변수의 개수가 같은지 다른지에 따라

두 가지 유형으로 나뉘게 됩니다.

 

2-1. 매개변수의 개수가 같을 때

두 함수 타입 C 와 D 가 있다고 가정할 때

두 타입의 매개변수가 같다면 

C 매개변수의 타입이 D 매개변수 타입의 서브 타입일 때 호환됩니다.

type C = (value: number) => void;
type D = (value: 10) => void;

let c: C = (value) => {};
let d: D = (value) => {};

c = d; // ❌
d = c; // ✅

C 매개변수의 타입은 Number,

D 매개변수의 타입은 Number Literal 입니다.

따라서 C 매개변수의 타입이 D 매개변수의 슈퍼타입이므로

D 를 C 로 취급하는 것은 불가능하나

반대로는 가능합니다.

이는 반환값 타입과 반대됩니다.

마치 다운캐스팅을 허용하는 것 같아 보입니다.

 

이렇게 되는 이유는

두 함수의 매개변수의 타입이 모두 객체 타입일 때

좀 더 두드러집니다.

type Animal = {
  name: string;
};

type Dog = {
  name: string;
  color: string;
};

let animalFunc = (animal: Animal) => {
  console.log(animal.name);
};

let dogFunc = (dog: Dog) => {
  console.log(dog.name);
  console.log(dog.color);
};

animalFunc = dogFunc; // ❌
dogFunc = animalFunc; // ✅

aniamlFunc 에 dogFunc 를 할당하는 것은 불가능합니다.

dogFunc 의 매개변수 타입이 animalFunc 매개변수 타입보다 작은 서브타입이기 때문입니다.

반대로는 가능합니다.

 

animalFunc = dogFunc 를 코드로 표현해보면 다음과 같습니다.

let animalFunc = (animal: Animal) => {
  console.log(animal.name);  // ✅
  console.log(animal.color); // ❌
};

animalFunc 타입의 매개변수 타입은 Animal 타입입니다.

그러나 odgFunc 함수 내부에서는 name 과 color 프로퍼티에 접근합니다.

따라서 이렇게 할당이 이루어지게 되면

animal.color 처럼 존재할 거라고 보장할 수 없는 프로퍼티에 접근하게 됩니다.

 

반대로 dogFunc = animalFunc 를 코드로 표현하면 다음과 같습니다.

let dogFunc = (dog: Dog) => {
  console.log(dog.name);
};

dogFunc 함수의 매개변수는 Dog 타입입니다.

그리고 animalFunc 함수 내부에서는 name 프로퍼티에만 접근합니다.

이 코드는 안전합니다.

 

그러므로 두 개의 함수 타입 C 와 D 가 있을 때

두 매개변수의 개수가 같을 경우 D 를 C 로 취급하려면

C 매개변수의 타입이 D 매개변수 타입의 서브 타입이어야 합니다.

 

2-2. 매개변수의 개수가 다를 때

매개변수의 개수가 다를 때에는 비교적 간단합니다.

type Func1 = (a: number, b: number) => void;
type Func2 = (a: number) => void;

let func1: Func1 = (a, b) => {};
let func2: Func2 = (a) => {};

func1 = func2; // ✅
func2 = func1; // ❌