웹 애플리케이션을 개발하다 보면 외부 라이브러리를 사용하거나 API와 통신할 때 타입 관련 이슈에 부딪힐 때가 있습니다. 이때 TypeScript에서는 타입 가드와 타입 단언을 사용하여 이러한 문제를 해결할 수 있습니다. 이번 포스트에서는 각각의 사용 사례에 대해 살펴보겠습니다.

타입 가드 (Type Guards)

타입 가드(Type Guard) 는 런타임 중에 객체의 타입을 확인하고 해당 타입에 따라 다른 동작을 수행할 수 있도록 도와주는 TypeScript의 개념입니다. 특히 웹 애플리케이션에서 외부 라이브러리나 API와의 상호 작용 시 코드 안정성을 높이는 데에 유용합니다.

예를 들어, 웹 애플리케이션에서 서버로부터 받은 데이터가 여러 타입으로 이루어진 경우, 이 데이터를 처리할 때 타입 가드를 활용할 수 있습니다. 다음은 instanceof를 사용한 간단한 타입 가드의 예시입니다.

class Car {
    drive() {
        console.log('Driving a car');
    }
}

class Truck {
    load() {
        console.log('Loading cargo');
    }
}

function isCar(vehicle: Car | Truck): vehicle is Car {
    return (vehicle as Car).drive !== undefined;
}

let vehicle: Car | Truck = new Car();

if (isCar(vehicle)) {
    vehicle.drive(); // TypeScript는 여기서 vehicle을 Car로 타입 추론합니다.
} else {
    vehicle.load(); // TypeScript는 여기서 vehicle을 Truck으로 타입 추론합니다.
}

위 코드에서 isCar 함수는 vehicle이 Car인지 확인하고 해당하는 타입으로 추론하도록 도와줍니다.

타입 단언 (Type Assertion)

타입 단언(Type Assertion) 은 TypeScript 컴파일러에게 개발자가 특정 값의 타입을 확신한다고 알려주는 것을 말합니다. 주로 외부 라이브러리와 상호 작용하거나 타입 추론이 어려운 경우에 사용됩니다.

웹 애플리케이션에서는 주로 API와의 통신에서 타입 단언을 사용합니다. 다음은 axios를 사용하여 API로부터 데이터를 가져오는 예시입니다.

interface User {
    id: number;
    name: string;
}

async function getUser(): Promise<User> {
    const response = await axios.get('/api/user');
    return response.data as User; // 타입 단언을 사용하여 response.data가 User 타입임을 명시함
}

위 코드에서 response.data에 대한 타입 추론이 어려운 상황에서 타입 단언을 사용하여 TypeScript에게 response.data가 User 타입임을 확신시킵니다.

타입 가드와 타입 단언은 TypeScript를 사용하여 웹 애플리케이션을 더욱 안정적이고 효율적으로 개발하는 데에 큰 도움이 됩니다.

이상으로 타입 가드와 타입 단언의 사용 사례에 대해 알아보았습니다.