유니온 타입과 인터섹션 타입

다음 수업에 오신 것을 환영합니다! 이번 수업에서는 유니온 타입을 사용해 하나의 변수가 여러 가능한 타입 중 하나를 가질 수 있도록 하는 방법과, 인터섹션 타입을 사용해 여러 타입을 하나로 결합하는 방법을 배우겠습니다. 유니온 타입과 인터섹션 타입은 유연하고 견고한 코드를 작성하는 데 유용한 강력한 도구입니다. 시작해 봅시다!

유니온 타입이란?

유니온 타입을 사용하면 하나의 변수가 둘 이상의 타입을 가질 수 있습니다. | 기호를 사용해 유니온 타입을 정의할 수 있습니다.

예시: 문자열 또는 숫자 중 하나가 될 수 있는 변수입니다.

과제: 유니온 타입을 사용하는 변수를 선언하고 서로 다른 값을 할당해 보세요.

let value: string | number;
value = "Hello";
console.log(value); // Output: "Hello"

value = 42;
console.log(value); // Output: 42

함수에서 유니온 타입 사용하기

함수 매개변수에 유니온 타입을 사용하면 여러 입력 타입을 허용할 수 있습니다. 예시는 다음과 같습니다.

과제: 유니온 타입 매개변수를 받고 이를 콘솔에 기록하는 함수를 작성해 보세요.

function printValue(value: string | number): void {
  console.log(`The value is ${value}`);
}

printValue("Hello"); // Output: The value is Hello
printValue(100); // Output: The value is 100

인터섹션 타입이란?

인터섹션 타입은 여러 타입을 하나로 결합합니다. & 기호를 사용해 인터섹션 타입을 정의할 수 있습니다.

예시: 두 객체 타입을 결합하는 방법입니다.

과제: 두 객체를 결합하는 인터섹션 타입을 만들고 사용해 보세요.

type Person = { name: string };
type Employee = { employeeId: number };

type Staff = Person & Employee;

let staffMember: Staff = {
  name: "Alice",
  employeeId: 123,
};

console.log(staffMember);

유니온 타입에서 타입 가드 사용하기

TypeScript는 유니온 타입에서 어떤 타입을 사용하고 있는지 알 수 없습니다. 타입 가드를 사용하면 타입의 범위를 좁힐 수 있습니다. 예시는 다음과 같습니다.

과제: 타입 가드를 사용해 유니온 타입의 여러 타입을 처리해 보세요.

function display(value: string | number): void {
  if (typeof value === "string") {
    console.log(`String value: ${value.toUpperCase()}`);
  } else {
    console.log(`Number value: ${value * 2}`);
  }
}

display("Hello"); // Output: String value: HELLO
display(5); // Output: Number value: 10

실전에서 인터섹션 타입 사용하기

인터섹션 타입은 공통 속성을 가진 객체를 다룰 때 유용합니다. 예시는 다음과 같습니다.

과제: admin과 사용자 역할을 위한 인터섹션 타입을 만들어 보세요.

type Admin = { adminLevel: string };
type User = { username: string };

type AdminUser = Admin & User;

let admin: AdminUser = {
  adminLevel: "super",
  username: "admin123",
};

console.log(`Admin ${admin.username} has level ${admin.adminLevel}`);

유니온 타입과 인터섹션 타입에서 흔히 하는 실수

다음은 흔히 하는 실수입니다.

• 유니온 타입을 사용하면서 가능한 모든 경우를 처리하지 않는 것(예: 타입 가드를 빠뜨리는 경우)
• 불필요한 인터섹션을 사용해 타입을 지나치게 복잡하게 만드는 것
• 유니온 타입이나 인터섹션 타입에 호환되지 않는 값을 할당하는 것

팁: 타입이 예상대로 작동하는지 확인하려면 항상 코드를 테스트하세요!

유니온과 인터섹션은 언제 사용할까요?

다음과 같은 경우에는 유니온 타입을 사용하세요.

• 변수가 여러 가능한 타입 중 하나를 가질 수 있을 때
• 함수 매개변수에 유연성이 필요할 때

다음과 같은 경우에는 인터섹션 타입을 사용하세요.

• 여러 객체나 타입을 하나로 결합할 때
• 특정 사용 사례에 맞는 더 복잡한 타입을 만들 때

잘하셨습니다!

축하합니다! TypeScript에서 유니온 타입과 인터섹션 타입을 사용해 복잡한 상황을 처리하는 방법을 배우셨습니다. 이러한 도구를 사용하면 코드를 더 유연하고 표현력 있게 만들 수 있습니다. 다음 수업에서는 열거형과 열거형이 상수값을 관리하는 데 어떻게 도움이 되는지 살펴보겠습니다. 계속 코딩해 봅시다!