유니온 타입 ('|')

Coddy JavaScript 여정의 TypeScript 소개 섹션에 포함된 레슨. 73개 중 31번째.

때로는 상황에 따라 서로 다른 타입의 값을 가질 수 있는 변수가 필요할 때가 있습니다. 예를 들어, 사용자 ID는 "user123"과 같은 문자열이나 42와 같은 숫자로 저장될 수 있습니다. TypeScript의 유니온 타입(union types)은 변수가 지정된 여러 타입 중 하나가 될 수 있도록 허용함으로써 이 문제를 해결합니다.

유니온 타입은 파이프 문자(|)를 사용하여 여러 타입을 결합합니다. 이 구문은 자연스럽게 "이것 또는 저것"으로 읽힙니다:

let userId: string | number;

userId = "user123";  // 유효함 - string
userId = 42;         // 유효함 - number
userId = true;       // 에러 - boolean은 허용되지 않음

기본 타입뿐만 아니라 어떤 타입이든 유니언으로 결합할 수 있습니다. 이러한 유연성 덕분에 유니언 타입은 여러 입력 형식을 허용해야 하는 함수 매개변수에 특히 유용합니다:

function displayMessage(content: string | number): void {
  console.log("Message: " + content);
}

displayMessage("Hello!");  // string과 함께 작동함
displayMessage(404);       // number와 함께 작동함

유니언 타입은 유연성을 유지하면서도 타입 안정성을 제공합니다. TypeScript는 지정된 타입 중 하나와 일치하는 값만 사용하도록 보장하여, 예상치 못한 데이터 타입으로 인한 런타임 에러를 방지합니다.

챌린지

쉬움

string | number 타입의 id라는 매개변수를 받아 콘솔에 출력하는 printId라는 함수를 생성하세요. 이 함수는 명시적인 반환 타입으로 void를 가져야 합니다.

boolean | string 타입의 data라는 매개변수를 받아 이를 그대로 반환하는 processValue라는 또 다른 함수를 생성하세요. 이 함수는 명시적인 반환 타입으로 boolean | string을 가져야 합니다.

number | string 타입의 input이라는 매개변수를 받아 포맷된 문자열을 반환하는 formatOutput이라는 세 번째 함수를 생성하세요. 입력값이 숫자이면 "Number: [input]"을 반환합니다. 입력값이 문자열이면 "Text: [input]"을 반환합니다. 이 함수는 명시적인 반환 타입으로 string을 가져야 합니다.

다음과 같은 입력값들이 제공됩니다:

첫 번째 입력: 문자열 또는 숫자일 수 있는 값 (printId용)
두 번째 입력: 불리언 또는 문자열일 수 있는 값 (processValue용)
세 번째 입력: 숫자 또는 문자열일 수 있는 값 (formatOutput용)

세 개의 입력값을 읽고, 각 함수를 적절한 입력값과 함께 호출한 뒤, 다음과 같이 출력을 처리하세요:

첫 번째 입력값으로 printId를 호출합니다 (이 함수는 직접 출력합니다).
두 번째 입력값으로 processValue를 호출하고 반환된 값을 출력합니다.
세 번째 입력값으로 formatOutput을 호출하고 반환된 값을 출력합니다.

참고: 첫 번째 입력값은 문자열로 제공되지만, 만약 숫자(예: "123")를 나타낸다면 printId에 전달하기 전에 숫자로 변환하세요. 두 번째 입력값은 문자열로 제공되지만, 만약 "true" 또는 "false"라면 해당 불리언 값으로 변환하세요. 세 번째 입력값은 문자열로 제공되지만, 숫자를 나타낸다면 숫자로 변환하세요.

직접 해보기

import * as fs from "fs";

// 입력 읽기
const stdinBuffer: Buffer = fs.readFileSync(0);
const inputs: string[] = stdinBuffer.toString().trim().split('\n');
const input1 = inputs[0];
const input2 = inputs[1];
const input3 = inputs[2];

// 입력을 적절한 타입으로 변환
const firstInput = isNaN(Number(input1)) ? input1 : Number(input1);
const secondInput = input2 === "true" ? true : input2 === "false" ? false : input2;
const thirdInput = isNaN(Number(input3)) ? input3 : Number(input3);

// TODO: 여기에 코드를 작성하세요
// 세 개의 함수를 생성하세요: printId, processValue, formatOutput

// TODO: 적절한 입력으로 함수를 호출하고 출력을 처리하세요