Type Extension

홍범선·2023년 10월 22일
0

타입스크립트

목록 보기
16/34

Interface Extension

interface IName{
  name:string;
}

interface IIdol extends IName{
  age:number;
}

const idol:IIdol = {
  name: '안유진',
  age:23
} 

인터페이스는 상속을 받을 수 있다. merging이랑 비슷하다. merging은 같은 이름이여지 머징되지만 extends는 다른 이름이여도 상관없다.

Type Extension

type TName = {
  name:string;
}

type TIdol = TName & {age: number};

const idol2 : TIdol = {
  name:'아이유',
  age:29
}

Type에서 extension을 할 때에는 &기호를 사용한다.

Interface와 Type Extension

interface IIdol2 extends TName{
  age:number;
}

const idol3: IIdol2 ={
  name:'제니',
  age:29
} // 인터페이스로 타입을 상속받을 수 있다. 인터페이스에서 상속할 떄에는 extends키워드를 쓴다.

인터페이스에서 Type또한 상속 받을 수 있다. 이 때도 마찬가지로 extends를 사용한다.

Type과 Interface Extension

type TIdol2 = IName & {
  age:number;
}

const idol4:TIdol2 = {
  name:'지수',
  age:31
} // 타입에서 인터페이스를 상속받을 수 있다. 타입에서 상속받을 떄에는 & 쓴다.

Type에서 Interface를 extension할 수 있다. 이 때 & 기호를 사용한다.

Extension은 무한히 가능

type DogName = {
  name:string;
}

type DogAge = {
  age : number;
}

type DogBreed = {
  breed:string;
}

type Dog = DogName & DogAge & DogBreed ; // 무한히 연결할 수 있다.

const dog: Dog = {
  name:'코드팩토리',
  age : 32,
  breed :'poodl'
}

interface CatName{
  name:string;
}
interface CatAge{
  age:number;
}
interface Cat extends CatName, CatAge{
  breed: string;
}

const cat: Cat = {
  name : '오리',
  age: 7,
  breed:'냥냥이'
}

type과 interface 둘 다 확장은 무한히 가능하다.

type과 interface 오버라이딩 차이점

type THeight = {
  height: number;
}

type TRectangle = THeight & {
  height : string;
  width:number;
} 
// extends한 높이는 number였지만 새로 선언한 height는 string이다.

// const rectangle: TRectangle = {
//   width:100
//   // height:100 //height는 never타입이됨 number타입과 string타입이 동시에 되야하는데 이때 never타입으로 변한다.
// } //중복으로 프로퍼티를 선언할 때에는 꼭 같은 타입으로 입력해주어야 함

type TWidth = {
  width:number | string;
}
type TRectangle2 = TWidth & {
  width:number;
  height:number;
}

const rectangle: TRectangle2 = {
  height:100,
  width:200 //이 때 숫자로 넣어주어야함, number로 네로잉이 됨
}

지금 height가 중복으로 되어 있는 것을 볼 수 있다. type에서 &는 타입에서도 작용하는데 number타입과 string타입을 동시에 만족시킬 수는 없다. 그래서 never타입이 된다.
반면에 number | string으로 유니온이 되어 있으면 구체적으로 number가 된다.

interface IHeight{
  height : number;
}

interface IRectangle extends IHeight{
  //height:string ; //인터페이스는 같은 프로퍼티 끼리는 같은 시그니처를 사용해야 하기떄문에 에러가 발생한다. number는 발생안함
  width:number;
}

interface IWidth{
  width: number| string;
}
interface IRectangle extends IWidth{
  width:number; // number, string, number|string가능 boolean타입 불가능
  height:number;
}

인터페이스는 같은 프로퍼티 끼리는 같은 시그니처를 사용해야 하기 때문에 에러가 발생한다.

결론 => 인터페이스에서 never타입으로 선언되는 상황은 아예 에러가 발생한다. 타입은 선언은 가능하나 never타입으로 된다.

profile
알고리즘 정리 블로그입니다.

0개의 댓글