먼저 타입스크립트를 global로 설치합시다.

$ yarn global add typescript
$ npm install -g typescript

그런 다음 다음 명령어를 입력하면 tsconfig.json 파일이 자동 생성됩니다.

$ tsc --init

tsconfig.json 파일에서는 타입스크립트가 컴파일 될 때 필요한 옵션을 정합니다. 명령어를 알아봅시다.

• target : 컴파일된 코드가 어떤 환경에서 실행될 지 정의합니다. 예를 들어, 화살표 함수를 사용하고 target을 es5로 지정했다면 이를 일반 function키워드를 활용한 함수로 컴파일 해줍니다. 그러나, 이를 es6로 설정했다면 화살표 함수 그대로 유지합니다.
• module : 컴파일된 코드가 어떤 모듈시스템을 사용할지 정의합니다. 이 값을 만약 common으로 하면 export default Sample 코드는 exports.default = Sample로 변환되지만 값을 es2015로 하면 export default Sample을 그대로 유지합니다.
• strict : 모드 타입 체킹 옵션을 활성화합니다.
• esModuleInterop : commonjs 모듈 형태로 이뤄진 파일을 es2015 모듈 형태로 불러올 수 있게 해줍니다.
• outDir : 컴파일된 파일이 어디에 저장될지 경로를 정합니다.
• include : 어떤 파일을 컴파일할 것인지 정합니다.
• exclude : 어떤 파일을 컴파일에서 제외할지 정합니다.

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

여기서 우리는 글로벌로 설치한 타입스크립트 CLI를 통해 코드를 컴파일 했는데 만약 프로젝트 디렉토리 내에서 설치한 typescript 패키지를 사용하여 컴파일하려면 다음과 같이 합시다. (사실 일반적으로는 로컬로 설치한 타입스크립트 패키지를 사용해서 컴파일합니다.)

$ yarn add typescript // npm install --save typescript

package.json

{
  "name": "ts-practice",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "typescript": "^3.9.6"
  },
  "scripts": {
    "build": "tsc"
  }
}

이렇게 설정하면 build 스크립트를 만들어서 편리하게 컴파일할 수 있습니다.

소개한 옵션들 외에도 정말 다양한 옵션이 존재하지만 오늘은 여기까지 알아보고 추후에 상세하게 알아봅시당!

(velopert님은 정말 대단하신 것 같다... 좋은 내용 감사드립니다ㅠ)

References

https://velog.io/@velopert/typescript-basics 타입스크립트 기초연습