[TypeScript] 타입 가드(Type Guard)

📚 타입 가드란 무엇인가요?

타입 가드란 특정 스코프 내에서 변수의 타입을 보장하는 표현식을 의미해요. 이를 활용하면 타입 안전성을 보장하면서도 유연하게 코드를 작성할 수 있어요. 타입 가드는 typeof, instanceof, 사용자 정의 타입 가드 등 여러 형태로 사용할 수 있으며, 이를 통해 런타임에 객체의 타입을 좁혀 나가는 역할을 해요.

 

비유를 들어보자면, 여러 종류의 과일이 섞인 바구니에서 사과만 골라내는 것과 유사해요. 타입 가드는 과일의 종류를 확인하여 사과인 경우에만 특정 작업을 수행하도록 하는 조건문과 같은 역할을 해요.

 

---

🖥️ 타입 가드의 종류

1. typeof 가드

• typeof 연산자는 자바스크립트의 기본 연산자로, 변수의 타입을 문자열로 반환해요. 타입스크립트에서는 이 연산자를 사용하여 기본적인 타입 가드를 적용할 수 있어요. 주로 string, number, boolean, function 같은 기본 타입을 검사할 때 유용해요.

function printId(id: number | string) {
  if (typeof id === "string") {
    console.log("Your ID is: " + id.toUpperCase());  // 문자열일 경우 대문자로 변환
  } else {
    console.log("Your ID is: " + id);               // 숫자일 경우 그대로 출력
  }
}

// 실행 결과
printId("abc");  // Your ID is: ABC
printId(123);    // Your ID is: 123

이 코드에서는 'typeof'를 사용하여 'id' 변수가 문자열인지 숫자인지를 판단합니다.
만약 문자열이면 대문자로 변환하여 출력하고, 숫자라면 그대로 출력합니다.

2. instanceof 가드

• instanceof는 객체가 특정 클래스의 인스턴스인지 확인할 때 사용돼요. 이를 통해 클래스 기반의 객체 타입을 안전하게 체크할 수 있어요.

class Bird {
  fly() {
    console.log("The bird can fly!");
  }
}

class Fish {
  swim() {
    console.log("The fish can swim!");
  }
}

function move(pet: Bird | Fish) {
  if (pet instanceof Bird) {
    pet.fly();   // Bird 인스턴스일 경우
  } else {
    pet.swim();  // Fish 인스턴스일 경우
  }
}

// 실행 결과
const bird = new Bird();
const fish = new Fish();
move(bird);  // The bird can fly!
move(fish);  // The fish can swim!

여기서는 'Bird' 클래스와 'Fish' 클래스 인스턴스를 구분하여 각각의 메서드를 호출합니다.
'Bird' 인스턴스는 'fly()'를, 'Fish' 인스턴스는 'swim()'을 호출합니다.

3. 사용자 정의 타입 가드

• 사용자 정의 타입 가드는 pet is Fish와 같은 특별한 형식의 반환 타입을 가지며, 런타임에 타입을 좁히는 데 사용돼요.

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

const pet = getSmallPet();  // Fish 또는 Bird 반환
if (isFish(pet)) {
  pet.swim();  // Fish 타입 확인 시
} else {
  pet.fly();   // Fish 타입이 아닌 경우
}

// 실행 결과 예측
// 만약 pet이 Fish 타입이라면:
// The fish can swim!
// 만약 pet이 Bird 타입이라면:
// The bird can fly!

여기서 'isFish' 함수는 'pet'이 'Fish' 타입인지 확인합니다.
'true'일 경우 'Fish'의 'swim()' 메서드를 호출하고, 'false'일 경우 'Bird'의 'fly()' 메서드를 호출합니다.

 

---

🤔 타입 가드의 고급 활용 방법

타입스크립트의 타입 가드는 단순한 타입 확인을 넘어서, 보다 복잡한 로직 구현에도 유용하게 사용돼요.

1. 타입 가드를 활용한 조건부 타입

• 타입 가드를 통해 반환 타입을 조건에 따라 결정할 수 있어요. 이는 복잡한 로직에서 특히 유용하죠. 예를 들어, 함수가 여러 타입을 반환할 수 있는 경우, 타입 가드를 사용하여 각각의 조건에 맞는 타입을 안전하게 처리할 수 있어요.

function isNumber(x: any): x is number {
  return typeof x === "number";
}

function example(foo: number | string) {
  if (isNumber(foo)) {
    return foo.toFixed(2);  // foo는 number로 추론됩니다.
  } else {
    return foo.charAt(0);   // foo는 string으로 추론됩니다.
  }
}

// 실행 결과
console.log(example(10.123));  // "10.12"
console.log(example("hello")); // "h"

이 코드에서는 'isNumber' 함수를 통해 'foo' 변수의 타입이 숫자인지를 확인합니다.
숫자 타입일 경우 소수 두 자리까지 표시하는 문자열로 변환하고, 문자열 타입일 경우 첫 글자만 반환합니다.

2. 타입 가드와 제네릭 타입

