고급 TypeScript - 타입 가드와 고급 타입: 사용자 정의 타입 가드
타입 가드와 고급 타입: 사용자 정의 타입 가드
타입 가드는 TypeScript에서 변수의 타입을 확인하고 좁히기 위한 방법입니다. 이를 통해 코드의 안전성을 높이고, 특정 조건에 따라 변수가 어떤 타입인지 명확하게 알 수 있습니다. 사용자 정의 타입 가드는 개발자가 직접 만든 함수로, 특정 조건을 만족할 때만 해당 변수를 특정 타입으로 간주하도록 합니다.
사용자 정의 타입 가드
사용자 정의 타입 가드는 is
키워드를 사용하여 특정 조건을 검사하는 함수를 작성함으로써 구현됩니다. 이 함수는 주어진 인자가 원하는 타입인지 확인한 후, 그 결과를 기반으로 해당 변수를 좁힐 수 있게 해줍니다.
예제:
interface Dog {
bark: () => void;
}
interface Cat {
meow: () => void;
}
function isDog(pet: Dog | Cat): pet is Dog {
return (pet as Dog).bark !== undefined;
}
const myPet: Dog | Cat = { bark: () => console.log("Woof!") };
if (isDog(myPet)) {
// 여기서 myPet은 Dog로 간주됨
myPet.bark(); // "Woof!" 출력
} else {
// 여기서 myPet은 Cat로 간주됨
(myPet as Cat).meow();
}
위 예제에서는 Dog
와 Cat
이라는 두 가지 인터페이스가 있습니다. isDog
라는 사용자 정의 타입 가드를 통해 myPet
이 실제로 Dog
인지 확인합니다. 이 방식으로 코드를 작성하면, 각 경우에 맞는 메소드를 안전하게 호출할 수 있습니다.
고급 활용 사례
사용자 정의 타입 가드는 복잡한 데이터 구조에서도 유용하게 사용할 수 있습니다. 예를 들어 API 응답이 다양한 형태일 때, 이를 구분하기 위해 사용자 정의 타입 가드를 만들 수 있습니다.
예제:
type ApiResponse =
| { type: 'success'; data: string }
| { type: 'error'; message: string };
function isSuccess(response: ApiResponse): response is { type: 'success'; data: string } {
return response.type === 'success';
}
const response1 = { type: 'success', data: "Operation was successful!" };
const response2 = { type: 'error', message: "Something went wrong." };
if (isSuccess(response1)) {
console.log(response1.data); // "Operation was successful!"
} else {
console.error(response2.message);
}
여기서는 API 응답이 성공 또는 오류일 때 각각 다른 처리를 하고자 합니다. isSuccess
함수를 통해 응답의 상태를 체크하고 이에 따라 적절한 로직을 수행합니다.
요약
- 타입 가드는 변수의 유형을 결정하는 데 도움을 줌.
- 사용자 정의 타입 가드는 개발자가 직접 만든 함수로, 특정 조건에 따라 변수를 좁힐 수 있음.
- 이러한 기법들은 코드의 안정성과 유지보수성을 향상시키며, TypeScript의 강력한 정적 타이핑 기능을 최대한 활용할 수 있게 해줍니다.
이러한 개념들을 이해하고 활용한다면 더욱 안전하고 효율적인 TypeScript 프로그래밍이 가능해질 것입니다!