TS) interface와 type 의 차이

 

TypeScript에서 type과 interface는 둘 다 타입을 정의하는 역할을 하지만, 몇 가지 차이가 있음 .

---

1. 기본적인 차이점

type interface

용도	다양한 타입(객체, 유니온, 맵드 타입 등)을 정의할 때 사용	객체의 구조(프로퍼티와 메서드)를 정의할 때 사용
확장(상속)	&(인터섹션)으로 확장	extends 키워드로 확장
중복 선언 가능 여부	❌ 불가능 (덮어쓰기 됨)	✅ 가능 (자동으로 병합됨)
유니온 타입 지원	✅ 가능	❌ 불가능
맵드 타입 지원	✅ 가능	❌ 불가능

---

2. 타입 상속(확장) 방식 비교

(1) interface의 확장 (extends)

인터페이스는 extends 키워드를 사용하여 확장할 수 있음.

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

interface Employee extends Person {
  jobTitle: string;
}

const employee: Employee = {
  name: "Alice",
  age: 30,
  jobTitle: "Developer",
};

✅ extends를 사용하면 기존 인터페이스를 확장하여 새로운 인터페이스를 만들 수 있음

---

(2) type의 확장 (인터섹션 &)

type을 확장할 때는 &(인터섹션)을 사용.

type Person = {
  name: string;
  age: number;
};

type Employee = Person & {
  jobTitle: string;
};

const employee: Employee = {
  name: "Alice",
  age: 30,
  jobTitle: "Developer",
};

✅ &를 사용하여 여러 타입을 합칠 수 있음

---

3. 중복 선언 가능 여부

(1) interface는 자동 병합(O)

interface User {
  name: string;
}

interface User {
  age: number;
}

const user: User = {
  name: "John",
  age: 25,
}; // 정상 동작

✅ 동일한 interface 이름을 중복 선언하면 자동으로 병합됨

---

(2) type은 중복 선언 불가(X)

type User = {
  name: string;
};

type User = {
  age: number;
}; // ❌ 오류: 중복된 타입 선언 불가

❌ type은 같은 이름으로 두 번 선언할 수 없음

---

4. type만 가능한 기능

(1) 유니온 타입 사용 가능

type Status = "success" | "error" | "loading";

✅ type은 유니온 타입을 정의할 수 있지만, interface는 불가능함.

---

(2) 맵드 타입 사용 가능

type ReadonlyUser = {
  readonly [K in "id" | "name" | "email"]: string;
};

✅ type은 맵드 타입을 활용하여 동적으로 타입을 생성할 수 있음.

---

결론: 언제 type과 interface를 사용할까?

상황 추천

객체 타입 정의	interface (가독성 & 확장성 좋음)
확장(상속)해야 하는 경우	interface (extends 지원, 병합 가능)
유니온 타입, 맵드 타입이 필요할 때	type (더 유연함)
여러 타입을 합칠 때	type (& 인터섹션 사용)

---

요약

• **interface**는 객체의 구조를 정의하고 확장(상속)에 강함. (extends 지원, 자동 병합)
• **type**은 유니온, 맵드 타입, 인터섹션 등 더 유연한 타입을 정의할 수 있음.
• 단순한 객체 타입 정의라면 interface, 다양한 타입 조합이 필요하다면 type을 사용하면 좋음! 😊

 

 

 

 

 

 

 

 

 

참고 쳇지피티, 제로베이스강의