TypeScript) 커스텀 타입 vs 인터페이스

두 개 중 뭘 사용해야 되나? 거의 비슷해서 서로 immigration해도 문제 없는 경우가 대부분이긴 한데

사소한 차이점들이 있긴 하다.

 

차이1: 문법

커스텀 타입은 등호를 이용하여 값을 할당한다.

// 타입은 등호를 활용하여 값을 할당해준다.
type Credit = number

type People = {
    name: string;
    age: number;
}

type Id = string | number

인터페이스는 객체 형식꼴로 만든다.

// 인터페이스는 객체 형식 혹은 클래스 형식과 비슷하게 생겼다.
interface GreenThings {
	tree: string[];
    jewel: string[];
    brand: string[];
}

interface Korean {
    name: string;
	idCard: number;
    
	eatKimchi(): void {
    	console.log("Taste Good")
    }
}

 

차이2: 만들수 있는 범위

type: 유니언 타입, 함수 타입, 원시형 타입도 가능하다. 물론 객체도 가능하다.
interface: 객체 형식만 가능하다.

type이 더 유연해서 좋아보일지 몰라도 정확히 객체를 만들려는 의도가 있다면 의미적으로 interface를 사용하는게 좋다.

물론 다들 취향껏 사용하긴 한다.

 

 

차이3: interface로는 클래스를 만들 수 있다.

interface로 틀을 만든 다음에 클래스도 그에 맞춰 만들면, 적어도 어떤 메소드는 있겠구나 유추할 수 있게 된다.

⇒ 사실 클래스가 일정한 형태를 만들기 위한건데 그 클래스를 일정한 형태로 만들기 위해 쓰다니..

⇒ 일정한 형태를 만들기 위해 일정한 형태를 만드는거 아닌가?…

class Person implements Greetable {
  //class인데 interface인 Greetable의 형식을 상속받는다.
  readonly name: string;
  age = 30;

  constructor(n: string) {
    this.name = n;
}

class Person implements Greetable, Named { // 2개 중첩 가능
  //class인데 interface인 Greetable의 형식을 상속받는다.
  readonly name: string;
  age = 30;

  constructor(n: string) {
    this.name = n;
}

 

 

또한 인터페이스는 js로 컴파일 될 때 그 흔적이 남지 않는다. 자바스크립트엔 없는 기능이니까. 개발전용기능으로 보면 된다.