[TS] 타입스크립트의 공변성 / 반공변성 / 이변성

TL;DR

---

	엄격 모드	비엄격 모드
함수 리턴 타입	공변적	공변적
함수 파라미터 타입	반공변적	이변적
그 외	공변적	공변적

• 공변성 : 슈퍼 타입(넓은 타입)이 서브 타입(좁은 타입)을 커버하는 관계
  • 서브 타입을 슈퍼 타입에 대입할 수 있음 e.g. superType = subType
  • 타입스크립트 기본 동작
• 반공변성 : 서브 타입(좁은 타입)이 슈퍼 타입(넓은 타입)을 커버하는 관계
  • 슈퍼 타입을 서브 타입에 대입할 수 있음 e.g. subType = superType
  • 함수 파라미터 동작
• 이변성 : 공변성과 반공변성을 모두 포함하는 관계
  • 슈퍼 타입과 서브 타입을 모두 대입할 수 있음
  • strictFunctionTypes 옵션을 껐을 때 함수 파라미터 동작

 

공변성 | Covariance

---

공변성 : A가 B의 서브 타입이면, T<A>는 T<B>의 서브 타입

 

아래 예시에서 superArray(string | number)는 subArray(string)보다 넓은 타입을 가진다. 따라서 string은 string | number에 포함되는 서브 타입이고, string | number는 string을 포함하는 슈퍼 타입이다.

 

좁은 타입인 subArray를 넓은 타입인 superArray에 대입하는건 문제가 발생하지 않는다. 반면 넓은 타입을 좁은 타입에 대입할 땐 에러가 발생한다.

// 공변성 예시
let superArray: Array<string | number> = [];
let subArray: Array<string> = [];

superArray = subArray; // OK
subArray = superArray; // Error 'number' 형식은 'string' 형식에 할당할 수 없습니다(ts2322)

 

이처럼 좁은 타입을 넓은 타입에 대입 할 수 있는 동작을 공변성(Covariance; 协方差)이라고 부른다. 타입스크립트는 기본적으로 공변성을 갖는다.

 

함수의 리턴 타입 역시 공변성을 가진다. a의 리턴 타입(number)이 B의 리턴 타입(number | string)보다 좁은 타입이므로, a를 b에 대입해도 문제가 발생하지 않는다.

// 함수 리턴 타입의 공변성 — 1
function a(x: string): number { return 0; }
type B = (x: string) => number | string;

const b: B = a; // OK (a 리턴 타입 < B 리턴 타입)

 

반대로 a 리턴 타입이 더 넓은 타입을 갖도록 변경하면 에러가 발생한다.

// 함수 리턴 타입의 공변성 — 2
function a(x: string): number | string { return 0; }
type B = (x: string) => number;

const b: B = a; // Error (a 리턴 타입 > B 리턴 타입)

 

반공변성 | Contravariance

---

반공변성 : A가 B의 서브 타입이면, T<B>는 T<A>의 서브 타입

 

넓은 타입을 좁은 타입에 대입할 수 있는 동작을 반공변성이라고 부른다. 타입스크립트에선 함수 파라미터가 반공변성을 갖는다. — strictFunctionTypes 옵션을 켰을 때

 

아래 예시에서 넓은 타입(슈퍼 타입)을 가진 log를 좁은 타입(서브 타입)을 가진 logNumber에 대입해도 문제가 발생하지 않는다. number(log) 타입은 string | number(logNumber) 타입의 서브 타입이지만, 오히려 Logger<string | number> 가 Logger<number>의 서브 타입으로 동작하고 있다. 서브 타입이 슈퍼 타입을 커버 하는셈이다.

// 함수 파라미터의 반공변성 예시1 - 코드 참고 via seob.dev
type Logger<T> = (param: T) => void;

let log: Logger<string | number> = (param) => { console.log(param); };
let logNumber: Logger<number> = (param) => { console.log(param); };

log = logNumber; // Error
logNumber = log; // OK

 

