[Typescript] 함수 타입의 호환성

함수 타입의 호환성

특정 함수 타입을 다른 함수 타입으로 괜찮은지 판단하는 것을 의미

반환값 타입이 호환되는가?

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

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

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

A의 반환 값 타입은 Number,
B의 반환 값 타입은 Number Literal

Number(A) > Number Literal(B) -> a = b 가능
b는 10만 반환 가능하기 때문에 b = a 불가능

매개변수 타입이 호환되는가?

매개변수 개수가 같을 때

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 를 쓰겠다는 의미이다.
즉 결과는 d(value: number) => void 가 된다.

type D = (value: 10) => void;
D의 파라미터는 Number Literal로 10만 허용하나
d의 파라미터 value의 타입은 Number로 들어갈 수가 없다.

예시를 하나 더 보자

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; // ✅

animalFunc = dogFunc; // ❌

파라미터 타입은 animalFunc과 동일, 내부 동작은 dogFunc
즉 결과물은 animalFunc = dogFunc(value: Animal) => void 가 된다.

dogFunc: (dog: Dog) => void 으로
파라미터 value는 Dog의 모든 프로퍼티 + 기타를 가지고 있어아한다.
결과물의 파라미터는 Animal이며, Dog의 프로터티를 모두 가지고 있지 않기 때문에
호환이 불가능하다.

dogFunc = animalFunc; // ✅

파라미터 타입은 dogFunc과 동일, 내부 동작은 animalFunc
즉 결과물은 dogFunc = animalFunc(value: Dog) => void 가 된다.

animalFunc: (animal: Animal) => void 로
파라미터 value는 Dog이며, Animal의의 모든 프로퍼티 + 기타를 가지고 있어야한다.
결과물의 파라미터는 Dog이며 Animal의 모든 파라미터를 갖고 있기 때문에
호환이 가능하다.

매개변수 개수가 다를 때

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; // ❌

매개변수 개수가 같을 때와 같은 방식으로 접근해보자

func1 = func2; // ✅

파라미터 타입은 func1 과 동일, 내부 동작은 func2
즉 결과물은 func1: func2(a: number, b:number) => void 가 된다.

func2: (a: number) => void로
결과물의 파라미터 a, b를 그대로 func2에 주입했을 때 문제가 생기지 않는다.

func2 = func1; // ❌

파라미터 타입은 func2 와 동일, 내부 동작은 func1
즉 결과물은 func2: fun1(a: number) => void 가 된다.

func1: (a: number, b: number) => void 로
결과물의 파라마미터 a 를 그대로 fun1에 주입하면 b가 없기 때문에 문제가 생긴다.

출처

인프런 - 한 입 크기로 잘라먹는 타입스크립트