검색
회원가입로그인
TypeScript 정복하기: 초심자에서 전문가로

3장: 고급 타입 – 유니언, 인터섹션, 리터럴, 사용자 정의 타입

고급 타입 심화: 유니온, 인터섹션, 리터럴, 그리고 커스텀 타입

복잡한 애플리케이션을 개발하다 보면 변수 하나에 여러 타입이 혼재되거나, 객체가 여러 역할을 동시에 갖게 되거나, 아주 한정적인 값만 허용하고 싶을 때가 있습니다. TypeScript의 고급 타입 시스템은 이러한 요구에 응답합니다.

유니온 타입: 다양한 가능성을 한 변수에

유니온 타입은 변수에 여러 타입 중 하나를 담을 수 있게 합니다. 예를 들어, 사용자 입력값이 string이나 number 모두 가능하다면 다음처럼 정의합니다.

function printId(id: string | number) {
  console.log(`ID는: ${id}`);
}

| 기호를 통해 "이 타입이거나 저 타입"을 의미합니다. 주의할 점은, 유니온 타입 변수에는 포함된 모든 타입이 공통적으로 갖는 속성이나 메서드만 접근할 수 있습니다. 필요하다면 런타임에서 타입 검사(typeof) 혹은 타입 가드 함수를 써서 타입 별로 코드를 분기하세요.

인터섹션 타입: 여러 타입의 조합

인터섹션 타입은 여러 타입을 하나로 합칠 때 사용합니다. & 기호로 표현하며, 동시에 모든 타입의 속성을 갖는 새로운 타입이 만들어집니다.

type Admin = { name: string; admin: true };
type User = { name: string; age: number };
type AdminUser = Admin & User;

AdminUser 타입은 name, admin, age 모두를 필수로 포함합니다. 주로 여러 역할이나 책임이 중첩되는 객체에 유용하게 쓰입니다.

리터럴 타입: 값 자체를 타입으로

리터럴 타입을 사용하면 특정 값 몇 가지만 허용하고 싶을 때 유용합니다. 예로, 함수 파라미터가 'left', 'right', 'center' 중 하나만 받아야 할 때 다음과 같이 선언합니다.

type TextAlign = 'left' | 'right' | 'center';
function setTextAlign(align: TextAlign) {
  // align 값은 오직 'left' | 'right' | 'center'만 허용
}

문자열뿐 아니라 숫자, 불리언 리터럴도 동일하게 사용할 수 있습니다. 이는 오류를 미리 막고, 코드 자동완성 지원도 얻는 효과가 있습니다.

커스텀 타입: 타입을 조합하고 확장하다

TypeScript에서는 type 혹은 interface를 활용해 나만의 타입을 만들 수 있습니다. 기본 타입을 조합하거나, 유니온/인터섹션, 리터럴 타입 등을 자유자재로 섞어서 표현력을 극대화하세요.

type Status = 'success' | 'fail';
type ApiResponse = {
  code: number;
  status: Status;
  data?: object;
};

직관적이고, 명확하며, 나중에 코드를 읽는 동료도 의도를 쉽게 이해할 수 있습니다.

실전 활용 팁

고급 타입들을 제대로 활용하기 위해서는, 타입 가드(타입을 판별하는 함수)나 타입 단언(as) 키워드, 혹은 조건부 타입 등 고급 문법과 함께 연계하는 것이 중요합니다. 예외 상황까지 꼼꼼히 다루면서, 안정적이고 유연한 코드를 작성할 수 있습니다.

TypeScript의 이 강력한 타입 시스템은 여러분이 더 복잡하고 안전한 애플리케이션을 설계할 토대를 마련해줍니다. 이제 기초를 넘어서, 타입스크립트의 고수로 한 발짝 더 다가서봅시다.


공유하기
카카오로 공유하기
페이스북 공유하기
트위터로 공유하기
url 복사하기