[🟦] interface & type

타입스크립트에서 타입을 선언하는 방식인 interface와 type.

 

interface는 여러 할당이 가능하다.

하지만 위험요소가 있으며 자주 쓰이지는 않는 듯 하다.

interface Todo {
	id: string;
    title: string;
    completed: boolean;
};

interface Todo {
	timestamp: number;
};

 

위와 같이 interface는 여러 할당이 가능하다.

이런 식으로 할당하게 되면 결국 Todo에는 4개의 타입이 가능하다.

 

확인은 아래 사진에서 볼 수 있듯이 todo. 을 찍으면 내부 타입 확인이 가능하며 timestamp 타입을 포함하고 있다.

 

다만, 이렇게 쓰인다면 Todo 자체의 타입이 변하게 된다.

즉, 처음 할당한 {id, title, completed} 타입만의 Todo를 활용하고 있는 곳이 있다면

timpstamp가 추가되어 혹여나 오류가 발생할 수도 있다.

(리액트에서 push를 사용할 때 원본 배열이 변해서 불변성이 깨지는 것과 비슷하게 생각하면 되려나..?)

 

따라서 interface는 extends, type은 & 연산자를 사용해서 두 개 이상의 타입을 합칠 수 있다.

---

 

📍interface

• interface C가 A와 B를 상속(extends) 해서 모든 속성을 가짐
• interface는 자동으로 병합(Declaration Merging) 가능

// interface - extends

interface A {
  name: string;
}

interface B {
  age: number;
}

// B가 A를 확장 (interface는 extends 사용)
interface C extends A, B {
  gender: string;
}

const person: C = {
  name: "유리",
  age: 25,
  gender: "여성",
};

 

 

 

📍type

• type C는 A, B를 병합(& 연산자 사용)
• type은 확장할 때 & 연산자를 사용해야 함

// type - & 연산자

type A = {
  name: string;
};

type B = {
  age: number;
};

// 두 개의 타입을 & 연산자로 합치기
type C = A & B & { gender: string };

const person: C = {
  name: "유리",
  age: 25,
  gender: "여성",
};

 

 

📌interface vs type 차이

// interface 자동 병합 가능
interface A {
  name: string;
}

interface A {
  age: number;
}

const person: A = { name: "진채", age: 25 }; // 자동 병합됨

// type은 중복 선언 불가능 ❌ 
type B = { name: string };
type B = { age: number }; // Error: Duplicate identifier 'B'

 

 

 

✨언제 사용해야 할까?

• 객체의 구조를 정의하고 확장할 가능성이 있다면? → interface (자동 병합 가능)
• 유니온(|)이나 튜플 같은 복잡한 타입 조합이 필요하면? → type

📌둘 다 사용 가능하지만, interface는 확장성(extends)이 필요할 때, type은 더 자유로운 조합이 필요할 때 사용