[TypeScript] Interface와 Type의 차이

📚 Interface와 Type은 무엇인가요?

이 두 구문은 타입을 정의하는 방법으로, TypeScript 코드의 가독성과 유지보수성을 크게 향상해요. 이 둘은 데이터의 형태와 계약을 정의하는 데 사용되지만, 그 사용 목적과 방법에서 약간의 차이가 있어요.

• Interface: interface는 객체의 형태를 정의하고, 클래스와의 계약을 설정하는 데 주로 사용돼요. 이는 객체 지향 프로그래밍의 개념과 밀접하게 연관되어 있으며, 확장 가능한 구조를 제공해요.
• Type: type은 interface보다 더 다양한 타입 표현을 가능하게 해요. 이는 기본적인 객체 형태뿐만 아니라, 유니온, 인터섹션, 기본 타입 등 복잡한 타입 조합을 정의하는 데 사용돼요.

interface는 건물의 청사진과 같아서, 객체의 구조를 구체적으로 설계하고 확장할 수 있어요. 반면, type은 재료 명세서와 같아서, 여러 타입을 조합하거나 특정 타입의 세부 사항을 정의하는 데 사용돼요.

 

---

🖥️ Interface와 Type의 사용 예

1. Interface

• interface는 객체의 형태를 정의하고, 클래스와의 계약을 설정하는 데 주로 사용돼요. 이는 객체 지향 프로그래밍의 개념과 밀접하게 연관되어 있으며, 확장 가능한 구조를 제공해요.

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

// Interface 확장
interface AdminUser extends User {
  adminLevel: number;
}

function printAdminUser(user: AdminUser) {
  console.log(`Name: ${user.name}, Age: ${user.age}, Admin Level: ${user.adminLevel}`);
}

const adminUser: AdminUser = { name: "Alice", age: 25, adminLevel: 1 };
printAdminUser(adminUser);

위의 예제는 Interface의 확장성을 보여줍니다:

• User 인터페이스는 기본 사용자 정보를 정의합니다.
• AdminUser 인터페이스는 User 인터페이스를 확장하여 관리자 레벨(adminLevel)을 추가합니다.
• printAdminUser 함수는 AdminUser 타입의 객체를 매개변수로 받아 정보를 출력합니다.

2. Type

• type은 interface보다 더 다양한 타입 표현을 가능하게 해요. 이는 기본적인 객체 형태뿐만 아니라, 유니온, 인터섹션, 기본 타입 등 복잡한 타입 조합을 정의하는 데 사용돼요.

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

// Type 조합
type AdminUser = User & {
  adminLevel: number;
};

function printAdminUser(user: AdminUser) {
  console.log(`Name: ${user.name}, Age: ${user.age}, Admin Level: ${user.adminLevel}`);
}

const adminUser: AdminUser = { name: "Bob", age: 28, adminLevel: 2 };
printAdminUser(adminUser);

위의 예제는 Type의 조합 가능성을 보여줍니다:

• User 타입은 기본 사용자 정보를 정의합니다.
• AdminUser 타입은 User 타입과 추가적인 속성(adminLevel)을 조합하여 새로운 타입을 생성합니다.
• printAdminUser 함수는 여기에서도 AdminUser 타입의 객체를 매개변수로 받아 정보를 출력합니다.

 

---

🤔 Interface와 Type의 장점

타입스크립트에서 interface와 type의 각각 장점을 요약하면 다음과 같아요.

1. Interface

• 확장성: interface는 상속을 통해 확장할 수 있어, 기존의 인터페이스를 기반으로 새로운 인터페이스를 쉽게 만들 수 있어요. 이는 크고 복잡한 객체 구조를 관리할 때 유용해요.
• 명확한 계약 정의: interface는 클래스와 객체의 명확한 계약을 정의하는 데 적합해요. 이를 통해 객체 지향 프로그래밍의 원칙을 효과적으로 적용할 수 있어요.
• 코드 재사용과 조직화: 상속을 통해 공통 기능을 재사용하고, 코드를 체계적으로 조직화할 수 있어요.

2. Type

• 유연성과 강력한 조합: type은 다양한 타입을 결합하여 새로운 타입을 생성할 수 있어요. 이는 유니온, 인터섹션 등의 복잡한 타입 조합을 가능하게 해요.
• 기존 타입 활용: 기존의 기본 타입이나 복합 타입을 활용하여 새로운 타입을 효율적으로 정의할 수 있어요.
• 조건부 타이핑: 조건부 타입과 같은 고급 타이핑 기능을 사용할 수 있어, 더 정교한 타입 정의가 가능해요.

 

즉, interface는 객체의 계약과 확장에 초점을 두고, type은 타입의 조합과 복잡한 타입 정의에 강점을 가지고 있어요.

 

---

🚨 주의할 점

1. Interface 사용 시 주의할 점

• 자동 병합: 같은 이름의 interface는 자동으로 합쳐져요. 이는 편리할 수 있지만, 예상치 못한 문제를 일으킬 수도 있어요.
• 확장성: interface는 다른 interface를 상속받아 확장할 수 있어요. 이는 객체 지향 프로그래밍에 유용해요.

2. Type 사용 시 주의할 점

• 복잡한 타입 정의: type은 복잡한 타입 조합을 만들 수 있지만, 너무 복잡해지면 코드를 이해하기 어려워질 수 있어요.
• 재사용과 유지보수: type은 재사용과 확장이 interface보다 제한적일 수 있어요. 따라서 코드의 유지보수를 고려해야 해요.

3. 공통 주의사항

• 성능: 큰 프로젝트에서는 interface와 type의 사용이 컴파일 시간에 영향을 줄 수 있어요. 일반적으로 interface가 더 빠르게 컴파일돼요.

 

---

📖 결론

interface와 type은 각각의 사용 사례와 필요에 따라 선택할 수 있어요. 일반적으로 객체의 형태를 정의하고 클래스와의 상호작용이 중요한 경우에는 interface를, 더 복잡하거나 유연한 타입 정의가 필요한 경우에는 type을 사용하는 것이 좋아요. TypeScript를 사용함으로써, 더 안정적이고 명확한 코드를 작성할 수 있게 되며, 이는 프로젝트의 유지보수성과 확장성을 크게 향상해요.

---

🔗 추가 정보

• 타입스크립트의 interface와 type에 대한 더 깊은 이해를 원하신다면, TypeScript 공식 문서에서 자세한 정보를 찾아볼 수 있어요.