함수 파라미터가 반공변성을 갖는 이유는 아래 코드를 보면 이해하기 쉽다. Adder 타입을 갖는 함수의 파라미터는 string, number 타입을 처리할 수 있어야 한다.

// 함수 파라미터의 반공변성 예시2 - 코드 참고 via seob.dev
type Adder = (a: string | number, b: string | number) => string | number;
let add: Adder;

add = (a: number, b: number) => { return a + b; }; // Error

 

만약 number 타입만 처리할 수 있는 함수를 할당한다면 string 타입을 처리할 수 없어서 Type-Safe 하지 않게 된다. 함수 파라미터가 반공변성을 갖는건 어찌보면 당연한 것처럼 보인다.

 

💡 함수 파라미터는 strictFunctionTypes 옵션을 켰을 땐(true) 반공변성을, 해당 옵션을 껐을 땐(false) 이변성을 가진다. strictFunctionTypes 옵션의 기본값은 true이다.

 

이변성 | Bivariance

---

이변성 : A가 B의 서브 타입일 때, T<A>는 T<B>의 서브 타입인 동시에 슈퍼 타입

 

--strictFunctionTypes 옵션을 끄면 함수 파라미터가 이변적으로 작동한다. 이변성은 공변성과 반공변성을 모두 가지는 것을 뜻한다. 즉, 함수 파라미터에 서브 타입과 슈퍼 타입을 모두 사용할 수 있다.

 

아래 예제에선 Logger<string | number | boolean>, Logger<number> 둘다 Logger<string | number> 의 서브 타입으로 동작하고 있다.

// 함수 파라미터의 이변성 예시 - 코드 참고 via seob.dev
type Logger<T> = (param: T) => void;
let log: Logger<string | number> = (param) => { console.log(param); };

log = (param: string | number | boolean) => { console.log(param); }; // OK
log = (param: number) => { console.log(param); }; // OK

 

메서드 타입 정의 방식에 따른 차이점

---

💡 Array 같은 메서드가 공변적으로 동작하도록 만들기 위해 아래 같은 차이점을 둔 것이라고 함 (참고)

 

메서드 타입을 정의하는 방식은 프로퍼티(property) 방식과 줄여쓰기(shorthand) 방식 2가지가 있다. 이 둘은 얼핏보면 같아 보이지만 미묘한 차이가 있다. 프로퍼티 방식은 반공변적으로 작동하고, 줄여쓰기 방식은 이변적으로 작동한다.

interface State<T> {
  set: (item: T) => void; // 프로퍼티 방식(반공변적)
}

interface State<T> {
  set(item: T): void; // 줄여쓰기 방식(이변적)
}

 

strictFunctionTypes 옵션이 켜져있다면 메서드 파라미터도 반공변적으로 작동한다. 아래 코드에선 서브 타입(number)을 슈퍼 타입(number | string)에 대입하고 있다. set 메서드 파라미터가 string 타입을 처리할 수 없으므로 에러가 발생한다.

interface State<T> {
  set: (item: T) => void; // 프로퍼티 방식
}

const state: State<number | string> = {
  set(item: number) { /* ... */ }, // 공변성 Error
};

 

메서드 타입 정의를 줄여쓰기 방식으로 수정하면 공변적으로도 작동해서 에러가 발생하지 않는다(이변적이 됨).

interface State<T> {
  set(item: T): void; // 줄여쓰기 방식
}

const state: State<number | string> = {
  set(item: number) { /* ... */ }, // 공변성 OK
};

const state: State<number | string> = {
  set(item: number | string | boolean) { /* ... */ }, // 반공변성 OK
};

 

번외 | 타입 포함 관계 표기법

---

• A <: B : A는 B의 서브 타입
• A -> B : 함수 파라미터 타입은 A, 반환 타입은 B

 

레퍼런스

---

• 공변성이란 무엇인가 / seob.dev
• ZeroCho Blog

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요