[4장] extends와 교차 타입의 차이에 대해서 설명해주세요

[jinsupark4255]

📝 p.126 - 128

🧐 다음 문제들에 대한 답을 적어주세요.

1. type과 interface 각각 사용할 수 있는 키워드를 작성해주세요. (extends, 유니온, 교차)

2. extends와 교차 타입은 비슷해 보여도 100% 상응하지 않을 수 있습니다. 밑에 코드에서 어째서 interface는 컴파일 오류를 발생시킬 수 있고 교차 타입은 컴파일 오류 대신 never 타입이 할당되는지 설명해주세요.

   • extends 코드 예시

     
     interface DeliveryTip {
     tip: number;
     }

interface Filter extends DeliveryTip { tip: string; // Interface 'Filter' incorrectly extends interface 'DeliveryTip' // Types of property 'tip' are incompatible // Type 'string' is not assignable to type 'number' }

- 교차 타입 예시
```tsx
type DeliveryTip = {
   tip: number;
}

type Filter = DeliveryTip & {
   tip: string;
}
//여기서 tip의 속성은 never

[YunjiNam]

1. type과 interface 각각 사용할 수 있는 키워드를 작성해주세요. (extends, 유니온, 교차)
   • type : 유니온, 교차
   • interface : extends
2. extends와 교차 타입은 비슷해 보여도 100% 상응하지 않을 수 있습니다. 밑에 코드에서 어째서 interface는 컴파일 오류를 발생시킬 수 있고 교차 타입은 컴파일 오류 대신 never 타입이 할당되는지 설명해주세요.
   • interface 에서 상속받은 속성의 타입은 하위 interface에서 재정의할 수 있지만, 해당 속성의 타입은 부모 interface 와 호환되어야 하기 때문에 에러가 발생합니다.
   • interface 와 다르게 type 은 타입 호환성 검사를 강하게 하지 않아 동일한 이름의 속성을 가진 경우 해당 속성의 타입을 결합합니다. 만약 두 타입이 호환되지 않으면 never 타입이 됩니다.

[dlantjdgkgk]

윤지님의 말씀에 첨언을 하자면 주어진 코드 패턴은 타입 안전성을 강화하거나 특정 상황에서 타입 에러를 의도적으로 발생시키기 위해 사용될 수 있다고 합니다.

대안적 접근 type DeliveryTip = { tip: number; }

type Filter = Omit<DeliveryTip, 'tip'> & { tip: string; }

const result: Filter = { tip: "5" // 이제 유효합니다. }

[hyejj19]

type : 유니온, 교차타입 => type 키워드는 이 타입이 어떤 범위를 가진 값이 될거다~ 에 가까운 역할을 합니다. interface : extends

두 키워드의 방식 간 차이는 윤지님 설명이 맞는 것 같고요... 추가적으로 왜 이런식의 타입 재정의를 금지하는지 조금 찾아봤는데 타입간의 호환성과 안정성을 유지하기 위함이라고 합니다. 타입 호환성이라는 것은 extends 가 부모 타입으로 부터 자식 타입을 만들어 내는 것이기 때문에 이런 상속의 일관성 유지 차원에서 방지하고자 하는 것 같습니다.