TypeScript
여러 타입 중 하나를 조건으로 구분하기
유니온은 가능한 타입들을 나타내고 조건문으로 사용할 타입을 좁힙니다.
이럴 때 필요해요
문자열이나 숫자로 받은 번호를 같은 형식으로 표시합니다.
어떻게 동작하나요?
한 값이 문자열 또는 숫자일 수 있다면 string | number라고 적습니다. |는 둘 중 하나일 수 있다는 뜻이지 두 타입의 모든 기능을 동시에 쓸 수 있다는 뜻은 아닙니다.
문자열 전용 메서드를 쓰려면 먼저 값이 문자열인지 확인해야 합니다. typeof 조건을 확인하면 해당 분기 안에서 TypeScript가 타입을 더 구체적으로 판단합니다.
아래 함수는 문자열이면 공백을 지우고 숫자이면 문자열로 바꿉니다. 성공과 실패 객체를 구분하는 판별 유니온은 이 원리를 확장한 것으로 원리 단계에서 배웁니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
function label(id: string | number): string {
if (typeof id === "string") return id.trim();
return String(id);
}
console.log(label(" A1 ")); // A1조건문 뒤 각 분기에서 사용 가능한 기능이 달라집니다.
자주 헷갈리는 포인트
- 검사 없이 문자열 전용 메서드를 호출하지 않습니다.
- as를 붙여 경고만 없애는 것을 실제 검사와 혼동하지 않습니다.
내 말로 설명해 보기
검사 전 id.trim()을 바로 쓰면 왜 문제가 될까요?
생각할 단서 예제의 값을 하나 바꿔 보고, 바뀌는 부분과 그대로인 부분을 구분해 보세요.
예시 답변 확인
설명에 들어갈 핵심
- 유니온은 가능한 타입들을 나타내고 조건문으로 사용할 타입을 좁힙니다.
- 조건문 뒤 각 분기에서 사용 가능한 기능이 달라집니다.
예시 답변
id가 숫자일 수도 있고 숫자에는 trim 메서드가 없기 때문입니다. typeof로 문자열인 분기에서 호출할 수 있습니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.