Typescript_ 7. tsconfig
지금까지 수동으로 한파일 한 파일 씩 compile 시켜서 js로 변환시켰다.
index.html에 연결될 ts 파일이 하나가 아니라 여러 파일이라면 명령어로 컴파일 시키는데에 한계가 있음.
tsc --init
타입스크립트를 초기화 시키면 .ts / .tsx
확장자들이 한꺼번에 컴파일 되고, tsconfig.json 파일이 생성됨.
✔tsconfig.json
{
"compilerOptions" : {
//여기에 컴파일을 컨트롤 할수 있는 옵션들이 들어감.
/* Projects */
/* Language and Environment */
"target": "es2016",
/* Modules */
"module": "commonjs",
/* JavaScript Support */
/* Emit */
/* Interop Constraints */
/* Type Checking */
"strict": true,
/* Completeness */
},
"exclude": [
// 컴파일 제외 시킬 파일들
"app.ts"
"*.dev.ts" // .dev.ts가 들어간 모든 파일
"**/*.dev.ts" // 모든 디렉토리 안에 .dev.ts가 들어간 모든 파일
"node_modules" // 디렉토리
],
"include":[
// 컴파일에 추가시킬 파일들
]
}
{
"compilerOptions" : {
//여기에 컴파일을 컨트롤 할수 있는 옵션들이 들어감.
/* Projects */
/* Language and Environment */
"target": "es2016",
/* Modules */
"module": "commonjs",
/* JavaScript Support */
/* Emit */
/* Interop Constraints */
/* Type Checking */
"strict": true,
/* Completeness */
},
"exclude": [
// 컴파일 제외 시킬 파일들
"app.ts"
"*.dev.ts" // .dev.ts가 들어간 모든 파일
"**/*.dev.ts" // 모든 디렉토리 안에 .dev.ts가 들어간 모든 파일
"node_modules" // 디렉토리
],
"include":[
// 컴파일에 추가시킬 파일들
]
}
https://www.typescriptlang.org/tsconfig 이 사이트에 가면 더 자세히 옵션을 확인 할수 있음.
일반적으로 node_modules
파일은 컴파일에서 제외됨으로, 따로 추가하지 않아도됨.
◼ 자주 사용하는 Options
{ "compilerOptions": { /* Basic Types */ "target" : "es5", // 컴파일 타겟팅이 될 JS 버전 "lib" : ["es5","dom"] // 타입스크립트가 검증해야 할 라이브러리 => 기본적으로 target에 맞춰져있음. "allowJs":true, "checkJs":true, // 컴파일을 하지 않더라도 구문을 검사하고 잠재적 애러를 보고해줌. "sourceMap":true, // 코드와 브라우저의 중간역활을 하는 다리역활 하는 .map.js 생성 여부 "outDir":"./", "rootDir":"./" } }
◾ lib options
//app.ts const btn = document.querySelector('button'); btn.addEventListener('click',() => {console.log('click!')})
이렇게 코드를 작성하면 애러가 난다. 왜냐면 타입스크립트가 button을 찾아 낼 지 여부를 확신하지 못하기 때문이다.
//app.ts const btn = document.querySelector('button') !; btn.addEventListener('click',() => {console.log('click!')}) //이 코드는 이 의미와 같음. const btn = document.querySelector('button') !; btn?.addEventListener('click',() => {console.log('click!')})
이렇게 코드를 작성하게 되면 애러가 나지 않는다. 코드 뒤에 붙인 느낌표는 기본적으로 버튼이 존재하니 값이 반환될 것이라고 타입스크립트에게 알려주는 일종의 표시이다.
그렇다면! 타입스크립트는 document를 어떻게 알아 낼 수있으며, document가 갖고있는 메서드 들을 어떻게 알 수 있을까?? addEventListener가 갖고 있는 이벤트 들을 어떻게 알고 접근 할 수 있는 것일까?
그건 바로 lib 옵션이 있기 때문이다.
lib
의 설정에 따라 컴파일 하는 라이브러리가 달라지며, 설정을 하지 않거나 기본 설정은 target의 javascript에서 기본적으로 전역사용이 가능한 모든 기능이 포함된다.
주석을 해제하면 기본설정이 없어지므로 애러남.
◾ sourceMap Options
sourceMap
옵션을 true로 바꾸게 되면 filename.js.map
이라는 파일이 하나 더 생김.
브라우저에서 source 부분에 들어가면 app.js 와 app.ts가 다 빌드되어 파일로 보여짐. 디버깅할 때 용이함.
◾ strict options
{ "strict":true, // "noImplicitAny": true, // "strictNullChecks": true, // "strictFunctionTypes": true, // "strictBindCallApply": true, // "strictPropertyInitialization": true, // "noImplicitThis": true, // "useUnknownInCatchVariables": true, // "alwaysStrict": true, // "noUnusedLocals": true, // "noUnusedParameters": true, // "exactOptionalPropertyTypes": true, // "noImplicitReturns": true, // "noFallthroughCasesInSwitch": true, // "noUncheckedIndexedAccess": true, // "noImplicitOverride": true, // "noPropertyAccessFromIndexSignature": true, // "allowUnusedLabels": true, // "allowUnreachableCode": true, }
strict : ture
가 밑에 있는 옵션들을 포함한 것이라고 보면 됨.
의미는 영어 그대로임 ^^ ;;
Author And Source
이 문제에 관하여(Typescript_ 7. tsconfig), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@holicholicpop/4.-Typescript-tsconfig저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)