10.27

tsconfig.json

tsc --init

• tsconfig.json 파일 생성
• tsc만 입력해도 프로젝트 내 모든 ts파일을 컴파일

tsc -w

• 변경사항 관찰모드

tsconfig.json

//compile 제외
“exclude”: ["exclude.ts"] ⇒ compile제외 파일
“exclude”: ["**/*.dev.ts"] ⇒ 와일드카드를 이용한 compile제외: 모든 파일에서 dev.ts 포함되면 제외
“exclude”: ["node_modules"] ⇒ 라이브러리 종속성 포함하는 node_modules 컴파일되면 안된다 -> default

//compile 포함
“include”: ["include.ts"] ⇒ 이 파일만 compile

"files": ["app.ts"]

//ts가 js로 컴파일되는 옵션
"compilerOptions" : {
"target" : "es5", //컴파일할 js 버전
//"lib": [
			"dom",
			"es6",
			"scripthost"
		],  -> 주석처리되어있으면 target의 설정 따라감
"allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
"checkJs": true,
"sourceMap": true, /* Create source map files for emitted JavaScript files. -> 디버깅 good */
"outDir": "./", //생성되는 파일의 저장 경로 설정(output)
"rootDir": "./src", /* Specify the root folder within your source files. */,
"removeComments": true,   ts파일 주석이 js에서 사라짐
"noEmit": true,       //컴파일만 하고 js파일 생성은 하지 않음 -> 규모 큰 프로젝트
"noEmitOnError": true, //컴파일 시 error인 경우 파일 생성하지 않음

/* Type Checking */
"strict": true /* Enable all strict type-checking options. */,
		// "noImplicitAny": true, //함수 매개변수 any 허용하지 않음 -> 컴파일 시 에러
		// "strictNullChecks": true,  //null이나 undefined일 수 있는 값에 error
		// "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
		// "strictBindCallApply": true,                      //bind, call, apply 올바르게 함수(인자) 실행하는지 촏차
		// "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
		// "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
		// "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
		// "alwaysStrict": true,                             // js에서 'use strict'
		// "noUnusedLocals": true,                           //지역변수 unused X
		// "noUnusedParameters": true,                       //매개변수 unused X
		// "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
		// "noImplicitReturns": true,                        // 함수에서 꼭 return하도록
		// "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
		// "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
		// "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
		// "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
		// "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
		// "allowUnreachableCode": true,
}

lib를 주석처리 해제한 후 빈 상태로 컴파일하면 아래

src에 ts 파일 넣고 컴파일 하면 그 구조 그대로 outDir에서 설정한 경로에 js파일이 생성된다.

strictNullChecks

const button = document.querySelector("button")!; //!로 반드시 있다고 해주거나

//if문으로 체크해서
if (button) {
	button.addEventListener("click", () => {
		console.log("clicked!");
	});
}