입력파일을 tsc 파라미터로 지정하는 경우
ts helloworld.ts
- tsconfig.json 이 무시된다.
즉, tsc helloworld.ts 라고 지정하는 순간 tsconfig.json 은 무시된다.
tsconfig.json 전역 속성
tsconfig.json파일의 최상단에 위치한 속성들을 일컬음
{
// TypeScript 컴파일러의 옵션들을 지정하는 속성
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"sourceMap": true
// ... 무수히 많은 속성들
},
// 컴파일할 파일들의 개별 목록을 지정하는 속성
"files": ["src/main.ts", "src/utils.ts"],
// 컴파일할 파일들을 지정하는 속성 (와일드 카드 패턴으로 묶어 표현)
"include": [ "src/**/*.ts" ],
// 컴파일 대상에서 제외할 파일들을 지정하는 속성
"exclude": [ "node_modules", "**/*.test.ts" ],
// 다른 tsconfig.json 파일을 상속받아서 설정을 재사용할 수 있게 해주는 속성
"extends": "./configs/base.json",
// 여러 개의 하위 프로젝트로 구성된 프로젝트의 의존 관계를 지정하는 속성
"references": [
{ "path": "./subproject1" },
{ "path": "./subproject2" }
],
// 타입 습득(type acquisition)과 관련된 옵션들을 지정하는 속성
"typeAcquisition": {
"enable": true,
"include": ["jquery"],
"exclude": ["react"]
},
// watch 모드와 관련된 옵션들을 지정하는 속성
"watchOptions": {
"watchFile": "useFsEvents",
"watchDirectory": "useFsEvents",
"fallbackPolling": "dynamicPriority"
}
}
감시 모드
파일 하나 감시
tsc FILE.ts -w or tsc FILE.ts --watch
- tsc에 파일명 직접 입력 시 tsconfig.json 무시하고 es5(es3?)로 컴파일 &&
- 파일 하나만 감시하기 때문에 여러 파일 감시 모드 활성화 x
프로젝트 폴더 감시
tsc --init -> tsc --watch or tsc -w
- tsconfig.json의 옵션대로 프로젝트 폴더 전체 감시 모드 활성화
- 파일 저장시 자동 추적
tsconfig.json
새롭게 알게 된(사용해 본) 옵션들은 추후 추가
1. 프로젝트 폴더 cmd에서 tsc --init
- tsconfig.json 생성
2. 옵션들 (계속 업데이트)
2-1) 최상단 옵션
"exclude": []
- tsc 감시or컴파일 제외할 폴더 및 파일 목록들
- 명시가 없을 시
node_modules는 자동으로 exclude - 단, exclude 옵션 명시하게 되면
node_modules는 꼭 추가하여 의존성 모듈 내부 ts 파일이 컴파일 되지 않게 해야함
"include": []
- tsc의 감시or컴파일 적용할 폴더 or 파일 목록들
- 지금은 잘 모르겠으나, 컴파일 할 파일들은 따로 폴더로 만들고, 결과 js 파일을 모을 폴더도 따로 만들 것이라고 예상됨
"files": []
- tsc의 감시or컴파일 적용할 파일 목록들
- 사용할 일이 많지는 않을듯
2-2) compilerOptions
"target"
- tsc 컴파일 후 결과 js파일의 버전을 명시
- 현재 default는 es5
- 나는 async/await의 존재로 인해 es2017 사용중
"module" (추후 업데이트)
"lib"
- 타입스크립트의 객체 및 기능 기본값을 지정할 수 있는 옵션
- 따로 명시가 없을 시 -> es6부터 js에 전역적으로 제공하는 모든 기능(ex - Map 객체 등)은 ts도 사용할 수 있다, 또한 모든 DOM API도 사용할 수 있다고 가정
"allowJs" , "checkJs"
allowJs: 자바스크립트 파일을 타입스크립트가 컴파일checkJs: 타입스크립트가 자바스크립트 파일을 컴파일하지는 않으나, 구문을 검사하고 잠재적 오류를 보고- 타입스크립트를 사용하고 싶지는 않지만, 타입스크립트의 기능을 활용하고 싶은 경우
- any 타입에 대해서만 도움을 줄 수 있음
"jsx"
- react.js에 도움이 되는 옵션
"declaration"
.d.ts파일 생성
- 프로젝트를 다른 사람에게 라이브러리로 배포할 때 중요한 고급 개념
- 프로젝트에 포함된 모든 타입을 설명하는 메니페스트 파일
"sourceMap"
- 디버깅과 개발에 도움이 됨(큰 프로젝트에서)
- 브라우저의 개발자 도구에서 source 탭에 들어가면 컴파일된 js파일의 source를 볼 수 있는데, 원래 자신이 설계했던 ts파일(소스)을 보고 싶을 때 사용할 수 있다.
sourceMap옵션을 사용하면.js.map파일이 만들어짐- 보기에는 꽤 이상한 파일이 설정
- 명시하지 않았을 시 브라우저의 Sources 탭에서는 javascript 파일만 보이나
- 설정하게 되면 브라우저의 Sources 탭에서 typescript 파일도 볼 수 있게 됨
.ts파일에 직접 중단점 설정도 가능
- 보기에는 꽤 이상한 파일이 설정
"outFile"
"outDir" , "rootDir" 입력 파일이 어디에 있는지 출력 파일이 어디에 생성되는지 설정
- 일반적으로 프로젝트의 최상단 폴더(루트 폴더)에는 src 폴더와 dist 폴더가 존재한다
- src 폴더: 개발 source 파일들이 들어있음(typescript 파일)
- dist 폴더: 출력 파일이 들어 있음(javascript 파일) "outDir": 타입스크립트 컴파일러에게 생성된 파일을 어디에 저장해야 하는지 명시
- 명시가 없을 시 tsc는 ts파일들이 있는 위치에 동일하게 js 파일을 생성하기 때문에 개발 source 파일들과 출력 파일들의 위치가 구분이 되지 않음
-src폴더 및에 하위 폴더가 있고, 그 하위 폴더에 ts파일이 있어도,tsc컴파일을 진행하면 그 폴더 구조 까지 복사됨.
|
|
|---|---|
| before | after |
"rootDir": tsc에게 소스코드가 있는 루트 폴더가 어디인지 명시
-rootDir사용하게 되면, tsc가 해당 src 폴더만 보지 않음
- 명시되어 있는 폴더를 root 디렉토리라고 생각하고, 그 폴더에서 찾은 디렉토리 구조를 outDir 구조로 복사함
"removeComments"
- typescript파일(원본 파일)에서 주석부분을 전부 제거하여 컴파일된 결과파일(javascript)에는 주석이 없고 전부 유효한 javascript 코드만 남음
- 파일을 더 작게 만들 수 있음
"noEmit"
- 결과 javascript 파일을 생성하지 않음
- 파일이 올바른지 확인만 하고 싶고, 모두 출력하고 싶진 않은 경우(ex- 큰 프로젝트에서)
"noEmitOnError"
- default는 false
- typescript는 컴파일 과정 중에 오류가 생기더라도 javascript 파일을 만든다(결과로 출력한다)
- 오류가 있어도 컴파일해도 괜찮은 경우도 있음 - true로 설정 시 -> 컴파일에 실패하면 어떤 파일도 나오지 않음(다른 파일은 정상적이라도)
"strict"
- true로 설정 시 모든 strict 타입 검사 옵션 활성화 -> 모든 옵션을 개별적으로 설정하는 것과 같음
"noImplicitAny"
- 변수들이 미리 정의된 타입을 가져야 하는지 여부를 제어하는 옵션
- 기본적으로 typescript는 타입이 정해지지 않은 변수나 파라미터에 대해서
~ implicitly has an 'any' type에러메시지를 띄운다
- false 설정 시 에러메시지를 띄우지 않으나, any 타입 사용이나 noImplicitAny: false 등은 javascript 개발과 다를 바가 없기 때문에 되도록이면 사용을 지양해야 한다.
"strictNullChecks"
- 잠재적으로
null이 될 수 있는 값에 접근하고 작업할 때 엄격한 검사 - 코드의 마지막에
!를 붙이면 에러를 무시할 수 있다.
-!: 개발자가 tsc에게 이 연산을 하면 null이 아닌 값이 반환된다고 알려줌 - 실패할 수 있는 코드는
if조건문으로 검사하는 것이 안전하다.
"strictFunctionTypes" (추후 업데이트)
- 많이 사용하지 않을 수 있음
"strictBindCallApply"
bind,call,apply함수가 호출되면 설정한 내용 엄격한 검사
- 개발자의 코드와 맞지 않게 사용하는 것을 막아줌
"noUnusedLocals"
- 선언되었지만 사용되지 않는 로컬변수에 대해서 IDE 단에서는 경고 메시지 출력(ex - 노란줄)
- 컴파일 단에서는 에러 출력 - 전역변수는 어디서 사용될 지 모르므로 에러메시지를 띄우지는 않음
"noUnusedParameters"
- 함수의 사용하지 않는 파라미터가 있을 시 제거하거나 사용하라고 IDE와 tsc가 메시지 띄움
`"noImplicitReturns"
- 무언가를 반환하는 경우도 있고, 반환하지 않는 경우도 같이 있을 경우 경고 메시지 출력
- return이 존재할 경우 모든 경우에 return을 해야함(값이 없더라도)
function add(n1: number, n2: number) {
if(n1 + n2 > 0) {
return n1 + n2;
}
}
// tsc가 이 함수의 모든 분기가 반환문으로 이어지는게 아니라는 것을 감지하고 경고 메시지 출력
// 아무것도 반환하지 않더라도 return을 명시해야함(그냥 생략하는 것을 허용하지 않음)
// tsconfig에 맞게 해결
function add(n1: number, n2: number) {
if(n1 + n2 > 0) {
return n1 + n2;
}
return; // 경고 메시지 해결
}"noFallthroughCasesInSwitch"
- switch문에서
break키워드를 사용하지 않았을 시 에러 메시지 활성화
🐣 Data Engineer