[TypeScript] AdvancedType - 2 (Type Casting)

Type Casting

타입스크립트가 직접 감지하지 못하는 특정 타입의 값을 타입스크립트에게 알려줄 수 있다

 

ex) DOM

querySelector로 요소 하나를 잡는 것은 타입스크립트가 그 요소의 타입을 추론할 수 있게 해준다.

const paragraph = document.querySelector('p');
// const paragraph: HTMLParagraphElement | null

 

그러나 타입스크립트는 HTML 파일을 살펴보고 분석하는 행위를 못한다

위 연산의 결과가 HTMLParagraphElement 이거나 null 이라고 추론한것 뿐이다

 

그래서 Id 값이나 class 값으로 요소를 잡아도 어떤 요소인지는 정확하게 알지 못하고 HTML 요소라고만 추론한다

const paragraph = document.getElementById('message');
// const paragraph: HTMLElement | null

const userInputElement = document.getElementById('user-input');
// const userInputElement: HTMLElement | null

위처럼 HTML요소라고만 추론할 뿐이다.

 

이렇게 되면 userInputElement라는 사용자 입력 요소로부터 값을 뽑거나 하는 행위를 할 수 없다

이유

1. 불러온 값이 null일 수 있다.

2. 모든 HTML요소에 value 프로퍼티가 있는게 아니기 때문이다.

 

userInputElement는 null일수도 있다.

그래서 value를 뽑을 수 없는데, 이 부분은 맨 마지막에 !를 붙여서 해결해줄 수 있다.

const userInputElement = document.getElementById('user-input')!;

이러면 null이 들어오지 않을거라고 타입스크립트에게 알려줄 수 있다.

 

이렇게 고치더라도 모든 HTML요소는 value를 갖지 않기때문에 userInputElement 의 타입을 정확하게 알려줘야 한다

이럴때 사용하는 것이 형변환이다.

 

userInputElement의 타입이 HTMLInputElement일거라는 것은 코드 작성자는 알고 있을거다

그래서 HTMLInputElement로 형변환 시켜주면 문제는 해결할 수 있다

 

두가지 구문으로 가능하다

 

1. <>

const userInputElement = <HTMLInputElement>document.getElementById('user-input')!;

<> 안에 원하는 타입을 넣고 값 앞에 붙여주기만 하면 된다

 

2. as

위 방법은 jsx와의 충돌의 위험이 있다.

그래서 형변환 하고자 하는 것 다음에 as 키워드를 추가해주는 방법이 있다.

const userInputElement = document.getElementById('user-input')! as HTMLInputElement

 

둘중 아무거나 쓰면 되는데 혼합해서 쓰지만 않으면 된다

 

주의할 점은 표현식의 반환값이 해당 타입이 되는게 보장되는지 반드시 확인해야 한다

---

reference : 유데미 타입스크립트 강의

https://www.udemy.com/course/best-typescript-21/