Typescript - 함수 타입 표현식

함수 타입 표현식

매개변수의 타입이 호환 여부

매개변수의 개수가 같을 때

-> 두 함수 타입 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; // ✅

animalFunc에 dogFunc를 할당하는 것은 불가능하다. dogFunc의 매개변수 타입이 animalFunc 매개변수 타입보다 작은 서브타입이기 때문이다.

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

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

animalFunc 타입의 매개변수 타입은 Animal 타입이다. 따라서 이렇게 할당이 이루어지게 되면 animal.color처럼 존재할거라고 보장할 수 없는 프로퍼티에 접근하게 되어 혼란을 줄 수가 있다.

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

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

dogFunc 함수의 매개변수는 Dog 타입이고, animalFunc 함수 내부에서는 name 프로퍼티에만 접근한다. 이러한 코드는 안전한 코드라고 할 수 있다.
그러므로 두개의 함수 타입 C와 D가 있을 때 두 매개변수의 개수가 같을 경우 D를 C로 취급하려면 C 매개변수의 타입이 D 매개변수 타입의 서브 타입이어야 한다.

매개변수의 개수가 다를 때

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

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

출처: https://ts.winterlood.com/