타입 단언
타입스크립트에서의 타입 단언이란 개발자가 변수의 타입을 명시적으로 지정할 수 있는 방법.
Q. 타입단언은 주로 어떨 때 사용될까요?
A. 컴파일러가 타입을 정확하게 추론하지 못하거나, 개발자가 특정 상황에서 타입을 더 명확하게 전달할 때 사용됨.
const a = 'hi' as any;as를 통해 타입단언을 사용할 수 있음.
EX)
type Person = { name: string; age: number; }
const b = {} as Person;
b.name = 'Thor';위 코드에서 Person은 { name: string; age: number; } 형태의 객체를 요구하고 있음.
const b = {} as Person;이 부분에서 실제로는 빈 객체 {}지만 as Person로 이 객체가 Person 타입임을 단언하는 과정임.
이와같은 타입 단언은
타입스크립트 컴파일러에게
"다음의 값은 이런 타입을 가진거야 그러니까 에러를 띄우지마!"
라고 말하는 것임.
타입 단언 사용을 할 경우엔 오류가 난 코드를 컴파일 단계에서 발견하지 못하고 런타임 단계까지 가야 발견할 수가 있는데 이는 타입스크립트를 사용하는 장점을 무시한 셈이다...
(any 타입과 마찬가지로 타입단언 또한 남용해선 안됨)
그럼에도 불구하고 타입단언을 사용하는 이유는 무엇인가?
타입 단언의 효용성이 높은 시점은 언제인가?
1. HTML요소에 접근할 때
const Modal: React.FC = () => {
return (
<>
{createPortal(
<Backdrop />,
document.getElementById("backdrop") as HTMLDivElement
)}
{createPortal(
<ModalWrapper />,
document.getElementById("overlay") as HTMLDivElement
)}
</>
);
};위의 코드는 react의 createPortal을 이용해서 Modal 컴포넌트를 만든 예시임.
index.html에 미리 <div id=backdrop>과 <div id=overlay/>를 만들어 두고 위와 같이 사용한다면 타입 단언을 사용해야 함.
2. 외부 데이터 소스와의 상호작용 시
let data: any = fetchDataFromAPI();
let user = data as User; // 데이터가 User 타입임을 단언API 호출이나 외부 라이브러리에서 데이터를 받아올 때 데이터의 타입이 any로 처리되는 경우가 많음. 이때 타입 단언을 사용해서 해당 데이터의 타입을 명확히 지정할 수 있음.
위의 코드에서는 as User를 사용하여 데이터가 User 타입임을 단언하였음
타입 단언으로 특정 타입을 강제할 수 없는 상황은?
타입스크립트의 타입 단언은 컴파일 타임에만 유효하며 런타임에서 실제로 타입이 맞는지 검사하지 않음.
1. 호환되지 않는 타입을 강제하는 경우
let value: any = 42;
let str = value as string; // 런타임 오류 가능위의 코드와 같이 숫자를 문자열로 단언하면 컴파일러는 통과시키지만 런타임에서 오류가 발생할 수 있음.
2. null이나 defined에 대한 잘못된 단언
null 인 값을 특정 객체 타입으로 단언하면, 런타임에서 속성에 접근할 때 오류가 발생할 수 있음.
let someValue: any = null;
let obj = someValue as { name: string }; // null을 객체로 단언3. DOM 요소가 존재하지 않을 때
DOM 요소가 없는 경우에도 타입 단언을 하면, 속성 접근 시 오류가 발생할 수 있음.
let inputElement = document.getElementById("nonExistent") as HTMLInputElement;
inputElement.value = "Hello"; // 런타임 오류
위 코드에서는 nonExistent라는 id를 가진 HTML 요소가 없을 때, null을 입력 필드처럼 사용하려고 해서 오류가 발생할 수 있음.
4. 타입 변환과 혼동
타입단언은 값 자체를 변환하진 않음. 문자열을 숫자로 단언해도 실제 값은 변하지 않기 때문에 런타임 오류가 발생할 수 있음.
let str: any = "123";
let num = str as number; // 변환되지 않음, 오류 가능