• 타입 가드는 제네릭 타입과 결합되어 더욱 강력해질 수 있어요. 제네릭을 사용하면 함수나 클래스가 다양한 타입과 함께 작동할 수 있으며, 타입 가드는 이러한 타입들을 런타임에 검사하여 적절한 타입을 확보하는 데 도움을 줘요.

function isString<T>(data: T | string): data is string {
  return typeof data === "string";
}

function processData<T>(data: T | string) {
  if (isString(data)) {
    console.log(data.toUpperCase());  // data는 string으로 추론됩니다.
  } else {
    console.log(data);               // data는 T로 추론됩니다.
  }
}

// 실행 결과
processData("test");  // "TEST"
processData(123);     // 123

이 코드에서 'isString' 타입 가드는 입력된 'data'가 문자열인지 아닌지를 검사합니다.
문자열일 경우 대문자로 변환하여 출력하고, 그렇지 않을 경우 원래 타입 그대로 출력합니다.

3. 타입 가드를 활용한 고급 패턴 매칭

• 타입스크립트에서 타입 가드는 다양한 패턴 매칭 시나리오에서 유용하게 사용돼요. 복잡한 객체 구조나 배열을 검사할 때, 타입 가드를 사용하면 특정 패턴에 맞는 요소를 안전하게 추출하고 처리할 수 있어요.

interface Admin {
  role: string;
}

interface User {
  email: string;
}

function isAdmin(person: Admin | User): person is Admin {
  return (person as Admin).role !== undefined;
}

function getUserRole(person: Admin | User) {
  if (isAdmin(person)) {
    console.log('관리자입니다:', person.role);  // person은 Admin으로 추론됩니다.
  } else {
    console.log('사용자입니다:', person.email);  // person은 User로 추론됩니다.
  }
}

// 실행 결과
getUserRole({ role: "manager" });  // 관리자입니다: manager
getUserRole({ email: "user@example.com" });  // 사용자입니다: user@example.com

이 코드에서는 'isAdmin' 함수를 통해 'person' 객체가 'Admin' 타입인지 'User' 타입인지를 판별합니다.
'Admin' 타입이면 관리자의 역할을 출력하고, 그렇지 않으면 사용자의 이메일을 출력합니다.

 

---

🚨 주의할 점

1. 정확한 타입 체크: typeof와 instanceof는 제한적인 정보만을 제공해요. 예를 들어, typeof는 null을 "object"로 반환하므로, null 체크를 별도로 수행해야 해요.
2. 커스텀 타입 가드의 오류 가능성: 사용자 정의 타입 가드는 정확히 구현되어야 해요. 잘못 구현된 타입 가드는 런타임 오류를 초래할 수 있으므로, 로직을 철저히 테스트하고 검증해야 해요.
3. 런타임 성능 고려: 타입 가드는 런타임 시점에 실행되기 때문에, 성능에 영향을 줄 수 있어요. 복잡한 타입 가드는 성능 저하를 일으킬 수 있으니, 사용 시 성능을 고려해야 해요.
4. 코드 복잡성 증가: 타입 가드를 과도하게 사용하면 코드의 복잡성이 증가할 수 있어요. 가독성과 유지 관리의 어려움을 피하기 위해 필요한 곳에만 적절히 사용하는 것이 중요해요.
5. 타입 가드의 범위 제한: 타입스크립트의 타입 시스템은 컴파일 시점에 타입을 결정하지만, 타입 가드는 런타임에 동작해요. 따라서 컴파일러는 타입 가드가 런타임에 올바르게 작동한다고 가정하지만, 실제 데이터와 코드의 불일치는 버그를 유발할 수 있어요.

 

---

📖 결론

타입 가드는 타입스크립트를 사용하는 개발자에게 매우 중요한 도구예요. 이를 활용하면 런타임에서 객체의 타입을 안전하게 확인하고, 보다 정확하고 유연한 코드 작성이 가능해져요. 타입 가드를 통해 다음과 같은 이점을 얻을 수 있어요:

1. 타입 안정성 향상: 타입 가드는 변수가 예상한 타입인지 확인함으로써 예기치 못한 타입 오류를 방지하고, 코드 전체의 안정성을 높여줘요.
2. 유지 보수의 용이성: 명확한 타입 구분을 통해 코드를 이해하고 디버그하기가 더 쉬워져요. 이는 장기적으로 코드의 유지 보수 비용을 줄이는 데 도움이 돼요.
3. 다양한 타입 처리 능력: 타입 가드를 사용하면 여러 타입을 유연하게 처리할 수 있어, 함수나 메서드의 재사용성이 높아져요.

하지만 타입 가드를 사용할 때는 주의할 점도 있어요. 코드의 복잡성을 증가시킬 수 있고, 잘못된 사용은 버그로 이어질 수 있기 때문에, 이러한 도구들을 사용할 때는 항상 정확한 구현과 적절한 테스트가 수반되어야 해요. 타입 가드의 올바른 이해와 적절한 활용은 타입스크립트 프로젝트의 성공을 좌우하는 중요한 요소가 될 것이에요.

---

🔗 추가 정보

• 타입스크립트의 타입 가드에 대한 더 깊은 이해를 원하신다면, TypeScript 공식 문서에서 자세한 정보를 찾아볼 수 있어요.