지금까지 수동으로 한파일 한 파일 씩 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":[
    // 컴파일에 추가시킬 파일들
    ]
}

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 가 밑에 있는 옵션들을 포함한 것이라고 보면 됨.

의미는 영어 그대로임 ^^ ;;