타입스크립트에서 as 타입 형태로 타입을 지정하는 타입 단언 문법이 있습니다.
이번 글에서는 이러한 타입 단언을 사용할 수 있는 대표적인 경우 몇 가지를
예시 코드를 통하여 정리해보도록 하겠습니다.
1. DOM 요소를 다루는 경우
웹 개발을 진행하는 과정에서 DOM 요소를 많이 다루게 되는데요.
이 과정에서 가져온 DOM 요소의 타입이 null인 경우도 고려하여
HTMLElement | null로 타입을 인식하는 것이 기본적입니다.
이러한 경우, null의 가능성을 배제하여 코드를 작성하고 싶다면
타입 단언을 사용하여 이 과정을 구현해볼 수 있습니다.
// getElementById의 결과가 null인 경우를 배제하여 컴파일러가 인식
const inputElement = document.getElementById("myInput") as HTMLInputElement;
inputElement.value = "Hello World!";
2. API response를 다루는 경우
API 호출 결과로 받은 데이터를 타입스크립트에서 처리하는 경우,
결과 데이터에 대하여 타입 단언 구문을 통하여 타입을 지정해주면
코드 가독성 향상 및 작성 과정에서 매우 유리하게 작용할 수 있습니다.
type User = {
id: number;
name: string;
};
const response = await fetch("/api/user");
const data = (await response.json()) as User; // API 호출 결과 양식이 User 타입임을 가정
console.log(data.name);
3. 커스텀 타입 가드를 구현하는 경우
커스텀 타입 가드를 위한 함수를 구현하는 과정에서
컴파일러가 타입 인지 과정에 혼란이 발생할 수 있습니다.
이러한 경우, 타입 단언을 통하여 컴파일러가 정상 작동하게 도움을 주고
커스텀 타입 가드를 원활하게 구현이 가능하도록 만들어줍니다.
type Fish = { swim: () => void };
type Bird = { fly: () => void };
function isFish(pet: Fish | Bird): pet is Fish {
return (pet as Fish).swim !== undefined; // 이 과정에서 컴파일러가 정상 작동하게 도움
}
// 사용 예시
const myPet: Fish | Bird = { swim: () => console.log("Swim!") };
if (isFish(myPet)) {
myPet.swim(); // 타입이 Fish로 좁혀짐, Swim! 출력
}
4. 타입 좁히기의 방법으로 사용하는 경우
타입 단언은 여러 타입이 가능한 객체에 대하여 특정 타입에 대한 명시를 통하여
간접적인 타입 좁히기의 방법으로도 활용이 가능합니다.
코드 예시는 다음과 같습니다.
type User = { id: number; name: string };
const user: any = { id: 1, name: "jimmy" };
// 타입 단언을 사용해 User 타입으로 간주
const typedUser = user as User;
console.log(typedUser.name); // "jimmy"
위의 코드에서 user 객체의 범위는 모든 객체가 가능한 any로 선언되어 있지만,
타입 명시를 통하여 User 타입으로 간주되어 name 속성을 추출하는 것이 가능해졌습니다.
다만, typeof, instanceof 등의 타입 가드를 통하여 타입 좁히기를 진행한 경우와는 달리
실제 데이터가 예상과 같은 타입이라는 점이 보장되지 않으므로
가능한 타입 가드나 추론의 방법을 먼저 적용하고
타입 단언은 최대한 사용을 지양하는 것을 권장합니다.
이 글이 타입 단언 구문의 활용 사례 이해에 도움이 되셨다면 좋겠습니다.
감사합니다.