Type Guard

타입 가드란 타입 스크립트에서 변수의 타입을 보다 구체적으로 좁혀 코드 안정성을 높이기 위해 사용되는 키워드이다.

우리가 타입 스크립트를 사용하는 이유는 변수의 타입을 엄격하게 확인하여 발생 가능성이 있는 여러 에러 들을 런타임이 아닌 컴파일 타임에 잡아내기 위해서 이다. 쉽게 말해 타입 스크립트가 변수의 타입 추론을 더 원활하게 하기 위해 사용되는 것이다.

간단한 예시를 들어보자.

fuction SampleFn (data: number | string) : void {
    console.log(data + 1);
}

위의 예시 코드를 실행하면 함수의 매개변수가 number 타입인지 string타입인지 확실하지 않은데 매개변수 + 1을 실행하려고 하기 때문에 에러가 발생한다. 이런 경우, 매개변수의 타입에 따라 처리를 분기 할 수 있도록 타입 가드를 사용한다.

주로 typeof, instanceof, in 3 가지 연산들이 사용된다.

typeof

먼저 typeof 연산자는 자바스크립트에서도 사용이 가능하며, 이름 그대로 변수의 타입을 반환한다.

const v1 = typeof "first";
const v2 = typeof 2;
const v3 = typeof true;
const v4 = typeof { age : 10};

console.log(v1, v2, v3, v4) // string number boolean object

때문에 확인하고자 하는 변수의 타입을 직관적이고 간단하게 파악하여 코드를 작성할 수 있다.

typeof 를 사용해 위의 예제 코드를 바꿔보면

function SampleFn (data: number | string){
    if (typeof data === "string") console.log(`${data} + 1`)
    else console.log(data + 1)
}

이렇게 각 타입 별로 분기 처리를 해 다른 출력 결과가 나오게끔 할 수 있다.

typeof 연산자로 반환되는 타입들은 아래와 같다.

string, number, bigint, boolean, symbol, undefined, object, function

in

in 연산자도 typeof와 마찬가지로 자바스크립트에 존재한다. 변수가 특정 속성을 가지고 있는지 확인하여 boolean 값을 반환한다.

interface User {
    name: string;
    age: number;
    address?: string;
}

const user1: User = {
    name: 'aug',
    age: 20,
};

const user2: User = {
    name: 'kuku',
    age: 25,
    address: '서울시',
};

function hasAddress(user: User): boolean {
    return 'address' in user;
}

console.log(hasAddress(user1)); // false
console.log(hasAddress(user2)); // true

User 인터페이스에 옵셔널 프로퍼티인 address를 생성하여 해당 프로퍼티를 가지는 객체, 가지지 않는 객체를 생성했다. in 연산자를 통해 해당 프로퍼티를 가지고 있는지 확인하는 코드이다.

instanceof

instanceof 연산자는 확인하는 변수가 어떤 클래스인지, 어떤 클래스를 상속 받았는지 확인하는 연산자이다. 말이 살짝 어려우므로 간단한 예시 코드를 통해 알아보자.

class User {
  name: string;

  constructor(name: string) {
    this.name = name;
  }
  introduction(): void {
    console.log(`Hi my name is ${this.name}`);
  }
}

class AdminUser extends User {
  constructor(name: string) {
    super(name);
  }
  introduction(): void {
    console.log(`Hi my name is ${this.name}, I am an administrator user.`);
  }
}

class GuestUser extends User {
  constructor(name: string) {
    super(name);
  }
  introduction(): void {
    console.log(`Hi my name is ${this.name}, I am an Guest User`);
  }
}

const user1 = new AdminUser("aug");
const user2 = new GuestUser("kuku");

console.log(user1 instanceof User); // true
console.log(user1 instanceof AdminUser); // true
console.log(user1 instanceof GuestUser); // false

console.log(user2 instanceof User); // true
console.log(user2 instanceof AdminUser); // false
console.log(user2 instanceof GuestUser); // true

위 코드에서 AdminUser 클래스와 GuestUser 클래스는 User 클래스를 상속받는다. 각 클래스의 인스턴스인 user1과 user2를 instanceof 연산자로 확인해보면 뿌리 클래스인 User와 각 인스턴스의 부모 클래스은 true를 반환하지만 다른 클래스는 false가 나오는 것을 확인 할 수 있다.

필자는 주로 try catch 문을 통해 에러를 핸들링 할 때 instanceof 연산자를 사용한다.

import axios, { AxiosError } from 'axios';

class ApiError extends Error {
    constructor(message: string) {
        super(message);
        this.name = 'ApiError';
    }
}

async function fetchData() {
    try {
        const response = await axios.get(API_ENDPOINT);
        console.log('Data:', response.data);
    } catch (error) {
        if (error instanceof AxiosError) {
            // AxiosError 타입의 에러인 경우
            console.error(`AxiosError: ${error.message}`);
            throw new ApiError('Failed to fetch data from the API.');
        } else {
            // 다른 종류의 에러인 경우
            console.error(`Unknown error: ${error}`);
            throw new ApiError('An unknown error occurred.');
        }
    }
}