[TypeScript] 매일매일 #3

never 타입

// 이 함수는 반환값을 void로 추론하지만 never을 사용할 수 있다.
// 에러를 출력하거나 절대 반환값이 없다는 의미
function generateError(message: string, code: number): never{
	throw {message, errorCode: code};
}

generateError('An error occured', 500);

tsc --watch <file.ts>

tsc -W <file.ts>

타입스크립트 파일을 지켜보면서(watch) 소스코드에 변화가 생기면 컴파일한다.

 

tsc --init으로 tsconfig.json을 생성후에 

tsc, tsc --watch, tsc -W 명령어로 폴더의 모든 타입스크립트 파일을 컴파일한다.

 

---

tsconfig.json

 

exclude : 컴파일에서 제외
include : 컴파일 할 파일

"exclude" : [analytics.ts, *.dev.ts, **/*.dev.ts],
"include" : ["app.ts", "analytics.ts"]

**/*.dev.ts의 경우에는 모든 폴더 아래에 있는 *.dev.ts 파일을 컴파일에서 제외한다.

 

exclude의 default값은 node_modules를 제외한다.

node_modules만 제외하려면 따로 값을 추가하지 않아도 된다.

 

tsconfig.json의 compilerOptions는 타입스크립트가 어떻게 컴파일할지에 대한 설정을 관리한다.

 

target: 자바스크립트의 어떤 버전으로 컴파일 할 것인지 지정한다.

 

lib: 돔, 자바스크립트 코드를 다루는 것과 관련되어 있다.

타입스크립트 코드는 브라우저만을 위해서 작성하는것이 아니다.

타입스크립트가 document, addEventListener, console과 같은 객체와 메소드를 알고 있는 이유는 lib 속성 때문.

lib가 설정이 안되어 있으면 기본 설정은 target값을 따른다.

es6로 설정한 경우, 기본적으로 es6에서 전역적으로 사용 가능한 모든 기능이 포함된다.(Map, Set도 에러없이 동작)

모든 Dom API도 사용 가능하게 한다.

// target이 es6인 경우 lib 옵션이 아래와 같다(default)
"lib": [
	"dom",
	"es6",
	"dom.iterable",
	"scripthost"
],

allowJs와 checkJs는 타입스크립트를 사용하지 않는 자바스크립트 파일도 검사를 하게 한다.

 

declaration, declarationMap

.d.ts파일은 프로젝트를 라이브러리로 배포할 때 중요한 고급 개념이다.

프로젝트의 모든 타입을 설명하는 manifest파일이 필요한 데 그것이 바로 .d.ts 파일이다.

 

sourceMap은 디버깅과 개발에 유용하다.

sourceMap을 주석을 풀고 컴파일을 하면 .js.map 파일이 만들어진다.

브라우저의 source탭을 보면 ts파일이 생겨서 디버깅에 유용하다.

 

outdir는 타입스크립트 소스를 컴파일 하고 만들어지는 자바스크립트 파일을 어디에 저장할지 경로를 지정한다.

rootDir는 컴파일 할 타입스크립트 파일의 루트 디렉토리 위치를 지정한다.

 

removeComments는 컴파일 할 시에 타입스크립트 소스코드에 작성되어 있는 주석을 삭제한다.

noEmit은 자바스크립트 파일을 만들어내지 않는다, 이상하게 들릴 수 있지만 타입스크립트 파일의 에러를 체크할 때 컴파일은 하지 않고 확인하고 싶을 때 사용한다.

 

downlevelIteration은 코드를 이전 버전의 자바스크립트 코드로 컴파일하고 for 루프문이 제대로 작동하지 않는 경우가 있다. 이 옵션을 설정하면 정확하게 컴파일 할 수 있다.

루프가 있고 생성된 코드가 정상적으로 작동하지 않을 때만 이 옵션을 사용한다.

 

“noEmitOnError” : false(default)

타입스크립트는 에러가 있어도 컴파일을 하면 자바스크립트 파일은 만들어진다.

noEmitOnError 옵션을 true로 하면 타입스크립트 파일에 오류가 하나라도 있다면 모든 파일이 자바스크립트 파일로 컴파일이 되지 않는다.

타입스크립트 파일에 에러가 있는 경우 자바스크립트 파일을 가져오고 싶지 않으면 true로 설정한다.

 

strict옵션은 모든 strict 유형의 검사 옵션을 설정한다.

strict옵션을 true로 하면 모든 strict 옵션을 true로 한 것과 동일하다.

 

noImplicitAny : 함수의 매개변수의 타입을 넣지 않으면 에러를 발생시킨다.

변수의 경우에는 선언시에 타입을 지정하지 않아도 타입스크립트가 흐름을 이해할 수 있는데

함수의 경우에는 먼저 선언이 되기 때문에 매개변수에 타입을 넣어주지 않으면 함수를 호출할 때 무슨 값이 올지 알 수가 없다.

 

strictNullChecks: null값을 잠재적으로 가질 수 있는 값에 대한 체크

 

// 타입스크립트는 html파일을 확인할 수 없기 때문에 button 변수에 정말 객체가 들어올 지 null값일지 알 수 없다
// 그래서 값이 있다는 의미로 마지막에 !를 붙여준다.
// !는 이 버튼이 존재하거나 이 연산이 null이 아닌 값을 반환한다는 것을 알려준다.
// 만약 무슨 값이 들어올지 모른다면 if문으로 button이 값이 있는지 없는지 체크한다. 
// strictNullChecks 옵션을 false로 지정하면 ! 없이도 에러가 발생하지 않는다.
const button = document.querySelector('button')!;

/* if(button){
	// 실행 할 명령
}
*/

button.addEventListener('click', ()=>{
	console.log('Clicked!');
})

strictBindCallApply : callback 함수를 전달할 때 apply, bind, call을 이용한다면 이 때 정확한 매개변수를 전달했는지를 확인 해 준다.

 

noUnusedLocals : 사용되지 않은 지역변수가 있으면 경고메세지

noUnusedParameters: 함수에 사용하지 않는 파라미터가 있으면 경고메세지

noImplicitReturns: 반환하는 값이 있는 함수의 경우에 특정 분기에만 반환이 되면 경고메세지

 

// if문에 걸리지 않는 경우도 있어서 에러가 발생한다.
function add(n1: number, n2: number):number {
	if(n1 + n2 > 0){
		return n1 + n2;
	}
// return;
}