#11[4장_1] interface와 type 키워드는 각각 타입 확장하는 방법이 다릅니다. 이 둘의 차이점이 무엇인지 말해주세요.

[hyeyoonS]

❓문제

interface와 type 키워드는 각각 타입 확장하는 방법이 다릅니다. 이 둘의 차이점이 무엇인지 말해주세요.

🎯답변

소은님 답변이 완벽한 것 같아 그대로 들고 왔습니다😂

• interface

  • extends 키워드를 이용해서 확장할 수 있다.

    interface Person {
        name: string;
        age: number;
    }
    
    interface Student extends Person {
        school: string;
    }
    
    const Soeun: Students = {
        name: 'Soeun',
        age: 26,
        school: 'Codeit'
    }

  • 선언적 확장이 가능하다.

    interface Person {
      name: string;
      age: number;
    }
    
    interface Person { // 선언적 확장
      gender: string;
    }
    
    const jieun: Person = {
      name: 'Soeun',
      age: 26,
      gender: 'female'
    }

• type

  • & 을 이용해서 확장할 수 있다.

    type Person = {
      name: string,
      age: number
    }
    
    type Student = Person & { // 확장(상속)
      school: string
    }
    
    const jieun: Student = {
      name: 'Soeun',
      age: 26,
      school: 'Codeit'
    }

  • 선언적 확장이 불가능하다.

    type Person = {
      name: string;
      age: number;
    }
    
    type Person = { // Error
      gender: string;
    }

[qooktree1]

interface

• 주로 객체 타입을 정의하고 확장할 때 유용합니다.
• extends 키워드를 사용하여 다른 interface를 확장할 수 있습니다.

  
  interface Rectangle {
  width: number;
  }

interface Rectangle { height: number; }

const rect = { width: 5, height: 2 }

const func = (param: Rectangle) => param.width * param.height; func(rect)

### type
- 선언 병합을 지원하지 않지만 복잡한 타입 조합이나 유니온 타입을 사용할 때 유용합니다.
```ts
interface Circle {
    figureType: 'circle';
    radius: number;
}

interface Rectangle {
    figureType: 'rectangle';
    width: number;
    height: number;
}

interface Triangle {
    figureType: 'triangle';
    width: number;
    height: number;
}

type Shape = Circle | Rectangle | Triangle;

[summerkimm]

• interface

  • extends 키워드를 이용해서 확장할 수 있다.

    interface Person {
        name: string;
        age: number;
    }
    
    interface Student extends Person {
        school: string;
    }
    
    const Soeun: Students = {
        name: 'Soeun',
        age: 26,
        school: 'Codeit'
    }

  • 선언적 확장이 가능하다.

    interface Person {
      name: string;
      age: number;
    }
    
    interface Person { // 선언적 확장
      gender: string;
    }
    
    const jieun: Person = {
      name: 'Soeun',
      age: 26,
      gender: 'female'
    }

• type

  • & 을 이용해서 확장할 수 있다.

    type Person = {
      name: string,
      age: number
    }
    
    type Student = Person & { // 확장(상속)
      school: string
    }
    
    const jieun: Student = {
      name: 'Soeun',
      age: 26,
      school: 'Codeit'
    }

  • 선언적 확장이 불가능하다.

    type Person = {
      name: string;
      age: number;
    }
    
    type Person = { // Error
      gender: string;
    }

[hyeyoonS]

타입을 확장하는 방법

1) interface에서의 타입 확장

• interface : 하나의 인터페이스를 다른 인터페이스들이 상속받아 중복된 프로퍼티를 정의하지 않도록 도와주는 문법
• extends 키워드 사용

interface BaseMenuItem {
    itemName: string | null;
    itemImageUrl: string | null;
    itemDiscountAmount: number;
    stock: number | null;
};

interface BaseCartItem extends BaseMenuItem {
    quantity: number;
}

🔎 interface는 확장과 동시에 프로퍼티 재정의가 가능하다.

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

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

단, 프로퍼티를 재정의할 때 원본 타입을 A, 재정의된 타입을 B라고 하면 반드시 A가 B의 슈퍼 타입이 되어야 한다. 따라서 다음과 같이 name을 Number 타입으로 재정의 하는 것은 불가능하다.

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

interface Dog extends Animal {
  name: number; // ❌
  breed: string;
}

⇒ Dog 타입이 Animal 타입을 확장한다는 것은 Animal 타입의 서브타입이 된다는 의미인데, 그런데 name 프로퍼티를 Number 타입으로 재정의 해 버리면 이제는 Dog는 Animal의 서브 타입이 아니게 되기 때문이다.

2. type에서의 타입 확장

• type : 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수

// string 타입을 사용할 때
const name: string = 'capt';

// 타입 별칭을 사용할 때
type MyName = string;
const name: MyName = 'capt';

• type은 타입을 결합하여 새로운 타입을 만들지만 기존의 타입을 확장할 수 없다.
• & 연산자 사용

type BaseMenuItem = {
    itemName: string | null;
    itemImageUrl: string | null;
    itemDiscountAmount: number;
    stock: number | null;
};

type BaseCartItem = {
    quentity: number;
} & BaseMenuItem;

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

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

interface Dog extends Animal {
  breed: string;
}

---