형 변환(typecasting)

급변하는 기술 시장에서 살아남기 위해 Typescript 공부를 시작하였습니다...
과연 저는 살아남을 수 있을까요?!

👀 들어가기에 앞서...

타입스크립트에서 형 변환(typecasting)에 대해 알아보도록 하겠습니다.

👀 형 변환이란

형 변환은 타입스크립트가 직접 감지하지 못하는 특정 타입의 값을 타입스크립트에 알려줍니다.

예시를 들어볼까요?
dom에 접근할 때 타입스크립트가 해당 dom을 제대로 인식하지 못할 때가 있습니다.
이 때 형 변환이 유용합니다.

설명에 앞서, dom을 타입스크립트에서 제대로 사용하려면
다음과 같이 tsconfig파일의 lib를 설정해줍니다.

tsconfig

"lib":[
  "dom",
],

이제 형 변환을 하기 위한 두 가지 방법에 대해 설명 드리도록 하겠습니다!

1. 꺽쇠 사용하기

dom엘리먼트에 접근할 때 다음과 같이 앞에 꺽쇠를 사용하여 어떤 엘리먼트인지 알려줍니다.
(꺽쇠를 \ 를 이용해 표시했는데 벨로그가 제대로 인식을 못하네요 ㅠㅠ)

const elInput=<HTMLInputElement>document.querySelector('#input-text1')!;
elInput.value='내 텍스트';

!는 객체가 null이지 않다는 뜻으로 표시한 것입니다.

2. as 사용하기

만약 리액트를 사용한다면 <HTMLInputElement> 부분이 충돌날 수가 있습니다.
이 때 위 예제를 아래와 같이 as로 표현할 수 있습니다.

const elInput=document.querySelector('#input-text1')! as HTMLInputElement;
elInput.value='내 텍스트';

만약 느낌표를 사용하지 않는다면 위 구문은 다음과 같이도 표현할 수 있습니다.

const elInput=document.querySelector('#input-text1');
if(elInput){
   (elInput as HTMLInputElement).value='내 텍스트';
}

😝 마무리

오늘은 형 변환에 대해 알아보았습니다.
어렵지만 예제를 확인하면서 차근차근 살펴보니 조금씩 이해가 되는 느낌이 듭니다...!

저는 다음 시간에도 살아남을 수 있을까요?!😂

• 참고:
  • Typescript 공식문서: https://www.typescriptlang.org/docs/handbook/basic-types.html
  • 【한글자막】 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS
    https://www.udemy.com/course/best-typescript-21/