[TS 2주차] 타입 별칭 vs 인터페이스 : 차이점은 무엇이고, 무엇을 써야하는가!

타입 별칭이란?

특정 타입이나 인터페이스 등을 참조할 수 있는 타입 변수

---

🌞 차이점 1. 코드 에디터에서 표기 방식 차이

타입 별칭 : 마우스 커서를 올리면 타입정보가 미리 보기 화면으로 표시됨.

인터페이스 : interface 이름 형태로만 표시됨.

 

타입 별칭 승!

: 구체적으로 어떤 내용을 담고 있는지 파악할 때 용이하다.

 

🌞 차이점 2. 사용할 수 있는 타입의 차이

타입 별칭 : 일반 타입 이름짓기 / 유니언 타입/ 인터섹션 타입 / 제네릭 / 유틸리티 타입 등에도 사용 가능

인터페이스 : 주로 객체의 타입을 정의하는 데 사용 (일반 / 유니언/ 인터섹션/유틸리티/ 맵드 타입 정의 불가)

 

타입 별칭 승!

: 인터페이스로는 정의할 수 없는 것을 타입 별칭은 정의할 수 있다!

 

🌞 차이점 3. 확장성 (서로 다른 확장 방법)

타입 별칭: 인터센션(&) 타입으로 객체 타입 2개를 합쳐서 사용 (ex. let solmi: User & Developer = { } )

인터페이스:

- 상속 개념 이용 (ex. interface Developer  extends User {  } )

- 선언 병합 (동일한 이름으로 인터페이스 선언하면 인터페이스 내용을 합치는 특성)

 

인터페이스 승!

: 둘 다 확장 가능하지만 인터페이스가 조금 더 유연하다. (때론 타입 별칭을 쓰기도 함)

 

📌 공식문서는 어떤 것을 권장할까?

(과거)  좋은 소프트웨어는 확장이 용이해야한다는 점에서 타입 별칭보당 인터페이스 사용을 권장한다.

(현재)  인터페이스를 주로 사용해보고 타입 별칭이 필요할 때 타입 별칭을 사용하는 것을 권장한다.

 

📌 결론을 어떻게..?

 타입 별칭으로만 타입 정의가 가능한 곳에선 타입 별칭 사용하고 백엔드와의 인터페이스를 정의하는 곳에서는 인터페이스를 이용하자!

 

1. 타입 별칭만 정의할 수 있는 것은 타입 별칭으로!

: 일반 / 유니언/ 인터섹션/유틸리티/ 맵드 타입

 

2. 백엔드와의 인터페이스에선 인터페이스가 유리!

-  인터페이스 : 영역 간 접점을 서로 맞추는 작업

-  인터페이스 : 타입스크립트의 인터페이스

 

- 확장 측면에서 타입 별칭보다 인터페이스가 유연함

 

 

출처: 쉽게 시작하는 타입스크립트. 장기효 지음.

 

cf) 인터페이스 예제 코드 (명시적 this)

interface Cat {
  name: string
  age:number
}
const cat: Cat {
  name: 'Lucky'
  age: 4
}

function hello(this:Cat, message: string){ //this는 매개변수 아님. 매개변수는 message만
  console.log(`Hello ${this.name}, ${message}`)
}
hello.call(cat, 'You are pretty awesome!')
//Hello Lucky, You are pretty awesome!