타입스크립트(TypeScript) type과 interface 비교

소개

TypeScript은 JavaScript를 기반으로 하는 프로그래밍 언어로, 정적 타입 시스템을 제공하여 개발자에게 더 안정적이고 예측 가능한 코드 작성을 가능케 합니다. TypeScript에서 주로 사용되는 두 가지 타입 선언 방식은 'type'과 'interface'입니다. 이 기사에서는 두 방식을 비교하고 언제 어떤 것을 사용해야 하는지에 대해 알아보겠습니다.

타입스크립트(TypeScript) type과 interface 비교

 

특성	'type'	'interface'
확장 가능성	확장 가능	확장 가능
유니온 타입 및 인터섹션 타입 정의	가능	불가능
클래스가 인터페이스 구현 필요성	불가능	가능
객체의 구조 설명	가능	주로 사용
클래스 및 함수 타입 정의	가능	주로 사용

이 표에서 보듯이 'type'은 유연성과 확장 가능성을 제공하며, *유니온 타입 및 *인터섹션 타입 정의가 가능합니다. 반면 'interface'는 주로 객체의 구조를 설명하고, 클래스가 특정 인터페이스를 구현해야 할 때 사용됩니다. 선택은 프로젝트 요구 사항에 따라 다르며, 두 가지 선언 방식을 혼용하여 사용할 수도 있습니다.

*유니온 타입(Union Types)이란

유니온 타입은 TypeScript에서 여러 다른 타입 중 하나가 될 수 있는 타입을 정의하는 방법을 말합니다. 이것은 파이프(|) 기호를 사용하여 두 개 이상의 타입을 결합한 타입입니다. 유니온 타입을 사용하면 변수나 매개변수가 여러 다른 형식의 값을 수용할 수 있습니다. 예를 들어, 다음과 같은 코드에서 유니온 타입을 사용한 예시를 보여드릴게요:

let 값: string | number;

값 = "안녕하세요"; // 문자열 할당 가능
값 = 42; // 숫자 할당 가능
값 = true; // 에러! boolean은 유니온

*인터섹션 타입(Intersection Types)이란

인터섹션 타입은 TypeScript에서 두 개 이상의 타입을 결합하여 하나의 새로운 타입을 만드는 방법을 말합니다. 이것은 앰퍼샌드(&) 기호를 사용하여 타입을 결합하며, 새로운 타입은 모든 기존 타입의 속성 및 특성을 포함합니다. 인터섹션 타입을 사용하면 여러 타입의 특성을 하나로 결합할 수 있으며, 새로운 타입은 이러한 특성을 모두 갖게 됩니다. 예를 들어, 다음과 같은 코드에서 인터섹션 타입을 사용한 예시를 보여드릴게요:

type 사람 = {
  이름: string;
  나이: number;
};

type 학생 = {
  학번: string;
};

type 학생사람 = 사람 & 학생;

const 학생1: 학생사람 = {
  이름: '영희',
  나이: 22,
  학번: '2022001'
};

위의 코드에서 '학생사람' 타입은 '사람'과 '학생' 타입을 인터섹션하여 생성되었으며, '학생사람' 객체는 '이름', '나이', '학번' 속성을 모두 가지고 있습니다.

1. 기본 개념

1.1 type

'type'은 TypeScript에서 사용자 정의 타입을 생성하는 데 사용됩니다. 이것은 새로운 타입을 정의하는 데 사용되며, 다른 타입과 결합하여 복잡한 구조를 만들 수 있습니다.

1.2 interface

'interface'는 주로 객체의 구조를 설명하는 데 사용됩니다. 객체가 특정 구조를 따를 것으로 예상될 때 사용되며, 클래스나 함수의 매개변수와 반환값의 타입을 정의하는 데 유용합니다.

2. 차이점

2.1 확장 가능성

'type'은 객체, 유니온 타입, 인터섹션 타입 등을 정의하는 데 확장 가능합니다. 반면, 'interface'는 주로 객체 구조를 설명하는 데 사용되며, 확장이 제한적입니다.

