-
Type Casting(타입 형변환)TypeScript 2023. 6. 5. 17:54
타입 캐스팅은 크게 두 가지 상황에서 사용된다.
1️⃣정확한 타입 추론
타입스크립트가 값의 타입을 추론하지 못할 때 명시적으로 타입을 지정하여 컴파일러에게 알려준다.
2️⃣타입 변환
특정 타입의 기능과 속성을 사용하려고 할 때 사용할 수 있다.
즉, 타입스크립트에서 컴파일러가 직접 감지하지 못하는 특정 타입의 값을 타입스크립트에게 알려주는 역할을 한다.
예를들어 DOM에 있는 HTML요소를 조작한다고 가정해보자.
//<HTML> <body> <p id="title"></p> <input type="text" id="user-input"></input> </body> //app.ts const htmlElement = document.querySelector('p');
htmlElement는 HTML요소나 null로 추론하고 있다.HTML요소를 사용해서 텍스트 내용에 접근하거나,
다른 DOM을 조작하는 작업도 할 수 있겠지만, input의 value값을 가져올 때는 어떻게 해야할까..
value를 확인해보면 HTMLElement속성에는 value가 없다고 표시된다.
타입스크립트는 단순히 HTMLElement로 추론하고 있기 때문이다.
기본적으로 HTML요소는 속성을 지원하지 않기 때문에
value를 사용하기 위해서는 명확하게 HTMLInputElement타입임을 알려줘야한다.
타입 캐스팅의 두 가지 방법
1️⃣"<>"을 이용한 타입 캐스팅
const userInputElement = <HTMLInputElement>( document.getElementById("user-input")! );타입을 알려주고자 하는 위치 앞에 꺽쇠를 사용하여 타입을 지정해준다.
2️⃣"as"을 사용한 타입 캐스팅
const inputElement = document.getElementById("user-input")! as HTMLInputElement;
이렇게 HTMLInputElement로 타입이 변환된 것을 확인 할 수 있다.
잘못된 타입 캐스팅은 런타임 오류를 발생시킬 수 있고, 타입의 안정성을 저해할 수 있다.
타입스크립트에서는 가능한 한 타입 추론을 활용하여 타입 안정성을 유지하는것이 좋다.
'TypeScript' 카테고리의 다른 글
[TS기초]객체 타입 (0) 2023.06.15 [TS기초]기본 타입 (0) 2023.06.13 대수 타입 (0) 2023.06.11 [Generic]제네릭 함수 (0) 2023.06.06 인터프리터 언어, 컴파일 언어 (0) 2023.05.29