extends와 교차 타입의 차이점은?

[devsomda]

📚 127p - 128p 📌 extends 키워드를 사용한 타입과 교차 타입이 상응하지 않는 예시를 설명해 주세요.

[kwonhygge]

extends 키워드를 사용하여 interface A { name: string } 라는 타입을 만들고 interface B extends A { name: id } 라는 타입을 만들면 타입이 호환되지 않는다는 에러가 납니다.

교차타입을 사용하여 type A = { name: string } 라는 타입을 만들고 type B = A & { name: id } 라는 타입을 만들면 에러가 나지 않습니다. 왜냐하면 type 키워드는 선언시에 타입 충돌에 대해 미리 검사하지 않고 사용할때 검사하기 때문입니다.

[frogk]

• extends 키워드 사용시

`interface DeliveryTip { tip: number; }

interface Filter extends DeliveryTip { tip: string }` DeliveryTip 타입은 number타입의 tip속성을 가지고 있습니다. 이때, extends로 확장한 Filter 타입에 string 속성을 가진 tip을 선언하는 경우 tip 의 타입이 호환되지 않는다는 에러가 발생합니다.

• 교차 타입 사용시 `type DeliveryTip { tip: number; }

type Filter = DeliveryTip & { tip: string }` type 키워드는 교차타입으로 선언되었을 때 새롭게 추가되는 속성에 대해 미리 알수 없기 때문에 선언시 에러가 발생하지 않습니다. 하지만 타입을 사용할때 에러가 발생하게 됩니다. string과 number의 교집합은 없기 때문에 tip 속성은 never가 되므로 string이나 number를 사용하면 에러가 발생하게됩니다.

[hotdog1004]

extends 키워드를 사용한 타입은 교차 타입과 100% 상응하지 않습니다.

extends 키워드를 사용한 타입

interface DeliveryTip {
  tip: number;
}
interface Filter extends DeliveryTip {
  tip: string;
  // error 발생
}

• DeliveryTip을 확장한 Filter 타입에 string 타입 속성 tip을 선언하면 tip의 타입이 호환되지 않는 다는 에러가 발생합니다.

  교차 타입

  
  type DeliveryTip = {
  tip: number;
  };

type Filter = DeliveryTip & { tip: string; // 에러가 발생하지 않음 };

- type 키워드는 교차타입으로 선언되었을 때 새롭게 추가되는 속성에 대해 미리 알 수 없기 때문에 에러가 발생하지 않습니다.
- 하지만 tip이라는 같은 속성에 대해 서로 호환되지 않는 타입이 선언되어 never 타입이 됩니다.

[limejin]

interface DT{
tip : number;
}

interface F extends DT{
tip : string;
}

tip의 타입이 호환되지 않는 에러가 발생합니다.

type DT{
tip : number;
}

type F = DT&{
tip : string;
}

에러가 발생하지는 않지만 tip의 속성은 never가 됩니다.

[samseburn]

간단하게 말하면 extends는 확장의 개념, type의 교차 타입은 조합의 개념으로 볼 수 있습니다.

type A = { name: string }
type B = A & { name: number }  // { name: never }

위의 type으로 정의한 코드는 가능하지만

interface A { 
  name: string 
}
interface B extends A { 
  name: number
} // error

interface로 동일하게 타입 정의하면 에러가 납니다.