타입스크립트 정리 6: 컴파일러

Kimhojin_Zeno·2023년 4월 27일
0

타입스크립트 정리

목록 보기
6/13

TypeScript 컴파일러

VScode 또는 TypeScript playground에서 타입스크립트 컴파일러 설정을 할 수 있다

https://www.typescriptlang.org/play

TS config

VScode에서 설정한다면

먼저 터미널에서 작업할 디렉토리로 들어간 다음

tsc --init

이라고 치면 tsconfig.json 파일이 생성된다

이 tsconfig.json 파일을 통해 typescript playground의 TSconfig처럼 설정을 할수있다

JSON 형태로 설정들이 나열되어 있다. “ 큰 따옴표를 써서 수정해야함.

감시모드

tsc -w index.ts

tsc -w 파일명

타입스크립트가 변경사항이 발생하는지 항상 감시하고 index.ts 파일을 변경하고 저장하면 자동으로 다시 컴파일하도록 한다.

Starting compilation in watch mode…

라고 뜨면서 실시간으로 컴파일된 index.js와 연동되는 것이다.

만약 타입스크립트 오류가 생기게 코드를 쓰면 이렇게 된다

인터페이스에 미리 지정한 프로퍼티가 충족되지 않는다는 내용.

감시모드는 ^C 로 나올 수 있다.

감시모드를 쓰지 않고 터미널에서 tsc만 치면 해당 디렉토리와 하위 디렉토리의 모든 ts파일이 컴파일된다

파일 컴파일러 옵션

특정 하위 집합의 파일만 컴파일하도록 설정하는 방법

공식문서-TSConfig-Docs

https://www.typescriptlang.org/tsconfig

위 페이지는 변경할 수 있는 모든 설정, 즉 옵션에 대한 링크를 제공한다

TSConfig Reference

files

files를 사용하면 프로그램에 포함할 파일의 허용 목록을 특정할 수 있는데

이는 컴파일러 옵션의 일부로 작동하지 않는다

tsconfig.json에서 적용하려면

"compilerOptions” 밖에다 적어야 한다

설정 방법은 TypeScript에 포함할 모든 파일을 나열하는 것이다

포함할 파일이 많지 않은 소규모 프로젝트에 가장 적합하다

tsconfig.json에

"files": ["farmstand.ts", "index.ts"]

라고 적으면 저 두 파일 외에 다른 파일은 tsc 명령어를 쳐도 컴파일되지 않는다.

include, exclude

타입스크립트가 컴파일할 파일과 무시할 파일을 구분하는데 사용되는 옵션으로

include와 exclude 가 있다

include를 사용하면 광범위하게 전체 디렉토리를 포함하도록 설정할수 있다

"include": ["src"]

프로젝트 루트 디렉토리에서 src 디렉토리에 있는 파일들만 컴파일된다

exclude를 사용하면 전체 디렉토리 전부 컴파일 하되 컴파일 하지 않을 파일들만 지정할수 있다

"include": ["src"]
"exclude": ["src/dontTouch.ts"]

루트 디렉토리에 있는 src라는 디렉토리에서 dontTouch.ts파일만 빼고 나머지 전부 컴파일한다.

패턴도 가능하다

"exclude": ["**.ts"]  // .ts로 끝나는 파일 제외
"exclude": ["**.test.ts"]  // .test.ts로 끝나는 파일 제외

exclude가 include보다 우선시된다 → 둘다 포함되어 있다면 제외.

"include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]

위 설정은 src디렉토리와 그 하위 디렉토리에서 모든 TypeScript 파일을 컴파일하고, node_modules
디렉토리 및 모든 spec.ts 파일을 제외합니다.

보통 node_modules에 수많은 파일들이 컴파일되지 않도록 해당 디렉토리는 반드시 제외한다.

outDir

outDir를 사용하면 타입스크립트가 컴파일된 자바스크립트 파일을 내보낼 위치를 지정할수 있다

지정하지 않을 경우에는 자동적으로 타입스크립트 파일 옆에 위치한다

→ 별로 선호되지 않는 방식

대규모 프로젝트에서는 보통 src 디렉토리 또는 특정 디렉토리에 TypeScript 파일을 모아둔다.

ts 파일에 상응하는 JavaScript 파일은 별도의 디렉터리에 컴파일되고 여기에 HTML파일이나

노드 앱 등이 접속해서 JavaScript 파일을 실행한다

보통 dist라는 이름을 많이 붙인다. dist와 src를 많이 쓴다

"outDir": "./dist"

이렇게 하면 컴파일된 ts파일들이 dist 디렉토리로 간다.

target

TypeScript를 컴파일한 JavaScript의 버전을 제어하는 target 옵션이다

기본값을 es3, es5 등으로 설정할 수 잇다

"target": "es2016"

es6 이 es2015

es8 이 es2017

여러 버전들이 있다

es6 이전 버전은 화살표 함수를 지원하지 않으므로

target을 es5로 설정해놓으면 출력되지 않는다.

strict

엄격한 타입 검사 옵션.

true가 기본값이다.

"strict": true

true로 설정하면 타입스크립트 전체의 타입 검사 추가 규칙, 제약조건이 활성화된다

noImplicitAny, strictNullChecks등 많은 것이 포함된다

strict 옵션은 타입 검사를 보다 엄격하게 만든다

추가적인 확인 과정을 거치면서 프로그램의 정확성을 높이는 것이 핵심.

noImplicitAny는 파라미터 등이 any타입이면 안된다고 오류가 뜨게 해준다.

strictNullChecks는 타입스크립트가 생각하는 null, false, undefined의 정의와 역할을 제어한다

null로 설정할수 없는 것을 null로 했을때 오류가 뜬다.

null로 만들고 싶지 않은 것을 null로 만들 위험이 생기므로 보통은 켜 두는 것이 좋다

strictNullChecks가 true일때 null과 undefined는 특정 타입을 가지며 구체적인 값을 넣을 곳에 사용하면 오류가 발생한다

기타 옵션들

module 모듈에 관한 옵션

타입스크립트가 모듈을 처리하는 방법을 바꿀 수 있다

allowJs 옵션을 사용하면 타입스크립트의 프로그램 일부에 자바스크립트 파일을 사용할수 있게 된다

checkJS 옵션을 사용하면 자바스크립트 파일도 오류를 보고할 수 있다

sourceMap 옵션은 타입스크립트에 소스 맵의 생성 여부를 지시할 수 있다

noEmit 옵션은 파일을 컴파일 하지 않게 된다

noEmitOnError 옵션 컴파일 도중에 오류가 생기면 즉 타입 검사에 문제가 있으면 타입스크립트가 새로운 파일을 만들지 않게 하는 옵션. 다시 말해 오류가 없는 경우만 컴파일된 JS파일이 생긴다

기타 옵션들은 공식문서를 참조.

profile
Developer

0개의 댓글