[item 14] readonly T[]가 T[]보다 넓은 타입인 이유는 뭘까요?

[vlmbuyd]

📖 참고한 페이지

책 92p에는 이런 문장이 나옵니다.

T[]는 readonly T[]에 비해서 확실히 더 많은 기능을 가지므로 T[]는 readonly T[]의 서브타입이라고 할 수 있습니다

저는 처음에 "readonly T[]는 읽기만 되니까 더 제한적이고, T[]가 더 넓은 슈퍼타입 아닌가?"라고 생각했습니다.

이름에서 풍기는 뉘앙스로 readonly를 마치 "제약"처럼 받아들이다 보니 집합 관점에서 봤을 때 혼동이 생겼던 것 같습니다.
(처음 생각: "읽기"만 가능하니까 더 제한적이다!)

결과적으로 책에서는 readonly T[]를 더 넓은 슈퍼타입으로, T[]를 서브타입으로 설명하는데요.
"서브타입과 슈퍼타입을 무엇을 기준으로 나누는가"를 readonly 관점까지 포함하여 정리해보면 좋을 것 같습니다.

❓ 질문 / 문제

[질문]

다음 코드 중 하나는 통과하고 하나는 에러가 납니다. 각각 왜 그럴까요?

const a: number[] = [1, 2, 3];

const b: readonly number[] = a;  // ?
const c: number[] = b;             // ?

[심화]

아래 두 인터페이스에서는 Dog가 Animal의 서브타입입니다.
프로퍼티가 더 많은 쪽이 서브타입이 되는 셈인데요.

interface Animal { name: string }
interface Dog { name: string; bark(): void }

위 배열 예시와 이 예시를 하나의 기준으로 함께 설명할 수 있을까요?
집합 관점에서 슈퍼 vs 서브 타입을 판별하는 기준을 본인만의 언어로 정리해 볼 수 있다면 좋을 것 같습니다.

[bel1c10ud]

타입스크립트의 타입은 기본적으로 열려 있기 때문에, 프로퍼티가 정확히 일치하지 않아도 필요한 프로퍼티를 모두 가지고 있으면 해당 타입으로 사용할 수 있습니다.

number[]는 readonly number[]의 프로퍼티를 모두 가지면서 push, pop과 같은 프로퍼티도 가지고 있습니다.

const b: readonly number[] = a; // 정상
const c: number[] = b; // 오류

반면 readonly number[]는 push, pop과 같은 프로퍼티를 가지고 있지 않기 때문에 number[]로 사용할 수 없습니다. 즉 number[]는 readonly number[]보다 좁은 타입이 됩니다.

Dog와 Animal도 같은 기준으로 볼 수 있습니다. Dog는 Animal에 필요한 name을 가지면서 bark까지 추가로 가져야 합니다. 만족해야 하는 조건이 더 많기 때문에 Dog에 속하는 값의 수가 더 적고, Dog가 Animal의 서브타입이 됩니다.

[yundol777]

readonly number[] 타입은 number[] 타입보다 더 넓은 타입입니다.

const b: readonly number[] = a; // 정상
const c: number[] = b; // 오류

따라서 아래는 좁은 타입에 넓은 타입을 할당하려고 해서 오류가 발생합니다.

심화도 마찬가지 입니다. Animal 타입은 Dog 타입보다 더 넓은 타입입니다.

앞으로 타입의 좁고 넓음은 제약의 정도에 따라 구분할 것 같습니다.

• Dog는 Animal보다 bark 메소드에 대한 제약이 추가되므로, 상대적으로 더 좁은 타입입니다.
• number[]는 readonly number[] 보다 쓰기 가능에 대한 제약이 추가되므로, 상대적으로 더 좁은 타입입니다.