browser를 대상으로 소프트웨어 개발중 typescript를 쓰면서 개인적으로 헛갈리던 사항들 메모

[boojongmin]

몇일전에 js만 쓰던 프로젝트에 타입스크립트를 올려보고 코딩을 하다가 좀 버벅댔던 것들에 대해 메모를 해본다.

* js의 시그네처는 nullable하게 설계한지 알았는데 아님

js 파일의 시그니처가 이렇게 되어있으면

타입스크립트에서는 이렇게 not null로 인식한다.

undefined에 익숙한 js뇐네들은 헤갈릴수 있음

언어 설계측면에서 차라리 이게 에러를 더 줄일수 있겠다라는 판단이 들었을거라 유추해봄

* 타입들에 대한 관계 및 제네릭에 대해 이해를 하고 있어야한다.

querySelector 이후 focus를 못가져오길래 이상함.

확인해보니 기본은 Element고 extends한 타입이면 들어올수 있기에 아래의 그림과 같이 HTMLElement 타입을 제네릭에 넣어주야함.
근데 이 관계들에 대해서 처음해본 사람은 쉽게 몰랐을듯. 대충 통밥으로 이렇게 되면 되겠구나하고 돌려봤음

* 브라우저에서 전역 window 객체의 모든 프로퍼티를 제공하지 않는다

window.URL이 브라우저에서 지원함에도 불구하고

위의 이미지처럼 URL 타입이 선언되어있지 않는다.(location과 다르게)

아마 브라우저 support 때문으로 추측 살펴보니

[참고](https://caniuse.com/?search=URL)

브라우저 서포트를 보면 IE11이 지원 안하니 ms 주도인 typescript는 안해주는 느낌적인 느낌.

암튼 typescript의 DefinitelyTyped를 작성하는 주체에 따라 다를수 있다는것을 이해하고 타입을 바라보는 것이 필요하겠다는 생각이 듬.
(크롬으로 정리되었다고 생각했던 브라우저 전쟁은 진행중?)

내가 생각한 해결을 위한 방법은 일단 두가지인데

1. 걍 URL.createObjectURL을 사용
2. global-d-ts에 정의

위 선택지에서 2의 경우는 손이 많이 가서
1을 선택했는데 그래도 뭔가 어색한게 있다.
�내가 생각하는 window는 global scope라고 생각해야하는데
타입스크립트와 만나면서 뭔가 생각을 어그러트린다는 생각이 든다 (물론 window는 없이 쓸 수도 있기 때문에 문제 없는거라 생각할 수 있지만 일단 window 안에 있을거라는 기대에는 틀린거고 window 없이 바로 URL로는 호출 할 수 있는 것이 맞다는건 뭔가 이상하다.)

기존에 js 개발자들이 typescript에 넘어올 때

단순하게 타입스크립트를 접근할때

위의 이미지로만 접근하면 타입으로 큰코 다칠수 있다는 걸 느끼는중
(기존의 js 경험이 많을수록 더 힘들 수도 있겠다란 생각? 오히려 주니어들이 자연스럽게 받아들일지도?)

나는 자바에 익숙하니 그럴려니하는데
js만 하던분들은 조금 힘들어 할 수 있겠다 싶음

작성한 내용은 모두 하나의 컴포넌트를 만들다가 헤갈렸던 것들임(꽤 많이 코딩하다가 정리한게 아님. 필자는 타입스크립트 어린이임)

---

node로 백엔드도 개발을 하므로 타입스크립트가 javascript에 대해서지 browser와 같은 front 환경만 타게팅이 아니라는 관점을 갖고 있어야한다는게 필요하겠다.(본인은 백엔드는 javascript로 개발해본적이 정말 간단한거 외에는 없음 대부분 자바/코틀린임)

처음에 뷰가 잘못되면 그걸 고치는 비용이 더 큰 것과 같은 맥락

---

참고로 location을 webstorm으로 찾아 들어가보니 dom 관련으로 typescript sdk에 포함되어있음.
위에 내가 말한대로 typescript가 언어만 봐야한다는 개념에서는 틀린 구조긴한데 일단 컨셉잡고 적절히 생각하면 될듯

& location이 bom이 아니고 dom에 있네?