객체 타입을 선언할 때 type ? interface ? 어떤 것을 사용해야하나

2024. 11. 7. 18:15· TypeScript
목차
  1. 1. type 키워드의 특징과 사용 사례
  2. 2. interface 키워드의 특징과 사용 사례
  3. 3. type vs interface 선택 가이드라인
  4. 4. 예외적으로 type과 interface를 함께 사용하는 경우
  5. 결론
타입스크립트를 사용하면서 아직 타입스크립트에 대한 이해가 부족하다고 느껴 "우아한 타입스크립트 with 리액트" 서적을 사서 공부하고 있다. 마침 티스토리에서 오블완 챌린지를 시작하기도 했고 오늘부터 3주간 챌린지에 참여하면서 타입스크립트 공부 일지를 작성해 볼 생각이다. 

 

타입을 선언할 때 type, interface 어떤 것을 사용해야 할까? 

1. type 키워드의 특징과 사용 사례

type은 타입에 대한 별칭을 만들어주는 기능을 합니다. 다음과 같은 경우에 유용하게 사용할 수 있습니다.

  • 간단한 객체나 유니온 타입, 교차 타입: type은 유니온(|)이나 교차(&)와 같은 복잡한 타입 조합을 처리할 때 편리합니다.
  • 프리미티브 타입 정의: 특정 값이 제한된 타입이 필요할 때 유용합니다. 예를 들어, type Color = 'red' | 'blue' | 'green';와 같이 사용하여 특정 값으로만 이루어진 타입을 정의할 수 있습니다.
  • 유틸리티 타입: Record와 같은 유틸리티 타입을 조합하거나 특정 값을 제한할 때 type을 활용하여 더 명확한 타입 추론이 가능하도록 설정할 수 있습니다.

예시

type Point = { x: number; y: number };
type Color = 'red' | 'green' | 'blue';
type Response = Success | Error;

2. interface 키워드의 특징과 사용 사례

interface는 객체의 구조를 선언하는 데 특화되어 있으며, 확장이 가능하다는 점에서 장점을 가집니다. 특히, 프로젝트가 커지고 타입 간의 일관성을 유지해야 하는 경우에 유리합니다.

  • 확장성: interface는 다른 인터페이스를 확장할 수 있으며, 이를 통해 기존 타입을 바탕으로 새로운 타입을 정의할 수 있습니다. 이는 컴포넌트 간에 일관성을 유지하면서, 타입을 유연하게 확장할 수 있도록 도와줍니다.
  • 객체 지향적 타입 정의: 클래스 기반 객체 지향 패턴을 사용할 때, implements 키워드와 함께 사용하여 객체 타입을 강제할 수 있습니다.
  • 반복 사용이 용이한 객체 타입: 여러 곳에서 사용해야 하는 복잡한 객체 타입을 정의할 때 interface가 더 가독성이 좋고 확장 가능하여 팀에서 선호되는 경우가 많습니다.

예시

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

interface Admin extends User {
  role: string;
}

3. type vs interface 선택 가이드라인

두 키워드를 선택할 때 도움이 될 수 있는 가이드라인을 정리해 보았습니다.

  • 간단한 타입 정의: 유니온 타입이나 특정 값의 제한이 필요한 경우, type을 사용하는 것이 좋습니다.
  • 확장 가능성이 높은 객체 타입: 여러 객체에서 공유되는 속성이나 일관성이 필요한 타입 정의가 필요할 때, interface를 사용하는 것이 더 적합합니다.
  • 유틸리티 타입 조합: Record와 같은 유틸리티 타입을 활용하여 특정 속성을 정의하거나 제한할 때는 type이 편리합니다.

4. 예외적으로 type과 interface를 함께 사용하는 경우

팀에 따라 type과 interface를 혼용하여 사용하는 경우도 있습니다. 예를 들어, 기본적인 객체 형태는 interface로 정의하되, 고정된 유니온 타입을 정의할 때는 type을 사용하는 식입니다. 이 방식은 코드의 일관성을 유지하면서도, 타입 선언의 유연성을 확보할 수 있게 합니다.

결론

타입스크립트에서 type과 interface를 선택할 때는 각 키워드의 특징과 프로젝트의 요구사항을 고려하는 것이 중요합니다. 간단하고 고정된 타입을 정의해야 할 때는 type을, 확장성과 일관성이 중요한 객체 타입을 정의할 때는 interface를 사용하는 것이 일반적인 가이드입니다. 그러나, 팀의 스타일이나 코드베이스의 일관성을 위해 둘 중 하나를 더 선호하는 방향으로 결정할 수도 있습니다.

중요한 것은, 두 키워드 모두 상황에 맞게 적절히 활용하여 프로젝트의 타입 정의를 일관되고 명확하게 유지하는 것입니다.

'TypeScript' 카테고리의 다른 글

[TypeScript] TypeScript의 Enum타입에 대해 알아보자  (1) 2024.11.19
TypeScript의 Array타입에 대해 알아보자 (+ Tuple타입)  (0) 2024.11.11
TypeScript의 any 와 unknown을 제대로 사용하는 법  (1) 2024.11.08
TypeScript 2일차 / TypeScript 문법을 뿌셔보자 ( 열거형, 인터페이스 ,타입 별칭)  (0) 2023.05.31
TypeScript 1일차 / TypeScript 기초를 뿌셔보자 !  (0) 2023.05.30
  1. 1. type 키워드의 특징과 사용 사례
  2. 2. interface 키워드의 특징과 사용 사례
  3. 3. type vs interface 선택 가이드라인
  4. 4. 예외적으로 type과 interface를 함께 사용하는 경우
  5. 결론
'TypeScript' 카테고리의 다른 글
  • TypeScript의 Array타입에 대해 알아보자 (+ Tuple타입)
  • TypeScript의 any 와 unknown을 제대로 사용하는 법
  • TypeScript 2일차 / TypeScript 문법을 뿌셔보자 ( 열거형, 인터페이스 ,타입 별칭)
  • TypeScript 1일차 / TypeScript 기초를 뿌셔보자 !
배트리버
배트리버
🐾 사람 좋아, 개발 좋아 🐾 궁금한 건 끝까지 파고들고, 배운 건 즐겁게 나누는 개발자의 놀이터
배트리버
리트리버의 개발 놀이터
배트리버
전체
오늘
어제
  • 분류 전체보기
    • 네트워크
    • 기초 셋팅
    • 오늘의 일기
    • 리액트
    • 코테 준비
      • 프로그래머스
      • 백준
    • 코드스테이츠44기 프론트엔드
    • HTML-CSS-JavaScript
      • HTML
      • CSS
      • JavaScript
    • 자료구조&알고리즘
    • TypeScript
    • Git
    • Tip
    • 프로젝트
    • Next.js
    • 트러블슈팅

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 프로그래머스
  • 자바스크립트 비동기
  • BFS
  • 코드스테이츠 44기
  • 코드스테이츠 회고록
  • KPT 회고
  • 리액트쿼리
  • 코드스테이츠
  • 리액트 상태관리
  • 네트워크
  • 타입스크립트문법
  • 코드스테이츠 블로깅
  • 프로젝트 회고
  • 코드스테이츠 프론트엔드
  • 자바스크립트
  • 오블완
  • 탄스택쿼리
  • 티스토리챌린지
  • 코드스테이츠 44기 프론트엔드
  • 리액트

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
배트리버
객체 타입을 선언할 때 type ? interface ? 어떤 것을 사용해야하나
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.