2026년 상식닷컴 선정 식당 & 카페 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요

타입스크립트에서 유니온 타입(Union Type)이란 무엇인가요?

_____
Q1: 타입스크립트에서 유니온 타입(Union Type)이란 무엇인가요?
유니온 타입은 변수나 함수 매개변수 등이 여러 타입 중 하나일 수 있음을 명시하는 타입입니다. 즉, 하나의 값이 여러 타입 중 하나에 해당할 수 있음을 표현합니다.

Q2: 유니온 타입의 기본 문법은 어떻게 되나요?
두 개 이상의 타입을 `|`(파이프) 기호로 연결하여 정의합니다. 예를 들어,
```typescript
let value: string | number;
```
위 코드에서 `value`는 `string` 또는 `number` 타입 값을 가질 수 있습니다.

Q3: 유니온 타입을 사용하는 이유는 무엇인가요?
- 보다 유연한 변수 및 함수 매개변수 타입 지정이 가능합니다.
- 여러 타입을 다뤄야 하는 상황에서 한번에 처리할 수 있습니다.
- 코드의 가독성과 유지보수성을 높여줍니다.

Q4: 유니온 타입으로 선언된 변수에 값을 할당할 때 주의할 점은 무엇인가요?
유니온 타입 중 한 가지 타입의 값만 할당할 수 있습니다. 예를 들어, `string | number` 타입 변수에는 `boolean` 값을 할당할 수 없습니다.

Q5: 유니온 타입 변수를 사용할 때 타입 좁히기(type narrowing)는 어떻게 하나요?
유니언 타입 변수에서 특정 타입의 속성이나 메서드를 안전하게 사용하려면, 타입 가드(type guard)를 사용하여 실제 타입을 확인해야 합니다. 예:
```typescript
function printId(id: string | number) {
if (typeof id === 'string') {
console.log(id.toUpperCase()); // string 타입임이 보장됨
} else {
console.log(id.toFixed(2)); // number 타입임이 보장됨
}
}
```

Q6: 유니온 타입과 인터섹션 타입(Intersection Type)의 차이는 무엇인가요?
- 유니온 타입은 여러 타입 중 하나를 의미합니다. (`A | B`)
- 인터섹션 타입은 여러 타입을 모두 만족하는 타입을 의미합니다. (`A & B`)
즉, 유니온은 '또는'의 의미이고 인터섹션은 '그리고'의 의미입니다.

Q7: 유니온 타입의 예시는 어떤 것이 있나요?
```typescript
type Result = Success | Failure;

interface Success {
success: true;
data: string;
}

interface Failure {
success: false;
error: string;
}
```
위와 같이 API 응답 결과를 명확히 구분하는 데 활용할 수 있습니다.

---

요약하자면, 타입스크립트에서 유니온 타입은 변수나 값이 여러 타입 중 하나임을 명시하는 타입 시스템 기능으로, 코드 안정성과 유연성을 동시에 제공합니다.
타입스크립트(TypeScript)에서 유니온 타입(Union Type)은 변수나 함수의 매개변수, 반환값 등이 여러 가지 타입 중 하나일 수 있음을 나타내는 타입 시스템의 기능입니다.

즉, 유니온 타입을 사용하면 하나의 변수에 여러 타입을 허용할 수 있어 보다 유연한 프로그래밍이 가능합니다.

유니온 타입의 정의 유니온 타입은 파이프(`|`) 기호를 사용하여 여러 타입을 결합하여 정의합니다.

예를 들어, `string | number`라는 유니온 타입은 해당 변수나 매개변수가 문자열(string) 또는 숫자(number)일 수 있음을 의미합니다.

유니온 타입의 사용 예시 ```typescript function printId(id: number | string) { console.log(`Your ID is: ${id}`); } printId(101); // 숫자 타입 printId("202"); // 문자열 타입 ``` 위의 예시에서 `printId` 함수는 `number` 또는 `string` 타입의 `id`를 매개변수로 받을 수 있습니다.

호출 시 숫자 또는 문자열을 전달할 수 있으며, 타입스크립트는 이를 허용합니다.

유니온 타입의 장점 1. 유연성 : 유니온 타입을 사용하면 하나의 변수에 여러 타입을 허용할 수 있어 코드의 유연성이 증가합니다.

이는 특히 API 응답이나 다양한 데이터 형식을 다루는 경우에 유용합니다.



2. 타입 안전성 : 타입스크립트는 유니온 타입을 사용하여 코드의 타입 안전성을 보장합니다.

즉, 잘못된 타입이 전달될 경우 컴파일 타임에 오류를 발생시켜 개발자가 실수를 미리 방지할 수 있습니다.



3. 코드 가독성 : 유니온 타입을 사용하면 코드의 의도를 명확하게 표현할 수 있습니다.

어떤 값이 여러 타입 중 하나일 수 있다는 것을 명시적으로 나타내므로, 다른 개발자들이 코드를 이해하기 쉬워집니다.

유니온 타입과 타입 가드 유니온 타입을 사용할 때는 타입 가드를 통해 특정 타입을 확인하고 안전하게 사용할 수 있습니다.

타입 가드는 특정 타입인지 확인하는 조건문을 사용하여, 해당 타입에 맞는 로직을 실행할 수 있도록 도와줍니다.

```typescript function printId(id: number | string) { if (typeof id === "string") { console.log(`Your ID is a string: ${id}`); } else { console.log(`Your ID is a number: ${id}`); } } ``` 위의 예시에서 `typeof` 연산자를 사용하여 `id`가 문자열인지 숫자인지를 확인하고, 그에 따라 다른 로직을 실행합니다.

이를 통해 타입스크립트는 타입 안전성을 유지하면서도 유연한 코드를 작성할 수 있게 합니다.

유니온 타입의 제한 사항 유니온 타입은 여러 타입을 허용하지만, 모든 타입에 공통적으로 존재하는 속성이나 메서드에 접근할 때는 주의가 필요합니다.

예를 들어, `string | number` 타입의 변수에 대해 `toFixed()` 메서드를 호출하면 오류가 발생합니다.

이는 `toFixed()`가 숫자에만 존재하는 메서드이기 때문입니다.

```typescript function formatId(id: number | string) { // Error: Property 'toFixed' does not exist on type 'string'. console.log(id.toFixed(

2)); } ``` 이런 경우에는 타입 가드를 사용하여 타입을 좁혀야 합니다.

결론 타입스크립트의 유니온 타입은 다양한 타입을 하나의 변수에 허용할 수 있는 강력한 기능입니다.

이를 통해 코드의 유연성과 타입 안전성을 동시에 확보할 수 있으며, 타입 가드를 통해 안전하게 타입을 처리할 수 있습니다.

유니온 타입을 적절히 활용하면 복잡한 데이터 구조를 다루는 데 큰 도움이 되며, 코드의 가독성과 유지보수성을 높이는 데 기여할 수 있습니다.

작성자: 박지우 [비회원] | 작성일자: 1년 전 2024-09-10 05:32:10
조회수: 165 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
내용이 부정확하다면 싫어요를 클릭해주세요.