TypeScript로 타입 좁히기(Type Narrowing)를 쉽게 배우기
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
개발 툴
대상자
- 초보자 및 중급 TypeScript 개발자
- 타입스크립트의 타입 좁히기 기법을 이해하고 싶은 개발자
- 코드 안정성과 유연성을 동시에 고려해야 하는 프로젝트 담당자
핵심 요약
- 타입 좁히기(Type Narrowing)는 union type(예:
string | number)의 변수가 실제로 어떤 타입인지 런타임에서 판단하여 코드 안전성을 높이는 기법 typeof연산자와instanceof연산자를 통해 타입을 좁히는 조건문 작성 가능in연산자로 인터페이스/클래스의 프로퍼티 존재 여부를 기반으로 타입을 구분 가능
섹션별 세부 요약
1. 타입 좁히기의 개념
- Union Type(
string | number)의 경우,toUpperCase()와toFixed()같은 메서드를 사용할 수 없음 - TypeScript는 타입이 모호할 때
if조건문을 통해 타입을 명확히 해야 함 - 예:
typeof value === "string"조건으로 타입을 좁힘
2. `typeof` 연산자 활용
typeof는 런타임에서 값의 타입을 확인하여 타입 좁히기 가능- 예:
```typescript
if (typeof value === "string") {
console.log(value.toUpperCase()); // ✅ string 타입으로 안전하게 사용
} else {
console.log(value.toFixed(2)); // ✅ number 타입으로 안전하게 사용
}
```
3. `in` 연산자로 인터페이스 구분
in연산자는 인터페이스의 프로퍼티 존재 여부를 기준으로 타입을 구분- 예:
```typescript
type Dog = { bark: () => void };
type Cat = { meow: () => void };
function speak(pet: Dog | Cat) {
if ("bark" in pet) {
pet.bark(); // 🐶 Dog 타입으로 좁힘
} else {
pet.meow(); // 🐱 Cat 타입으로 좁힘
}
}
```
4. `instanceof` 연산자로 클래스 구분
instanceof는 클래스 인스턴스 여부를 확인하여 타입을 좁힘- 예:
```typescript
class Car { drive() {} }
class Bike { pedal() {} }
function move(vehicle: Car | Bike) {
if (vehicle instanceof Car) {
vehicle.drive(); // 🚗 Car 타입으로 좁힘
} else {
vehicle.pedal(); // 🚲 Bike 타입으로 좁힘
}
}
```
결론
- 타입 좁히기는 TypeScript의 핵심 기법으로, union type의 안정성을 높이고 런타임 오류 예방에 효과적
typeof,instanceof,in연산자를 통해 타입을 명확히 하되, 조건문의 복잡도를 최소화해야 함- 예제에서처럼 직관적인 조건문을 작성하면, 코드의 가독성과 유지보수성도 향상됨