[TypeScript] 인터페이스 확장

👾 인터페이스 확장

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

interface Animal {
  name: string;
  age: number;
}

interface Dog {
  name: string;
  age: number;
  isBark: boolean;
}

interface Cat {
  name: string;
  age: number;
  isScratch: boolean;
}

interface Chicken {
  name: string;
  age: number;
  isFly: boolean;
}

각 타입들은 Animal 타입을 기반으로 각각 추가적인 프로퍼티를 갖고 있다.

모든 타입에는 name, age 프로퍼티가 중복해서 정의되어 있어 Animal 타입의 프로퍼티가 변경되는 경우 나머지 타입들도 모두 수정해야 한다.

현재는 3개의 타입만 변경하면 되지만 타입의 수가 더 많아진다면,,,??

 

 

 

 

이처럼 특정 인터페이스를 기반으로 여러개의 인터페이스가 파생되는 경우 인터페이스의 확장 기능을 이용하면 편리하다.

// 중복되는 프로퍼티를 Animal 타입에서 받아오기 -> 인터페이스 확장
interface Dog extends Animal{ // 인터페이스 Dog는 Animal의 확장
    isBark: boolean;
};

const dog: Dog = {
    name: '만복',
    age: 1,
    isBark: true,
}

interface Cat extends Animal { // Cat은 Animal의 확장
    isScratch: boolean;
};

interface Chicken extends Animal  { // Chicken은 Animal의 확장
    isFly: boolean;
};

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

확장 할 타입 이름에 정의된 모든 프로퍼티를 다 가지고 오게 되므로 dog의 name, age 프로퍼티에 접근이 가능하다.

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

 

 

 

 

 

 

 

👾 프로퍼티 재정의

확장과 동시에 프로퍼티의 타입을 재정의하는 것이 가능하다.

interface Dog extends Animal{ // 인터페이스 Dog는 Animal의 확장
    // 타입 재정의 가능
    name: 'doldol';
    isBark: boolean;
};

const dog: Dog = {
    name: '만복', // ❌ 
    age: 1,
    isBark: true,
}

 

프로퍼티를 재정의할 때, 원본 타입 A가 재정의된 타입 B의 슈퍼 타입이 되어야한다.

interface Dog extends Animal {
  name: number; // ❌
  isBark: boolean;
}

Dog 타입은 Animal 타입을 확장한 타입으로 Animal 타입의 서브타입이 된다. 그런데 Animal 타입에서 가져온 name 프로퍼티를 number 타입으로 재정의하게 된다면 이제 Dog는 Animal 타입의 서브 타입이 아니게 된다.

 

 

 

 

 

 

👾 타입 별칭 확장

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

// 타입 별칭의 경우에도 확장이 가능 -> 인터페이스는 객체 타입이면 모두 확장이 가능
type Animal = {
    name: string;
    age: number;
};

interface Dog extends Animal{
    isBark: boolean;
};

즉, 인터페이스는 객체 타입이라면 모두 확장이 가능하다.

 

 

 

 

 

 

 

👾 다중 확장

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

// 다중 확장
interface DogCat extends Dog, Cat {
    
};

const dogCat: DogCat = {
    name: '',
    age: 2,
    isBark: true, // Dog 타입의 프로퍼티
    isScratch: true, // Cat 타입의 프로퍼티
};

 

 

 

 

 

 

---

🔗 타입스크립트 강의

한 입 크기로 잘라먹는 타입스크립트(TypeScript) - 인프런 | 강의