타입스크립트 교과서

목차

• 타입스크립트 시작하기
• 기본 문법 익히기
• lib.es5.d.ts 분석하기
• 타입스크립트 프로젝트 설정하기
• jQuery 타입 분석하기
• Axios 타입 분석하기
• React 타입 분석하기
• Node.js 타입 분석하기
• Express 타입 분석하기
• 패키지 직접 타이핑하기

머릿말

이번에 운좋게 길벗 출판사에서 도서 리뷰에 신청해서 당첨이 되었다. 일단 우리 회사에서는 기본적으로 타입스크립트를 사용하기 때문에 타이핑하는 것은 익숙하나 한번도 조금이라도 들여다보려고 한적이 없었고, 마침 Okky에서 글을 보고서 바로 신청을 했었다. 일단 저자분은 내적친밀감이 그득그득한 제로초님이였다. 항상 팩폭으로 때려주는 그분... 제로초님 채널

책의 첫인상 

• 기본기 끊고 바로 분석 !

목차를 보면 알겠지만 첫번째 장에서 기본 문법을 끊고 바로 현재 사용되는 라이브러리나, built-in 메소드들은 타이핑이 어떻게 되었는지 실습과 함께 같이 뜯어보게된다. 공부는 읽는게 아닌, 직접 타이핑하고 이미 정답으로 만들어 놓은 코드를 파악하면서 왜 이걸 이렇게 타이핑했는지 몸소 느끼면서 공부하라는 필자의 의지가 느껴진다.

기억나는 점

• 제네릭을 함수처럼 사용하고, 제약을 걸기

  • 제너릭이란 ?

    선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법

선언 시점에 어떤 값이 들어갈지 모르는 경우에 아래처럼 제너릭을 사용하여 처리할 수 있고 보통 타입을 상속받을때 사용하는 extends는 오히려 제네릭에 사용하게되면 제약을 걸어주게 되면서 제가 타입을 또한 컨트롤 할 수 있게 됩니다.

• 오버로딩

  함수의 타입을 미리 여러개 타이핑을 해두는데, 2-3가지 정해져있는 시나리오가 있다면 정말 괜찮을 것 같았다. 좌측은 '+' 연산자를 문자열과 숫자를 같이 쓸 수 없다는 에러지만 애초에 인자로 입력이 되서는 안되게끔 하려면 우측처럼 오버로드를 할 수 있다. 그리고 실제로 사용하면서 이 에러를 많이 봤었는데, 이게 이런 에러였는지 보면서 알았다.

• in 을 이용한 타입 좁히기

  in 키워드는 객체가 특정 속성을 가지고 있는지 여부를 런타임에 검사할 때 사용된다. 여러 타입이 혼합된 배열을 처리하거나, 여러 종류의 객체를 받아 각각의 타입에 맞는 처리를 해야 하는 함수를 작성할 때 in 키워드를 사용하면, 각 타입의 특성을 정확히 식별하고 활용할 수 있을 것 같은데 현업에서 꼭 사용해보고 싶었다.

• lib.es5 Axios, React 타입 분석

  일단 평소에 많이 사용하고 있던 타입스크립트 유틸리티 타입들은 서로간의 조합으로 긴밀하게 중첩을 상쇄시키면서 구현되어 있던 것을 처음 알게 되었고 생각보다 단순하고 제네릭을 통해서 저렇게 유기적으로 엮어 있는게 인상적이였다. 그리고 자바스크립트 내장 메소드들 같은 경우가 정말 제네릭 개념을 잡는데 도움이 많이 되는 예제였고 제일 유익했던 챕터 같았다. 정확히 쓰임새는 아는데, 그걸 토대로 제네릭으로 잡아가면서 느낀바가 많다. 그리고 Axios Instance의 전반적인 타입, 리액트 훅들과 JSX 엘리먼트들의 타입을 쓱 훑고 그 뒤에 해당 타입들의 구조로 새로 만들어서 똑같이 구현해보는 작업을 모두하게 되는데, 그냥 보면 절대로 안들어올 내용 같은게 그나마 좀 나았지만 그래도 어려웠던건 사실이다. 아무래도 타입이 상속에 상속을 거치고 그를 파고 들어가서면 왜 그런지 알아가는데, 책을 따라 가는데도 좀 벅차다는 생각이 들었다.

마무리

일단 책을 전부 읽지 못했다. 현재 업무를 하면서 갈증을 느꼈던 제네릭부분과 프론트엔드 부분을 이번 주말동안 보면서 느낀점을 간략하게 적었고 계속 읽어나가고 업데이트 할 예정이다.. 노드부분과 jquery쪽도 있고 실습이 너무 많다. 일단 리뷰어로써 리뷰 기간이 정해져있기 때문에 빨리 적어보았다.