2.2 유니온 타입(Union Types)과 인터섹션 타입(Intersection Types)

'type'은 유니온 타입과 인터섹션 타입을 정의하는 데 사용됩니다. 이를 통해 여러 타입을 조합하여 새로운 타입을 만들 수 있습니다. 'interface'는 이러한 유연성을 제공하지 않습니다.

2.3 implements

'interface'는 클래스가 특정 인터페이스를 구현하도록 강제할 수 있습니다. 이것은 객체가 인터페이스의 구조를 준수해야 함을 의미합니다. 'type'은 이러한 기능을 제공하지 않습니다.

3. 언제 어떤 것을 사용해야 하는가

3.1 'type' 사용 사례

• 유니온 타입 또는 인터섹션 타입 정의
• 복잡한 타입 조합
• 새로운 타입 생성

type 사람 = {
  이름: string;
  나이: number;
};

type 학생 = 사람 & {
  학번: string;
};

const 학생1: 학생 = {
  이름: '철수',
  나이: 20,
  학번: '2021001',
};

3.2 'interface' 사용 사례

• 객체의 구조 설명
• 클래스나 함수의 매개변수와 반환값 타입 정의
• 클래스가 특정 인터페이스를 구현해야 하는 경우

interface 사람 {
  이름: string;
  나이: number;
}

interface 학생 extends 사람 {
  학번: string;
}

const 학생1: 학생 = {
  이름: '영희',
  나이: 22,
  학번: '2022001',
};

4. 결론

TypeScript에서 'type'과 'interface'는 각각 다른 사용 사례와 장점을 가지고 있습니다. 'type'은 타입의 조합과 확장 가능성을 제공하며, 'interface'는 객체 구조를 설명하고 클래스에 인터페이스를 강제합니다. 개발자는 프로젝트 요구 사항에 따라 적절한 타입 선언 방식을 선택해야 합니다. 필자의 경우 리액트(Next.js)를 주로 사용하는데, Props Type은 Object로 받기 때문에 Interface를 거의 사용하고 있다.

마지막으로, TypeScript의 놀라운 기능을 활용하려면 학습과 실습이 필요합니다. 두 가지 선언 방식을 익히고 프로젝트에서 적재적소에 활용하면 코드의 가독성과 유지보수성이 향상될 것입니다.

---

자주 묻는 질문 (FAQs)

1. 'type'과 'interface' 중 어떤 것을 선택해야 하나요?

선택은 프로젝트 요구 사항에 따라 다릅니다. 'type'은 유연성과 확장 가능성을 제공하며, 'interface'는 구조 설명과 클래스 강제에 더 적합합니다.

2. 'interface'를 사용할 때 클래스가 인터페이스를 구현해야 하는 이유는 무엇인가요?

'interface'를 사용하면 클래스가 특정 구조를 준수해야 하므로 코드의 일관성을 유지하고 오류를 방지할 수 있습니다.

3. 'type'을 사용하여 복잡한 타입을 정의하는 방법은 무엇인가요?

'type'을 사용하여 유니온 타입, 인터섹션 타입을 결합하여 복잡한 타입을 정의할 수 있습니다. 이를 통해 다양한 상황에 대응할 수 있습니다.

4. TypeScript에서 'type'과 'interface'를 혼용할 수 있나요?

네, 'type'과 'interface'를 혼용하여 프로젝트 요구 사항에 맞게 사용할 수 있습니다. 이는 TypeScript의 유연성 중 하나입니다.

5. TypeScript를 배우기 위한 좋은 자원은 어디에서 찾을 수 있나요?

TypeScript를 배우는 데 좋은 자습서와 온라인 코스가 많이 있습니다. 또한 TypeScript 공식 문서도 유용한 참고 자료입니다.

---

이 기사를 통해 'type'과 'interface'의 차이와 언제 어떤 것을 사용해야 하는지에 대한 통찰을 얻었을 것입니다. TypeScript의 강력한 타입 시스템을 활용하여 더욱 견고하고 안정적인 코드를 작성하세요.

 

공식 홈페이지 

TS Playground - An online editor for exploring TypeScript and JavaScript