👶 TypeScript

인터페이스

개발자 린다씨 2023. 1. 15. 12:00
반응형

인터페이스

클래스는 인터페이스를 통해 사용할 때가 많습니다.

 

타입 별칭처럼 인터페이스도 타입에 이름을 지어주는 수단이므로 인터페이스를 사용하면 타입을 더 깔끔하게 정의할 수 있습니다.

 

타입 별칭과 인터페이스는 문법만 다를 뿐 거의 같은 기능을 수행하며, 작은 몇몇 부분에서만 차이를 보입니다.

 

먼저 둘의 공통점을 살펴보겠습니다.

 

아래 코드는 타입 별칭입니다.

type RiceCake = {
    calories: number
    salty: boolean
    tasty: boolean
}

이 코드를 다음처럼 간단하게 인터페이스로 바꿀 수 있습니다.

interface RiceCake {
    calories: number
    salty: boolean
    tasty: boolean
}

RiceCake 타입 별칭을 사용한 모든 곳에 RiceCake 인터페이스를 대신 사용할 수 있습니다.

 

둘 다 형태(shape)를 정의하며 두 형태 정의는 서로 할당할 수 있습니다.(실제로 둘은 같은 존재입니다.)

 

타입을 조합하기 시작하면 더 흥미로운 일이 벌어집니다. RiceCake 외에 다른 음식도 만들어보겠습니다.

type KimBob = {
    calories: number
    carrot: boolean
    tasty: boolean
}

RiceCake와 KimBob뿐 아니라 많은 음식이 calories(칼로리)와 tasty(맛) 프로퍼티를 포함합니다. 

 

그러니 Food라는 타입을 따로 빼서 공통 정보를 정의하고 다른 음식들도 Food를 이용해 다시 정의할 수 있습니다.

type Food = {
    calories: number
    tasty: boolean
}

type RiceCake = Food & {
    salty: boolean
}

type KimBob = Food & {
    carrot: boolean
}

위의 코드를 인터페이스로 정의할 수도 있습니다.

interface Food {
    calories: number
    tasty: boolean
}

interface RiceCake extends Food {
    salty: boolean
}

interface KimBob extends Food {
    carrot: boolean
}

※ 인터페이스가 반드시 다른 인터페이스를 상속받아야 하는 것은 아닙니다. 사실 인터페이스는 객체 타입, 클래스, 다른 인터페이스 모두 상속받을 수 있습니다.

 

타입 별칭과 인터페이스는 미묘하지만 세 가지 면에서 차이가 납니다.

  1. 타입 별칭은 더 일반적이어서 타입 별칭의 오른편에는 타입 그리고 &, | 등의 타입 연산자를 포함한 모든 타입이 등장할 수 있습니다. 반면 인터페이스의 오른편엔 반드시 형태가 나와야 합니다. 예를 들어 아래와 같은 타입 별칭 코드는 인터페이스로 다시 작성할 수 없습니다.
    • type A = number
    • type B = A | string
  2. 인터페이스를 상속할 때 TypeScript는 상속받은 인터페이스의 타입에 상위 인터페이스를 할당할 수 있는지를 확인합니다. 아래의 예시를 살펴봤을 때 인터섹션 타입을 사용하면 상황이 달라집니다. 아래 예시에서 인터페이스는 타입 별칭으로 바꾸고 extends는 인터섹션(&)으로 바꾸면 TypeScript는 확장하는 타입을 최대한 조합하는 방향으로 동작합니다. 결과적으로 컴파일 에러가 발생하지 않고 bad를 오버로드한 시그니처가 만들어집니다.
    • interface A {
      • good(x: number): string
      • bad(x: number): string
    • }
    • interface B extends A {
      • good(x: string | number): string
      • bad(x: string): string // 'number' 형식은 'string' 형식에 할당할 수 없습니다. ts(2430)
    • }
  3. 이름과 범위가 같은 인터페이스가 여러 개 있다면 이들이 자동으로 합쳐집니다. 같은 조건에서 타입 별칭이 여러 개라면 컴파일 타임 에러가 납니다. 이를 선언 합침이라 부릅니다.
반응형