대부분의 현업 프로젝트에서는 ts 사용을 거의 필수적으로 하고있다.
왜 그럴까?
안정성을 위해서다.
js와는 다르게 타입이 추가된 것이 ts이다.
타입체크를 통해 더욱 안정적인 개발을 할 수 있게 해준다.
게다가 js를 알고있으면 ts에 대한 러닝커브도 그렇게 크지 않다고 하니 배우지 않을 이유가 없었다.
인프런에서 조현영님의 [타입스크립트 올인원 part1] 강의를 수강하며 이곳에 기록한다.
목표
본 강의의 최종 목표는 axios, react와 같은 js기반 라이브러리들의 타입을 스스로 분석할 수 있게 되는 것이다.
이를 통해 처음 마주하는 라이브러리를 분석하고 더 용이하게 사용할 수 있을 것이다.
배경지식
가장 중요한 것은 ts는 js로 변환된다는 사실이다.
애초에 ts는 실행이 안된다(유일하게 deno에서 가능하지만, 성능이 좋지 못해 거의 쓰이지 않는다고 한다).
ts를 js로 변환 후 실행하는 것이다.
이 말은 즉, ts로 되는 코드는 js에서도 되고, js로 되는 코드는 ts에서도 된다는 뜻이다.
js를 할 줄 알아야 ts를 할 줄 안다는 뜻도 된다.
tsc는 ts compiler이다. 엄밀히 말하자면 compiler 보다는 converter가 더 맞을 수 있겠다.
ts는 js로 변환 후 실행해야한다고 했다. 이것을 tsc가 해주는 것이다.
이 뿐만 아니라 tsc는 타입 체크도 가능하다.
타입이 잘못된 것은 에러를 표시해준다.
..하지만 타입이 잘못됐다 하더라도 js로 변환할 수는 있다.
js에는 타입이 존재하지 않기 때문에 ts에서 틀린 것이 js에서는 맞을 수 있기 때문이다.
시작하기
일단 기본적으로 node.js와 npm이 설치돼있어야만 한다.
설치 방법은 생략하겠다.
작업하고싶은 디렉토리에서 터미널에 다음 명령어를 작성해준다.
npm init이렇게 초기화를 해준 폴더는 node.js 프로젝트 폴더가 되며, package.json 파일이 생성된다.
그러면 다음 명령어로 ts를 설치해주자.
npm i typescript마지막으로 아래 명령어를 작성한다.
npx tsc --inittsconfig.json 이라는 파일이 생성된다.
ts에 대한 설정 파일인데, 초기 설정을 해줘야한다.
이렇게 하면 js와 ts 모두 사용할 수 있다.
js에서 ts로 넘어오는 사람들은 이 설정을 하면 편하다고 한다.
필수는 아니란거다.
이건 필수다. 타입 체크에 대한 설정인데, 이것을 false로 지정한다면 ts를 쓰는 의미가 없다.
이 외에 target과 module을 설정할 수 있다.
target은 'ts파일을 어떤 버전의 js로 변환할지' 정해주는 설정이다.
인터넷 익스플로러 지원이 필요하다면 ES5로 낮추는 식으로 사용하면 된다.
module은 import/export를 사용할지 등을 정하는 설정이다.
forceConsistentCasingInFileNames는 import 시 대소문자 구분을 확실하게 하는 것을 말한다.
윈도우의 환경에서는 대소문자 구분이 없지만, 리눅스나 맥에서는 대소문자 구분을 철저히 해야한다.
배포할 때 이런 부분에서 실수해서 문제되는 경우가 있다고 한다.
skipLibCheck는 라이브러리의 타입 정의 파일에 대한 타입체크를 생략할지에 대한 설정이다.
라이브러리들에는 .d.ts라는 타입을 정의한 파일이 있다.
이 파일에 대한 타입체즈를 생략하는 옵션이다.
npx tsc --noEmit마지막으로, 터미널에 위 명령어를 입력하면 타입검사를 해준다.
만약 --noEmit 옵션을 생략한다면 ts파일을 js로 변환해준다.
초기 설정과 배경지식은 여기까지 설명하고, 다음부터 본격적으로 시작해보겠다.