유니온 타입 활용하기

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

유니온 타입을 다룰 때, TypeScript는 중요한 안전 규칙을 적용합니다. 유니온에 속한 모든 타입에 존재하는 속성과 메서드만 접근할 수 있다는 것입니다. 이는 런타임 오류를 방지하지만, 특정 타입에만 있는 기능에 접근하려면 특별한 기술이 필요함을 의미합니다.

문자열 또는 문자열 배열을 인자로 받는 함수를 생각해 봅시다. 두 타입 모두 length 속성을 가지고 있으므로, 안전하게 접근할 수 있습니다:

function getLength(input: string | string[]): number {
  return input.length; // 안전함 - 두 타입 모두 length를 가짐
}

하지만 한 가지 타입에만 존재하는 메서드를 사용하려고 하면, TypeScript는 에러를 표시합니다. 특정 타입에만 있는 멤버에 안전하게 접근하려면, 타입을 좁혀주는 런타임 체크인 타입 가드(type guard)가 필요합니다:

function processInput(input: string | string[]): void {
  if (typeof input === "string") {
    // 여기서 TypeScript는 input이 string임을 압니다
    console.log(input.toUpperCase());
  } else {
    // 여기서 TypeScript는 input이 string[]임을 압니다
    console.log(input.join(", "));
  }
}

typeof 연산자는 가장 일반적인 타입 가드 중 하나입니다. 체크가 끝난 후, TypeScript는 각 분기 내에서 자동으로 타입을 좁혀주어, 완전한 타입 안정성을 유지하면서 타입 전용 속성과 메서드에 대한 전체 접근 권한을 제공합니다.

챌린지

쉬움

string | string[] 타입의 input 매개변수를 받아 number를 반환하는 processData라는 이름의 함수를 생성하세요. 이 함수는 타입 가드(type guard)를 사용하여 입력 타입을 확인하고 다음과 같이 동작해야 합니다:

입력이 string인 경우, 그 길이를 반환합니다.
입력이 string[]인 경우, 배열 내 모든 문자열의 총 문자 수를 반환합니다.

number | boolean 타입의 content 매개변수를 받아 string을 반환하는 formatMessage라는 이름의 또 다른 함수를 생성하세요. 이 함수는 타입 가드를 사용하여 입력 타입을 확인하고 다음과 같이 동작해야 합니다:

입력이 number인 경우, "Value: [number]"를 반환합니다.
입력이 boolean인 경우, "Status: [boolean]"를 반환합니다.

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

첫 번째 입력: 단일 단어 또는 ["apple", "banana", "cherry"]와 같은 문자열의 JSON 배열을 나타내는 문자열
두 번째 입력: 숫자 또는 불리언("true" 또는 "false")을 나타내는 문자열

입력을 다음과 같이 처리하세요:

첫 번째 입력의 경우: "["로 시작하면 문자열의 JSON 배열로 파싱하고, 그렇지 않으면 단일 문자열로 취급합니다.
두 번째 입력의 경우: "true" 또는 "false"이면 불리언으로 변환하고, 그렇지 않으면 숫자로 변환합니다.

처리된 첫 번째 입력을 사용하여 processData를 호출하고 결과를 출력하세요. 그런 다음 처리된 두 번째 입력을 사용하여 formatMessage를 호출하고 결과를 출력하세요.

직접 해보기

import * as fs from "fs";

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

// TODO: 여기에 코드를 작성하세요
// 타입 가드를 사용하여 processData 함수 생성
// 타입 가드를 사용하여 formatMessage 함수 생성
// 요구 사항에 따라 입력 처리
// 함수를 호출하고 결과 출력