JavaScript & TypeScript

[TS] Compile (option)

반응형

 

타입스크립트를 자바스크립트로 변환하는 과정에서의 옵션을 줄 수 있는 것으로 공식문서나 검색을 하여 어떠한 것이 있는지 어떻게 쓰는지 확인 할 수 있습니다. 

1.  tsconfig

프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정합니다.

{
 "compilerOptions": {
 
	    /* Basic Options */
  "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
  "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
  "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 
  "checkJs": true, // 일반 js 파일에서도 에러체크 여부 
  "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
  "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
  "sourceMap": true // 디버깅시 유용
  "outFile": "./", // 모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
  "outDir": "./", // js파일 아웃풋 경로바꾸기
  "rootDir": "./", // 루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
  "composite": true, // 이전에 빌드된 정보를 기억하여 빠르게 빌드
  "removeComments": true, //컴파일시 주석제거 
  "noEmit": true, // 컴파일 에러 체크만 하고 자바스크립트 변환 하지 않음
  
  
      /* Strict Type-Checking Options */ 
      // 기본이 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" 모드 켜기
	
    
        /* Additional Checks */
  "noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
  "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
  "noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기 
  "noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기 
 }
}

출처를 통한 자주 이용한 내용 작성

 

출처 - 코딩애플  https://codingapple.com/unit/typescript-tsconfig-json/

참고 링크

https://yamoo9.gitbook.io/typescript/cli-env/tsconfig

https://typescript-kr.github.io/pages/tsconfig.json.html

https://geonlee.tistory.com/214

공식문서 - https://www.typescriptlang.org/tsconfig

 

 

2.  컴파일러(CLI)

tsconfig.json. 원하는 파일을 전달하여 TypeScript 파일을 컴파일할 수 있습니다.

 

tsc -h

tsc 옵션에 대해 설명해 줍니다. 간결하게 많이 쓰는것들이 나와 이용하기 좋습니다.

 

tsc
fs를 통해 tsconfig.json을 뒤돌아보고 컴파일을 실행합니다.


tsc index.ts
컴파일러 기본값이 있는 index.ts에 대해서만 JS를 내보냅니다.


tsc src/*.ts

src 폴더의 .ts 파일에 대해 기본 설정으로 JS를 내보냅니다.

tsc --project tsconfig.json src/*.ts

tsconfig.production.json에서 컴파일러 설정으로 참조된 파일을 내보냅니다.

 

tsc index.js --declaration --emitDeclarationOnly

js 파일에 대해 d.ts 파일을 내보내고 컴파일러 옵션을 표시합니다.

 

 

참고 링크

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

https://yamoo9.gitbook.io/typescript/cli-env

공식문서https://www.typescriptlang.org/docs/handbook/compiler-options.html

반응형

'JavaScript & TypeScript' 카테고리의 다른 글

[node.js] express-validator param error  (0) 2022.03.29
[TS] Decorators  (0) 2022.03.23
[TS] utility type  (0) 2022.03.21
[TS] type alias, interface 차이  (0) 2022.03.20
[JS] ProtoType  (0) 2022.03.15