실시간강의 때 강사님께서 타입의 이름을 지정하는 방법으로 타입별칭과 interface의 대한 미묘한 차이가 있어 취업 면접때 어떤걸 사용하는지의 이유와 함께 물어보는 경우가 종종 있다고하여 차이점에 대해 추가적인 공부가 필요하다고 하셨다.

🔗 Interface & Type 별칭

Interface

interface User {
  name: string,
  age: number
}

타입별칭

type User = {
  name: string,
  age: number
}

문법적으로도 매우 유사하다..

🔗 차이점

확장

Interface는 extends를 이용해서 확장하고 타입별칭은 &(Intersection)을 이용해서 확장한다.

Interface

interface User {
  name: string
}
interface Age extends User {
  age: number
}
const sumin: Age = {
  name: "sumin",
  age: 10,
}

타입별칭

type User = {
  name: string
}
type Age = User & {
  age: number
}
const sumin = {
  name: "sumin",
  age: 10
}

병합

Interface는 같은 이름으로 두개가 선언되면 병합이 되지만 타입별칭은 병합이 되지 않는다.

Interface

interface User {
  name: string
}
interface User {
  age: number
}
const sumin: User = { // 병합
  name: "sumin",
  age: 10,
}

타입별칭

type User = {
  name: string
}
type User = {
  age: number
}
// 타입에러

타입별칭은 같은 이름으로 두개이상을 선언 할 수 없다.
타입의 이름이 겹치거나 병합되는 것을 방지하고자 한다면 타입별칭을 사용해야 할 것 같다.

🔗 공통점

Implements

extends처럼 부모클래스의 프로퍼티나 메소드를 상속받아서 사용하는 것이 아닌 implements는 클래스의 모양을 정의할때 사용한다.

class User {
  name = "sumin"

  adress(){
    return "seoul"
  }
}

interface Age = {
  age: number
}
// or 
type Age = {
  age: number
}

class sumin implements User, Age {
// implements 는 extends와 다르게 상속받은 부모의 속성이 전부 명시되어있어야함
  name = "sumin"
  age = 10

  adress(){
    return "seoul"
  }
}

새로운 타입 생성

| 연산자를 사용하여 새로운 union 유형을 생성 할 수 있다.

Interface

interface Name {
  name: string
}
interface Age {
  age: number
}
type User = Name | Age // union
const sumin: User = { 
  name: "sumin",
  age: 10,
}

타입별칭

type Name = {
  name: string
}
type Age = {
  age: number
}
type User = Name | Age // union
const sumin: User = { 
  name: "sumin",
  age: 10,
}

새로운 union유형의 선언은 항상 type으로 해주어야한다.