[TypeScript] 기본 세팅

이 포스트를 시작으로 타입스크립트에 대해 공부하며 그에 대한 내용을 기록할 예정입니다.
문법을 중점으로 공부하기보다 다른 TS 예제들을 잘 분석할 수 있는 능력을 기르고 나아가 기존 리액트 프로젝트를 TS로 리팩토링해보는게 목표입니다.

모든 내용은 타입스크립트 공식 문서에 내장되어 있습니다.

기본 지식 ( 제로초 git 참고 )

• 메인 룰: TypeScript는 최종적으로 JavaScript로 변환된다. 순전한 TypeScript 코드를 돌릴 수 있는 것은 deno이나 대중화되지가 않았음. 브라우저, 노드는 모두 js 파일을 실행한다.
• TypeScript는 언어이자 컴파일러(tsc)이다. 컴파일러는 ts 코드를 js로 바꿔준다.
• tsc는 tsconfig.json(tsc --init 시 생성)에 따라 ts 코드를 js(tsc 시 생성)로 바꿔준다. 인풋인 ts와 아웃풋인 js 모두에 영향을 끼치므로 tsconfig.json 설정을 반드시 봐야한다.
• 단순히 타입 검사만 하고싶다면 tsc --noEmit 하면 된다.
• 개인 의견: tsconfig.json에서 esModuleInterop: true, strict: true 두 개만 주로 켜놓는 편. strict: true가 핵심임.
• ts 파일을 실행하는 게 아니라 결과물인 js를 실행해야 한다.
• Vscode같은 에디터에선 tsc 커맨드만 실행하면 ts -> js로 변환해준다.

타입스크립트 프로젝트 생성

타입스크립트도 npm 패키지이기 때문에 node 프로젝트를 먼저 생성해야 한다.

• 생성할 디렉토리 안에서 npm init -y 를 통해 프로젝트를 설정
• npm i typescript로 타입스크립트를 설치
• 타입스크립트를 전역에 설치하지 않았기 때문에 npx를 붙여서 tsc커맨드를 사용해야 한다.
• npx tsc --init 위 커맨드를 실행하여 tsconfig.json 파일을 생성

tsconfig.json

타입스크립트를 자바스크립트로 컴파일하기 위한 옵션들을 적은 파일이다.
주요 옵션들에 대해서만 간단히 적고 마침 !

• strict : 타입 체크 여부, 이 옵션을 true로 하지 않으면 타입스크립트를 사용하는 의미가 X

• allowJS : 자바스크립트 코드 허용 여부, js를 ts로 옮기는 중일 때 켜두면 좋음

• module : 어떤 모듈 시스템을 사용할 것인지, ex) CommonJS, ES2020 등

• forceConsistentCasingInFileNames : 임포트한 파일명의 대소문자 구분, true로 하자.

• skipLibCheck : 패키지 타입 체크 여부, true로 하면 실제로 사용하는 패키지의 타입만 체크

• esModuleInterop : ES6 모듈 사양을 준수하여 CommonJS 모듈 임포트, true로 하면 좋음