설치 및 설정

 

⚫ TypeScript 설치 (terminal : powerShell 제외)

1. 현재 폴더에만 설치

$ npm i -D typescript

2. 전역 설치

npm i -g typescript

---

🔴 TSC ( typeScriptCompiler )

- .ts 파일을 .js 파일로 transpiling 해주는 compiler

- 이름은 compiler이지만 하는일은 transpiling
   compile : source code -> binary code
   transpiling : source code -> source code

- 명령어
 -> tsc -v : 버전을 확인한다.
 -> 변환하기
      -> 1. 현재 폴더에만 설치되었을 때.
         

 $ npx tsc 파일명

      -> 2. 전역에 설치했을 때
           

$ tsc 파일명

 -> tsc 파일명 : 파일을 js언어로 변환한다 ( tsconfig.json 파일의 설정 무시 )
 -> tsc : tsconfig.json 파일의 설정대로 파일을 변환한다. 특정 파일을 목표하는 설정을 별도로 넣지 않으면 경로 내 모든 ts
               파일을 변환한다.

---

🔵 tsconfig.json 기본 ( ts파일 컴파일 시 기본 설정 ) 

- tsconfig.json 파일 생성

$ tsc -init

- 주석을 지운 tsconfig.json 파일 내부

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

💣 compilerOptions : Compile 할때 설정할 설정들 {

      🧨 target : js로 변환할 때 적용할 문법

     🧨 module : (export || module.exports) (import || require) 와 같이 어떤 문법을 사용할 지 결정
    - commonjs : ES5 이하 문법 (module.exports , require) 을 사용한다.

    🧨 esModuleInterop : module에서 설정했던 설정 방식대로 내보내진 lib, module에 대해서 "import \* as XXXX" 와 같은 방식을 사용할 수 있게 해주는 설정

    🧨 forceConsistentCasingInFileNames : 가져오기 시 대소문자 구분을 확실하게 해준다.

    🧨 strict : 정확한 사용을 위해 모든 검사 설정을 활성화한다.

    🧨 skipLipCheck : .d.ts 파일의 타입 확인을 건너 뛴다.

}

🟤 tsconfig custom 설정

{
  "include": ["src"],
  "exclude": ["node_modules"],
  "compilerOptions": {
    "outDir": "./build",
    "target": "ES6",
    "lib": ["ES6"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "removeComments": true,
    "allowJs": true,
    "baseUrl": ".",
    "typeRoots": ["./node_modules/@types", "./@types"],
    "paths": {
      "@core/*": ["src/core/*"],
      "*": ["@types/*"]
    }
  }
}

💣 include : ts에서 확인할 폴더를 설정

💣 exclude : ts에서 확인하지 않을 폴더를 설정

💣 compilerOptions {
     -> 🧨 outDir : 컴파일 시 js 파일이 생성되는 폴더 설정

     -> 🧨 lib : js 실행되는 환경 설정

     -> 🧨 resolveJsonModule : ts는 기본적으로 json 파일을 지원하지 않기에 true 로 json파일을 지원하도록 설정

     -> 🧨 removeComments : 컴파일 시 주석 삭제

     -> 🧨 allowJs : js파일 또한 컴파일되도록 설정 (주석삭제 용이)

     -> 🧨 baseUrl : root폴더를 설정

     -> 🧨 typeRoots : type 설정 파일들을 작성하는 폴더를 설정하여 미리 읽기 가능 ( .d.ts 파일, interface 등 )

}

🟣 간단 요약

최상위 속성은 compilerOptions, files, include, exclude, compileOnSave, extends 가 있다.

compilerOptions 속 세부 설정은 수 없이 많지만 그 중에서 자주 쓰이는 건 위에 정리한 내용 +@

참고 : https://typescript-kr.github.io/pages/compiler-options.html

🟢🟡🟠