인터페이스 확장하기

한 입 크기로 잘라먹는 타입스크립트 - 인터페이스 확장하기

1. 인터페이스의 확장
Animal 인터페이스의 서브 인터페이스 3가지를 생성하였다.

- chapter1.ts

/**
 * 인터페이스의 확장
 */
interface Animal {
    name: string;
    age: number;
}

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

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

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

name, age 프로퍼티가 4번이나 반복된다.
중복되는 프로퍼티를 지우고 extends 키워드를 사용하여 확장한다. 다른 말로 상속이라고도 불린다.

- chapter1.ts

/**
 * 인터페이스의 확장
 */
interface Animal {
    name: string;
    color: string;
}

// sub1
interface Dog extends Animal {
    isBark: boolean;
}

const dog: Dog = {
    name: 'dog'
  , color: 'blue'
  , isBark: true
};

// sub2
interface Cat extends Animal {
    isScratch: boolean;
}

// sub3
interface Chicken extends Animal {
    isFly: boolean;
}

 

2. 부모와 동일한 프로퍼티의 타입 재정의
상속을 받는 인터페이스에서 부모와 동일한 프로퍼티의 타입을 다시 정의할 수 있다.
한 가지 규칙이 있다면, 다시 정의하려고 하는 타입은 부모가 가진 원본 타입의 서브 타입이어야 한다.

- chapter1.ts

/**
 * 부모와 동일한 프로퍼티의 타입 재정의
 */
interface Animal {
    name: string;
    color: string;
}

// sub1
interface Dog extends Animal {
    name: 'hello';
    isBark: boolean;
}

const dog: Dog = {
    // name: number // 서브타입이 아니기 때문에 오류
    name: 'hello'
  , color: 'blue'
  , isBark: true
};

3. 타입 별칭 확장하기
인터페이스는 객체 타입이면 다 확장할 수 있다.

- chapter1.ts

/**
 * 타입 별칭 확장하기
 */
type Animal = {
    name: string;
    color: string;
}

// sub1
interface Dog extends Animal {
    isBark: boolean;
}

4. 다중 확장
인터페이스는 여러가지 인터페이스를 다중으로 확장이 가능하다.

- chapter1.ts

/**
 * 타입 별칭 확장하기
 */
interface Animal {
    name: string;
    color: string;
}

// sub1
interface Dog extends Animal {
    isBark: boolean;
}

// sub2
interface Cat extends Animal {
    isScratch: boolean;
}

interface DogCat extends Dog, Cat {}

// Dog 타입과 Cat 타입이 가진 모든 프로퍼티들을 다 가짐
const dogCat: DogCat = {
    name: 'dogcat'
  , color: 'red'
  , isBark: true
  , isScratch: true
}

참고링크 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8#

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