고급 TypeScript - 고급 타입: 인터섹션 타입

고급 타입: 인터섹션 타입

인터섹션 타입은 여러 개의 타입을 결합하여 새로운 타입을 생성하는 강력한 기능입니다. TypeScript에서 인터섹션 타입을 사용하면 서로 다른 객체의 속성을 조합할 수 있으며, 이를 통해 복잡한 데이터 구조를 효율적으로 표현할 수 있습니다.

1. 기본 개념

인터섹션 타입은 & 연산자를 사용하여 정의됩니다. 두 개 이상의 타입이 결합되면, 결과는 모든 구성 요소의 속성을 포함하는 새로운 객체가 됩니다. 이 방식으로 다양한 형태의 데이터를 하나로 통합할 수 있습니다.

예를 들어:

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

type Employee = {
    employeeId: number;
};

// 인터섹션 타입 정의
type EmployeePerson = Person & Employee;

const john: EmployeePerson = {
    name: "John Doe",
    age: 30,
    employeeId: 12345,
};

위 예제에서 EmployeePersonPersonEmployee 두 가지 유형을 결합한 것입니다. 따라서 john 객체는 두 가지 유형 모두의 속성을 가집니다.

2. 활용 사례

인터섹션 타입은 다음과 같은 상황에서 유용하게 사용할 수 있습니다:

  • 다양한 역할:
    여러 역할이나 특성을 가진 객체를 표현할 때 유용합니다.
type Developer = {
    programmingLanguages: string[];
};

type Manager = {
    teamSize: number;
};

// 개발자이자 관리자인 경우
type TechLead = Developer & Manager;

const alice: TechLead = {
    programmingLanguages: ["JavaScript", "TypeScript"],
    teamSize: 5,
};
  • 복잡한 API 응답 처리:
    API 응답이 여러 다른 형식을 포함해야 할 때 유용합니다.
interface ApiResponseSuccess {
    statusCode: number;
    data: any; // 실제 데이터 형식에 따라 변경 가능
}

interface ApiResponseError {
    statusCode: number;
    errorMessage: string;
}

// 성공 및 오류 응답을 모두 처리하기 위한 인터셉터타입 정의 
type ApiResponse = ApiResponseSuccess | ApiResponseError;

function handleApiResponse(response: ApiResponse) {
   if ('errorMessage' in response) {
       console.log(`Error ${response.statusCode}: ${response.errorMessage}`);
   } else {
       console.log(`Success ${response.statusCode}:`, response.data);
   }
}

3. 장점과 단점

장점:

  • 코드 재사용성이 높아지고, 중복된 코드를 줄일 수 있습니다.
  • 명확하고 직관적인 데이터 모델링이 가능합니다.

단점:

  • 너무 많은 인터페이스나 유형을 결합하면 복잡도가 증가할 수 있으므로 주의가 필요합니다.

결론적으로, 인터섹션 타입은 TypeScript에서 매우 중요한 도구이며, 적절히 활용하면 코드 품질과 유지보수성을 크게 향상시킬 수 있습니다.

Subscribe to shimdh.log

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe