[TS] 인터페이스 확장

인터페이스 확장이란 하나의 인터페이스를 다른 인터페이스들이 상속받아 중복된 프로퍼티를 정의하지 않도록 도와주는 문법이다.

[TS] 인터페이스

 

interface 타입이름 extends 확장_할_타입이름

이렇게 extends 뒤에 확장할 타입의 이름을 정의하면 해당 타입에 정의된 모든 프로퍼티를 다 가지고 오게 된다.

interface Animal {
  name: string;
  color: string;
}

interface Dog extends Animal {
  isBark: boolean;
}

interface Cat extends Animal {
  isScratch: boolean;
}

interface Chicken extends Animal {
  isFly: boolean;
}

const dog: Dog = {
  name: "야옹",
  color: "white",
  isBark: true,
};

Dog, Cat, Chicken 인터페이스는 모두 Animal 인터페이스를 확장하므로, name과 color 프로퍼티를 자동으로 가진다.

이때 확장 대상 타입인 Animal은 Dog 타입의 슈퍼타입이 된다.

 

프로퍼티 재정의하기

확장과 동시에 프로퍼티의 타입을 재정의할 수 있다.

interface Animal {
  name: string;
  color: string;
}

interface Dog extends Animal {
  name: "wawa"; // 타입 재정의
  breed: string;
}

Dog 인터페이스에서 name 프로퍼티를 string에서 "wawa" 리터럴 타입으로 재정의했다.

 

주의할 점은 프로퍼티를 재정의할 때 원본 타입을 A, 재정의된 타입을 B라고 하면 반드시 A가 B의 슈퍼타입이 되도록 재정의해야 한다는 것이다.

Dog타입이 Animal타입을 확장한다는 것은 Animal타입의 서브타입이 된다는 의미이다. 그런데 name 프로퍼티를 number 타입으로 재정의하면 더 이상 Dog는 Animal 타입의 서브타입이 아니게 된다. 따라서 이런식의 재정의는 불가능하다.

 

타입 별칭을 확장하기

인터페이스는 타입 별칭으로 정의된 객체 타입도 확장할 수 있다.

type Animal = {
  name: string;
  color: string;
};

interface Dog extends Animal {
  breed: string;
}

 

이렇게 Animal이 타입 별칭으로 정의되어 있어도 인터페이스에서 확장 가능하다.

 

다중 확장

인터페이스는 여러 개의 인터페이스를 동시에 확장할 수 있다.

interface DogCat extends Dog, Cat {
  // Dog와 Cat의 모든 프로퍼티를 가짐
}

 

이렇게 ,로 구분하여 여러 타입을 확장하면 모든 프로퍼티를 상속받는다.