Typescript 설정

급변하는 기술 시장에서 살아남기 위해 Typescript 공부를 시작하였습니다...
과연 저는 살아남을 수 있을까요?!

👀 들어가기에 앞서...

타입스크립트는 반드시 컴파일해야 한다고 했습니다.
컴파일하려는 파일을 터미널에서 tsc 명령어로 입력하여 변환시켜 주어야 했습니다.
하지만 이렇게 매번 많은 파일을 변환해야 하는걸까요?
다행히 아닙니다!

👀 프로젝트에 Typescript 설정하기

해당 프로젝트에서

tsc --init

라고 입력하면, tsconfig.json 파일이 생성됩니다.
그러면 프로젝트를 타입스크립트로 쉽게 관리할 수 있습니다.
이 때 개별 파일의 변동사항을 저장하면 자동으로 타입스크립트로 변환시켜 줍니다.

👀 개별파일에 Typescript 설정하기

만약 이를 프로젝트 전체가 아니라 개별 파일에 적용하고 싶다면,
터미널에 다음과 같에 개별 파일에 적용할 수 있습니다.

tsc script.tsc --watch
tsc script.tsc -w

위 명령어 중 하나만 사용하면 됩니다.
그러면 watch 모드로 진입하는데요,
이 모드가 실행중인 동안에는 변경사항을 저장하면 자동으로 컴파일 해줍니다.
그만두려면 Ctrl+C 로 그만두면 됩니다.

👀 tsconfig.json 살펴보기

위에서 tsc --init를 사용해 프로젝트 단위로 타입스크립트를 관리하게 되면
tsconfig.json 파일이 생긴다고 했습니다.
이 파일은 타입스크립트의 컴파일과 관련된 설정사항들이 포함되어 있습니다.
tsconfig.json에 대해 좀 더 살펴 보겠습니다.

compilerOptions

대부분의 컴파일 옵션을 여기서 설정합니다.
굉장히 많은 옵션들이 있는데, 이 중에서 중요한 몇가지만 살펴보려고 합니다.
외우기 보단 이런 설정들이 있구나~ 하고 넘어가면 좋을 것 같습니다.

• target: 어떤 버전의 자바스크립트로 컴파일 할 것인지 정할 수 있습니다.
  가장 기본적인 옵션 중 하나입니다.
  VScode에서 "target":을 입력하고 Ctrl+Space로 가능한 버전들을 확인할 수 있습니다.
• modules: 타입스크립트의 모듈에 관한 옵션입니다. 모듈이 뭘까요? 이에 대해선 추후에 좀 더 학습하도록 하겠습니다!
• lib: (배열 형태로) dom API 등의 필요한 라이브러리 등을 설정할 수 있습니다. 브라우저 환경에서 따로 설정하지 않고 사용해도 될 정도로 기본 설정이 되어있습니다.
  오히려 주석을 해제하고 빈 배열로 남겨두면 기본적인 라이브러리도 사용하지 않으므로 주의해야 합니다.
• allowJS: 이름 그대로 타입스크립트가 일반 JS파일도 검사하여 에러를 찾아줄 수 있게 허락하는 옵션입니다.
• checkJS: 컴파일 하지 않아도 타입스크립트가 에러를 검사할 수 있게 하는 옵션입니다.
• sourceMap: 값이 true인 경우, 브라우저 개발자 도구에서도 타입스크립트 파일을 source tap에서 살펴보며 디버깅 할 수 있습니다. 컴파일시 .map파일이 같이 생성됩니다.
• outDir: 타입스크립트가 컴파일 한 후 생성된 js파일이 저장될 디렉토리를 설정할 수 있습니다.
• rootDir: 타입스크립트 소스코드가 저장될 디렉토리를 설정할 수 있습니다.
• noEmitOnError: 타입스크립트 파일에 에러가 있을 때 자바스크립트 파일을 가져오지 않도록 설정합니다.
• strict: 자바스크립트의 strict mode처럼 좀 더 엄격한 규칙을 적용할 수 있는 옵션입니다.

이 옵션들을 통해, 특히 sourceMap을 활용하여 타입스크립트를 vscode에서도 효과적으로 디버깅할 수 있습니다.
여기에 관련 링크가 있습니다.
🔗 https://code.visualstudio.com/docs/typescript/typescript-debugging

이외의 컴파일 옵션에 대해서는 공식 사이트에서 확인할 수 있습니다.
🔗 https://www.typescriptlang.org/ko/tsconfig

exclude, include

제외할 파일을 exclude에 입력하면, 타입스크립트가 해당 파일은 컴파일하지 않습니다.

"exclude":[
  "node_modules",
  "**/*.dev.ts"
]

이 예제처럼 *을 사용해 표시할 수 있습니다.
그리고 node_modules의 경우 따로 작성하지 않아도 기본적으로 타입스크립트가 컴파일 하지 않습니다.

반대의 개념인 include는 타입스크립트가 컴파일해야할 파일을 지정할 수 있습니다.
그러면 타입스크립트는 include에 포함된 파일만 컴파일하고, 나머지는 컴파일 하지 않습니다.
만약 작성하지 않으면 설정한 프로젝트의 전체를 컴파일합니다.

files

include와 비슷합니다. 그러나 include는 입력하지 않은 전체 폴더를 제외하지만,
files는 필요한 파일만 컴파일을 지정하는 용도입니다.

😝 마무리

오늘은 Typescript를 프로젝트에서 사용하기 위한 방법과, tsconfig.json으로 설정하는 주요 옵션들에 대해 살펴보았습니다.
이 설정들을 통해 타입스크립트 작업시 좀 더 편하게 디버깅할 수 있는데, 자세한 방법은 추후에 시간이 난다면 또 올려보겠습니다.
이번에도 열심히 살아남아보았는데요, 저는 다음 시간에도 살아남을 수 있을까요?!

• 참고:
  • Typescript 공식문서: https://www.typescriptlang.org/docs/handbook/basic-types.html
  • 【한글자막】 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS
    https://www.udemy.com/course/best-typescript-21/