TS) 타입가드 Type Guard

 

 

타입 가드(Type Guard)**는 TypeScript에서 특정 값이 어떤 타입인지 판별하는 기능.
유니온 타입이나 타입이 확실하지 않은 값을 처리할 때 매우 유용.

---

✅ 타입 가드(Type Guard)란?

타입 가드는 런타임에서 타입을 좁히는(Narrowing) 역할.
즉, 특정 조건을 만족하면 TypeScript가 해당 변수의 타입을 더 구체적으로 인식할 수 있도록 도와줌.

예제) 타입 가드 없이 타입 오류 발생 🚨

function printLength(value: string | number) {
  console.log(value.length); // ❌ 오류: 'number'에는 'length' 속성이 없음
}

위 코드는 number 타입에는 length 속성이 없기 때문에 오류가 발생.

✅ 타입 가드를 사용하면 이를 해결할 수 있음.

---

🔹 1. typeof 타입 가드

가장 기본적인 방법으로 typeof 연산자를 사용하여 타입을 판별합.

function printLength(value: string | number) {
  if (typeof value === "string") {
    console.log(value.length); // ✅ 문자열이면 length 사용 가능
  } else {
    console.log(value); // ✅ 숫자라면 그냥 출력
  }
}

printLength("hello"); // 5
printLength(1234);    // 1234

🔍 typeof가 검사할 수 있는 타입

typeof는 **기본 타입(primitive type)**만 검사할 수 있음.

타입 typeof 결과

string	"string"
number	"number"
boolean	"boolean"
bigint	"bigint"
symbol	"symbol"
undefined	"undefined"
function	"function"
object	"object" (배열, 객체, null 포함)

---

🔹 2. instanceof 타입 가드

클래스(객체) 타입을 판별할 때 instanceof를 사용.

class Dog {
  bark() {
    console.log("멍멍!");
  }
}

class Cat {
  meow() {
    console.log("야옹!");
  }
}

function makeSound(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    animal.bark(); // ✅ Dog 타입이면 bark() 사용 가능
  } else {
    animal.meow(); // ✅ Cat 타입이면 meow() 사용 가능
  }
}

makeSound(new Dog()); // "멍멍!"
makeSound(new Cat()); // "야옹!"

• instanceof는 객체의 생성자를 기반으로 타입을 판별.
• Dog인지 Cat인지 판별하여 적절한 메서드를 호출할 수 있음.

---

🔹 3. in 연산자 타입 가드

객체에 특정 속성이 존재하는지를 검사하는 방식.

type User = { name: string; email: string };
type Admin = { name: string; permissions: string[] };

function printUserInfo(person: User | Admin) {
  if ("email" in person) {
    console.log(`User Email: ${person.email}`); // ✅ User 타입이면 email 사용 가능
  } else {
    console.log(`Admin Permissions: ${person.permissions.join(", ")}`); // ✅ Admin 타입이면 permissions 사용 가능
  }
}

printUserInfo({ name: "Alice", email: "alice@example.com" }); // User Email: alice@example.com
printUserInfo({ name: "Bob", permissions: ["read", "write"] }); // Admin Permissions: read, write

• "email" in person을 사용하여 User 타입인지 확인
• "permissions" in person을 사용하여 Admin 타입인지 확인

---

🔹 4. 사용자 정의 타입 가드 (is 키워드)

함수의 반환 타입을 param is Type 형식으로 지정하여 직접 타입을 판별할 수 있음.

type Car = { brand: string; speed: number };
type Bike = { brand: string; gears: number };

function isCar(vehicle: Car | Bike): vehicle is Car {
  return "speed" in vehicle;
}

function describeVehicle(vehicle: Car | Bike) {
  if (isCar(vehicle)) {
    console.log(`Car brand: ${vehicle.brand}, Speed: ${vehicle.speed}`);
  } else {
    console.log(`Bike brand: ${vehicle.brand}, Gears: ${vehicle.gears}`);
  }
}

describeVehicle({ brand: "Toyota", speed: 120 }); // Car brand: Toyota, Speed: 120
describeVehicle({ brand: "Giant", gears: 18 }); // Bike brand: Giant, Gears: 18

• isCar(vehicle)을 통해 Car 타입인지 판별
• vehicle is Car를 반환 타입으로 지정하면, if (isCar(vehicle)) 내부에서 vehicle이 Car 타입으로 추론됨

---

✅ 정리

방법 사용 대상 예시

typeof	기본 타입(string, number, boolean 등)	if (typeof value === "string")
instanceof	클래스(객체)	if (obj instanceof ClassName)
in 연산자	객체의 속성 검사	if ("property" in obj)
사용자 정의 타입 가드 (is)	커스텀 타입 검사	function isCar(obj): obj is Car

TypeScript에서 타입 가드를 활용하면 더 안전하고 예측 가능한 코드를 작성할 수 있음

 

 

 

 

 

 

 

참고 쳇 gpt, 제로베이스강의