tsconfig.json - typescript 컴파일 세부 설정

기본 옵션

 

{
  "compilerOptions": {
      "target": "es5",  // 타입스크립트파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분
      "module": "commonjs",  //자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳
      "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 
      "checkJs": true, // 일반 js 파일에서도 에러체크 여부 
      "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
      "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
      "outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
      "outDir": "./", //js파일 아웃풋 경로바꾸기
      "rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
      "removeComments": true, //컴파일시 주석제거 
 
      "strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
      "noImplicitAny": true, //any타입 금지 여부
      "strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기 
      "strictFunctionTypes": true, //함수파라미터 타입체크 강하게 
      "strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
      "noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
      "alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기
 
      "noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
      "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
      "noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기 
      "noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기 
  }
}

 

• compilerOptions

브라우저는 타입스크립트 파일을 해석할 수 없기 때문에 타입스크립트 파일은 무조건 자바스크립트 파일로 컴파일 되게 되는데 이때 컴파일 옵션을 설정해주는 부분

 

• target 

타입스크립트 파일을 자바스크립트의 어떤 버전으로 컴파일 할 지를 정하는 부분.

"ES3",

"ES5",

"ES6" 혹은 "ES2015",

"ES2016",

"ES2017",

"ES2018",

"ES2019",

"ES2020",

"ESNext" 

가 선택가능한 옵션이며 기본값은 "ES3" 이고 "ESNext" 는 최신 ES제안 기능을 대상으로 한다.

 

• module

자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳

"CommonJS" 는 require 문법,

"ES2015" 혹은 "ES6", "ESNext" 는 import 문법을 쓴다.

 

• allowJs

자바스크립트 파일을 컴파일 할지, 자바스크립트 파일들을 타입스크립트에 import 해서 쓸수 있는지 여부

기본값: false

 

• checkJs

자바스크립트 파일에서도 에러체크를 할지 여부

allowJs 와 함께 쓰라고 추천됨.

기본값: false

 

• jsx

tsx 파일을 jsx로 어떻게 컴파일 할 것인지

기본값: "preserve"

"preserve" 는 다른 변환단계(예 : Babel ) 에 사용하도록 결과물의 일부를 유지한다.

"react" 는 React.createElement를 생성하기때문에, 사용전에 JSX 변환이 필요하지 않고, 결과물은 .js 확장자를 갖게 됨.

"react-native" 는 JSX 를 유지한다는 점은 preserve 와 같지만 결과물은 .js 확장자를 갖게 된다. 

모드	입력	결과	결과 파일 확장자
preserve	<div />	<div />	.jsx
react	<div />	React.createElement("div")	.js
react-native	<div />	<div />	.js

 

• declaration

컴파일시 .d.ts 파일도 자동으로 함께 생성한다. (현재 쓰는 모든 타입이 정의된 파일)

기본값 : false

 

• outFile

모든 ts 파일을 js 파일 하나로 컴파일 해준다. (module 이 none, amd, system 일때만 가능)

 

• outDir

js 파일 아웃풋 경로 바꾸기

 

• rootDir

루트경로 바꾸기. 

입력 파일의 루트 디렉토리를 지정한다.

outDir로 출력 디렉토리 구조를 제어하기 위해서만 사용

 

• removeComments

컴파일시 주석제거.

/*! 로 시작하는 copy-right 헤더 주석을 제외한 모든 주석을 제거한다.

기본값: false

 

• strict

모든 엄격한 타입검사 옵션을 활성화 한다.

true 면 noImplicitAny, noImplicitThis, alwaysStrict, strictNullChecks, strictFunctionTypes 가 모두  true로 설정된다.

기본값: false

 

• noImplicitAny

any 타입을 쓰거나 암시한 표현식과 선언에 에러 

기본값: false

 

• strictNullChecks

null 혹은 undefined 값을 참조하면 에러

런타임에서의 다음과 같은 에러를 방지 할수 있다.

Uncaught ReferenceError: foo is not defined
Uncaught TypeError: window.foo is not a function

 

• strictFunctionTypes

함수 타입에 대한 이변성 매개변수를 비활성화 한다.

간단히 말하자면 함수 파라미터 타입체크를 강하게 한다.

기본값 : false

 

• strictPropertyInitialization

undefined 가 아닌 클래스 프로퍼티가 생성자에서 초기화 되도록 한다.

strictNullChecks가 활성화 되있어야 한다.

간단히 하자면 class constructor 작성시 타입체크 강하게 한다.

기본값 : false

 

• noImplicitThis

this 키워드가 any 타입이면 에러

기본값: false

 

• alwaysStrict

자바스크립트 "use strict" 모드 켜기

기본값 : false

 

• noUnusedLocals

쓰지않는 지역변수 있으면 에러

기본값 : false

• noUnusedParameters

쓰지않는 파라미터 있으면 에러

기본값 : false

• noImplicitReturns

함수에서 return 빼먹으면 에러

기본값 : false

 

• noFallthroughCasesInSwitch

switch 문에서 fallthrougn 발생하면 에러

 

 

 

---

nodejs 최신버전 설치

npm install -g typescript

tsconfig.json 생성

터미널 tsc -w 

=> 어쩌구.ts 파일에 코드작성하면 어쩌구.js 파일 자동생성