본문 바로가기
개발/TypeScript

Type alias와 interface 차이

by 안뇽! 2022. 1. 15.
반응형

중복되는 타입을 재사용하고 싶을 때

아래코드에서 People 타입과 Creature 타입의 species, age 속성이 중복되는것을 볼 수 있다.

interface People {
  species: string;
  age: number;
}
interface Creature {
  species: string;
  age: number;
  numOfFoot: number; //발의 개수
}

let june: People = { species: "human", age: 28 };
let 돌돌이: Creature = { species: "dog", age: 3, numOfFoot: 4 };

inferface로 작성하는 경우

위코드에서 species와 age가 겹친다. 그래서 이를 extends를 사용하여 재사용 할 수 있다.

interface People {
  species: string;
  age: number;
}
interface Creature extends People {
  numOfFoot: number; //발의 개수
}

let june: People = { species: "human", age: 28 };
let 돌돌이: Creature = { species: "dog", age: 3, numOfFoot: 4 };

index.html의 콘솔창에서도 아래와 같이 확인할 수 있다.

type alias로 작성하는 경우

type alias로 작성하는 경우에도 & 를 사용하여 아래처럼 재사용 할 수 있다.

type People ={
  species: string;
  age: number;
}
type Creature = People&{numOfFoot:number}

let june: People = { species: "human", age: 28 };
let 돌돌이: Creature = { species: "dog", age: 3, numOfFoot: 4 };

 

 

그런데 type alias는 중복선언이 되지 않는다.

interface의 경우엔 중복선언을 하면 그냥 합쳐진다.

에러가 뜨지 않는다.

차이점

  • type alias는 엄격하기 때문에 중복선언을 허용하지 않는다.
  • 하지만 interface는 type alias보다는 유연하여 중복선언을 하였을때 그냥 합친다.

이러한 이유 때문에 유지보수를 생각하거나 남들과 공유하는 코드를 작성할때는 Interface가 더 편하다고 한다.

number,string같은건 type alias로 선언하고, 객체는 interface로 작성하는것이 좋을것같다.

 

 

반응형