13강 메인주제는 타입 단언! 타입단언은 컴파일러보다 개발자가 해당 타입에 대해 확신을 할 수 있을 때 사용한다!
1. 타입단언 소개
먼저 할당을 하지 않은 변수 a가 있다고 하자. 해당 변수에는 아직 특정 타입을 지정하지도, 값을 할당하지도 않았기 때문에 TS가 any라고 타입을 추론한다.
만약 이런 상황에서 b라는 변수에 a를 할당하면 당연히 변수 b의 타입은 any가 될 것이다.
만약 b라는 변수에 a를 할당하기 전에 a들에 특정 값을 할당한다면 어떻게 될까? 강의 진행상 선언한 a는 var로 선언되었기 때문에 재할당 및 재선언이 가능하다.
분명 사이사이에 값을 할당했기 때문에 a는 변경이 되었고 그럼 당연히 나중에 a를 b에 할당시키면 b도 a에 마지막으로 할당된 데이터의 타입으로 타입이 추론되어야할거같은데... a의 타입이 any가 나온다... 왜일까??
바로 타입 추론 방식으로는 코드들을 추적할 수 없기 때문에 맨처음에 설명된 any 타입을 b에 할당하게 되면서 b의 타입이 any가 되는 것이다.
하지만 코드를 작성한 개발자들은 안다. 저 a가 현재 string 타입이라는 것을
그리고 그런 a를 할당받은 b역시 string이라는 것을!
그래서 맨처음 설명한 것처럼 컴파일러보다 개발자가 해당 타입에 대해 확신을 할 수 있을 때 사용하는 것이 바로 타입단언이다. 타입단언의 키워드는 as다.
b에 a를 할당한 이후 as 키워드를 작성하고 string을 적으면 b의 타입이 string이 된것을 확인할 수 있다.
2. 타입단언 예제
타입단언을 가장 많이 사용하는 곳은 DOM API다.
DOM API: document에서 제공하는 접근자, 웹페이지의 태그정보에 접근하고 조작할 수 있는 API
dom에서 제공하는 수많은 api중 가장 많이 사용하는 것은 querySelector를 예시로 타입단언을 설명해보고자 한다.
먼저 querySelector로 div요소를 지정해서 해당 요소안에 innerText로 데이터를 넣으려고 한다고 생각해보자.
그럼 이렇게 let으로 선언된 div의 타입추론은 HTMLDivElement 또는 null로 추론이 된다.
여기서 innerText로 데이터를 넣으려고하면 div는 null일 수 있다는 에러가 발생한다.
그럼 개발자는 이 div가 null이 아님을 보장해야한다. 그러기 위해서 사용할 수 있는 첫번째 방법은 조건문이다.
if를 사용해 div가 true일 경우에만 innerText를 사용할 수 있도록 하는 방법이다.
두번째로는 타입단언을 사용할 수 있다.
이 div는 확실하게 HTMLDivElement야 라고 단언을 해주면 에러없이 사용할 수 있게 된다.
if문은 런타임에 실행되어 변수의 값에 따라 코드를 실행하거나 건너뛸 수 있지만, 타입 단언은 컴파일 타임에 TypeScript 컴파일러에게 정보를 전달하여 가독성과 유연성을 제공한다.
또한, 타입 단언은 if문보다 더 간결하고 명시적일 수 있으며, 코드를 더 깔끔하게 만들어 줄 수 있다.
하지만, 잘못된 타입 단언은 오류를 발생시킬 수 있으므로 신중하게 사용해야 한다!
