기본 패턴
ts
function printId(id: string | number) {
if (typeof id === "string") {
console.log(id.toUpperCase());
} else {
console.log(id.toFixed(0));
}
}설명
- narrowing은 분기 조건을 통해 값의 가능한 타입 범위를 더 좁게 만드는 과정입니다.
typeof,instanceof,"prop" in obj, 엄격 비교, 사용자 정의 타입 가드 함수가 대표적인 도구입니다.- TypeScript는 제어 흐름을 따라가며, 특정 분기 안에서 값의 타입이 더 구체적이라고 추론합니다.
- 그래서 union 타입은 선언만으로 끝나지 않고, 실제 사용하는 위치에서 narrowing과 함께 설계해야 제대로 힘을 냅니다.
- 이 메커니즘을 이해하면
unknown, API 응답, 상태 객체 같은 복잡한 값도 훨씬 안전하게 다룰 수 있습니다.
짧은 예제
ts
type Result =
| { ok: true; value: string }
| { ok: false; error: Error };
function handle(result: Result) {
if (result.ok) {
return result.value.toUpperCase();
}
return result.error.message;
}빠른 정리
| 도구 | 좁히는 방식 |
|---|---|
typeof | 원시 타입 분기 |
instanceof | 클래스 인스턴스 분기 |
in | 특정 프로퍼티 존재 여부 분기 |
| 비교식 | literal 값 분기 |
| 사용자 정의 가드 | 재사용 가능한 확인 로직 |
주의할 점
분기 조건이 곧 타입 설계의 일부라고 생각하는 편이 좋습니다. 특히 union을 많이 쓸수록 "어떻게 좁힐 것인가"를 함께 설계해야 코드가 깔끔해집니다.
참고 링크
1 sources