Interface VS Type Alias

Interface

• 인스턴스를 생성하는 class 처럼, 특정한 규칙을 담고 있는 것을 구현할 때 사용하는 것이 적절하다.

1. 기존에 존재하는 인터페이스의 프로퍼티 확장

interface Person {
  name: string;
  age: number;
}
//
interface Person {
  gender: string;
}
//
const yongmin: Person = {
  name: "yongmin",
  age: 29,
  gender: "male",
};

• 기존 존재하던 인터페이스에 새로운 프로퍼티를 추가할 수 있다.

• 동일한 이름의 인터페이스에 추가하고자 하는 프로퍼티 값만 적어주면 된다. (공식문서에서는 동일한 인터페이스가 존재할 경우, 해당 필드값들을 merge해준다고 표현하고 있다. 새로운 프로퍼티를 추가한다고 봐도 무방한 것같다.)

2. 인터페이스 상속을 통한 확장

interface Person {
  name: string;
  age: number;
}
//
const yongmin: Person = {
  name: "yongmin",
  age: 29,
};
//
interface PersonPlus extends Person {
  gender: string;
}
//
const yongminPlus: PersonPlus = {
  name: "yongmin",
  age: 29,
  gender: "male",
};

• 클래스처럼 extends 키워드를 사용하여 상속을 통해 기존 인터페이스를 확장 후 사용할 수있다.

type Alias

• 단순히 데이터를 담을 목적으로 사용한다면, type Alias를 사용하는 것이 적절하다.

1. 타입 Alias 인터섹션을 통한 확장

type Person = {
  name: string;
  age: number;
};
//
const yongmin: Person = {
  name: "yongmin",
  age: 29,
};
//
type PersonPlus = Person & {
  gender: string;
};
//
const yongminPlus: PersonPlus = {
  name: "yongminPlus",
  age: 29,
  gender: "male",
};

• 인터페이스와 다르게, 한번 생성된 타입에 추가로 프로퍼티를 생성할 수 없다. (중복 선언시 오류 발생) 따라서 기존 타입을 수정하여 사용알 수 없다.

• intersection을 통해서만 프로퍼티를 확장하여 다른 이름의 타입으로 지정 후 사용할 수 있다.