TypeScript - 연합 타입: 초보자를 위한 친절한 소개
안녕하세요, 미래의 코딩 슈퍼스타! ? TypeScript의 놀라운 세계와 그 중에서도 가장 강력한 기능之一的 연합 타입에 대해 배이고 싶으신가요? 오늘 우리는 연합 타입에 대해 탐구해보겠습니다. 처음에는 무서워 보일 수 있지만, 이 튜토리얼이 끝나면 정말 유용하고 즐거운 것을 발견할 것입니다!
친절한 이웃의 컴퓨터 선생님이자 저는 이 개념을 이해하면서 수많은 학생들이 빛을 발하는 것을 보았습니다. 그麼, 이 여정을 함께 시작해보겠습니다.
연합 타입은 무엇인가요?
가로를 하기 전에 간단한 비유로 시작해보겠습니다. 마법의 상자가 있고, 그 상자는 장난감 자동차나 인형 중 하나만 담을 수 있지만, 두 가지를 동시에 담을 수는 없습니다. 이것이 TypeScript의 연합 타입과 비슷한 것입니다 - 변수가 여러 타입 중 하나가 될 수 있음을 코드에게 알리는 방법입니다.
이제 코드로 손을 더러 만들어보겠습니다!
문법: 연합 리터럴
연합 타입의 기본 문법은 파이프 기호 (|)를 사용하여 다른 타입을 구분합니다. TypeScript에게 "이거나 저거"라고 말하는 것과 같습니다.
let myFavorite: string | number;
myFavorite = "TypeScript"; // 이것은 유효합니다
console.log(myFavorite); // 출력: TypeScript
myFavorite = 42; // 이것도 유효합니다
console.log(myFavorite); // 출력: 42
// myFavorite = true; // 이것은 오류를 발생시킵니다이 예제에서 myFavorite는 문자열이나 숫자 중 하나가 될 수 있습니다. 마법의 상자가 단어나 숫자 중 하나를 담을 수 있지만, 다른 것은 담을 수 없는 것과 같습니다. 만약 boolean(true)를 넣으려고 시도하면, TypeScript는 마법의 지팡이를 흔들고 오류를 보여줍니다.
연합 타입 변수
이전 예제를 확장하여 연합 타입이 코드를 더 유연하게 만드는 방법을 보겠습니다:
type Pet = "cat" | "dog" | "fish";
let myPet: Pet;
myPet = "cat"; // 이것은 유효합니다
console.log(`I have a ${myPet}`); // 출력: I have a cat
myPet = "dog"; // 이것도 유효합니다
console.log(`I have a ${myPet}`); // 출력: I have a dog
// myPet = "elephant"; // 이것은 오류를 발생시킵니다여기서 우리는 Pet이라는 사용자 정의 타입을 만들어, 그 타입이 세 가지 특정 문자열 중 하나만 될 수 있도록 했습니다. 마치 고양이, 개, 물고기를만 파는 동물 가게와 같습니다. 만약 코끼리를 사려고 시도하면, 안됩니다!
연합 타입과 함수 매개변수
연합 타입은 함수와 함께 사용할 때 정말 빛을 발합니다. 타입 안전성을 잃지 않고 함수를 더 다양하게 만들 수 있습니다. 예제를 보겠습니다:
function printId(id: number | string) {
console.log(`Your ID is: ${id}`);
}
printId(101); // 출력: Your ID is: 101
printId("202"); // 출력: Your ID is: 202
// printId(true); // 이것은 오류를 발생시킵니다이 함수에서 printId는 숫자나 문자열을 인자로 받을 수 있습니다. 마치 언iversal ID 카드 리더기가 숫자와 텍스트 기반 ID를 모두 처리할 수 있는 것과 같습니다. 하지만 boolean ID 카드를 스와이프하려고 시도하면, 예의 바르게 거부합니다!
연합 타입과 배열
이제 연합 타입이 배열과 어떻게 작동하는지 보겠습니다. 배열 마법에 대비해 주세요!
let mixedArray: (number | string)[] = [1, "two", 3, "four", 5];
console.log(mixedArray); // 출력: [1, "two", 3, "four", 5]
mixedArray.push(6); // 이것은 유효합니다
mixedArray.push("seven"); // 이것도 유효합니다
// mixedArray.push(true); // 이것은 오류를 발생시킵니다
console.log(mixedArray); // 출력: [1, "two", 3, "four", 5, 6, "seven"]여기서 우리는 숫자와 문자열을 모두 포함할 수 있는 배열을 만들었습니다. 마치 트랙 번호와 노래 제목을 모두 포함할 수 있는 재생 목록과 같습니다. 하지만 boolean을 숨겨넣으려고 시도하면, TypeScript는 당신을 붙잡습니다!
실용적인 사용 사례
이제 기본 내용을 다루었으므로, 연합 타입이 실제로 어떻게 유용할 수 있는지 보겠습니다:
- API 응답: API와 함께 작업할 때, 때로는 수신된 데이터가 다양한 타입일 수 있습니다. 연합 타입은 이러한 변화를 부드럽게 처리하는 데 도움이 됩니다.
type ApiResponse = {
status: "success" | "error";
data: string | number | null;
};
function handleResponse(response: ApiResponse) {
if (response.status === "success") {
console.log(`Success! Data: ${response.data}`);
} else {
console.log("An error occurred");
}
}
handleResponse({ status: "success", data: "User profile loaded" });
handleResponse({ status: "error", data: null });- 구성 옵션: 구성 가능한 함수를 만들 때, 연합 타입은 유효한 옵션을 제공하는 데 도움이 됩니다.
type Color = "red" | "green" | "blue";
type Size = "small" | "medium" | "large";
function createButton(color: Color, size: Size) {
console.log(`Creating a ${color} button of size ${size}`);
}
createButton("red", "medium"); // 유효
// createButton("yellow", "extra-large"); // 이것은 오류를 발생시킵니다일반 연합 타입 메서드
다음은 연합 타입에서 사용할 수 있는 일반 메서드 표입니다:
| 메서드 | 설명 | 예제 |
|---|---|---|
| typeof | 값의 타입을 확인합니다 | typeof x === "string" |
| instanceof | 객체가 특정 클래스의 인스턴스인지 확인합니다 | x instanceof Date |
| in | 객체에 프로퍼티가 있는지 확인합니다 | "name" in x |
| Array.isArray() | 값이 배열인지 확인합니다 | Array.isArray(x) |
결론
와우! 오늘 많은 내용을 다루었죠? 연합 타입은 처음에는 조금 어려워 보일 수 있지만, TypeScript 도구箱에서 매우 강력한 도구입니다. 더 유연하고 견고한 코드를 작성할 수 있으며, 잠재적인 오류를 사전에 발견할 수 있습니다.
기억하세요, 코딩은 새로운 언어를 배우는 것과 같습니다 - 연습과 인내가 필요합니다. 바로 이해되지 않으면 실망하지 마세요. 계속 실험하고, 계속 코딩하다 보면, 연합 타입을 마스터하는 데 성공할 것입니다!
마무리하면서, 한 학생이曾经说过, "연합 타입은 내 코드의 스위스 아미 나이프입니다!" 그리고 그는 절대로 옳았습니다. 그麼, 젊은 코더여, 연합 타입이 항상 당신의 편이 되길 바랍니다! ??
Credits: Image by storyset