타입스크립트는 컴파일할때만 타입을 체크하기 때문에 런타임때 타입이 바뀌는 타입캐스팅은 없고 여기서 말하는 타입개스킹은 type assertion이랑 같은거임.

Type casting using the as keyword

자바스크립는 변수들이 동적 타입을 가져 타입 캐스팅의 개념이 없지만 타입스크립트는 있음. 타입 캐스팅으로 변수의 타입을 바꿀 수 있음.
as키워드나 <>연산자를 통해서 타입캐스팅을 할 수 있음.

Type casting using the as keyword

document.querySelector()의 리턴 타입이 Element 타입이어서 Element타입에는 value property가 없기에 컴파일 에러가 나옴. value property는 HTMLInputElement 타입에만 있음.

let input = document.querySelector('input["type="text"]');

// compile error
console.log(input.value);

이를 해결하기 위해서는 Element를 HTMLInputElement로 타입캐스팅을 해야함.

let input = document.querySelector('input[type="text"]') as HTMLInputElement;

console.log(input.value);

이제 input 변수는 HTMLInputElement타입을 가지게 됨.
다음과 같이 property에 접근해서 Element를 HTMLInputElement로 캐스팅 할 수도 있음.

let enteredText = (input as HTMLInputElement).value;

HTMLInputElement 타입은 HTMLElement타입을 확장한거고 HTMLElement타입은 Element타입을 확장한거임. 따라서 HTMLElement을 HTMLInputElement로 캐스팅하는거는 다운 캐스팅이 됨.

let el: HTMLElement;
el = new HTMLInputElement();

위 코드에서 e1은 HTMLElement 타입을 가지고 있음에도 불구하고 HTMLInputElement 타입의 인스턴스를 할당가능함. 이게 가능한 이유는 HTMLInputElement타입이 HTMLElement의 서브 클래스 타입이기 때문임.

typeA를 typeB로 바꾸는 구문은 다음과 같음.

let a: typeA;
let b = a as typeB;

Type Casting using the <> operator

as 키워드 말고도 <>연산자로 타입 캐스팅을 할 수 있음.

let input = <HTMLInputElement>document.querySelector('input[type="text"]');

console.log(input.value);

<>를 이용한 타입 캐스팅 구문은 아래와 같음.

let a: typeA;
let b = <typeB>a;

요약

• 타입캐스팅으로 변수의 타입을 바꿀 수 있음
• as 키워드나 <>연산자를 사용해서 타입 캐스팅 가능

출처