Typescript : 기초부터 실전형 프로젝트까지 with React + NodeJS / 2. 타입스크립트 컴파일러 (및 구성)

tsc-watch

• node에서 nodemon이 있다면 typescript에는 tsc-watch를 사용한다
• 개발을 진행하면서 소스코드를 수정할 경우 ts파일만 수정이 될거고 js파일은 각각 컴파일을 한게 아니라 변경되지 않을 것이다.
• ts파일들을 수정할 때마다 빌드를 해줘야하는데, tsc-watch를 설정하면 ts파일이 수정될 때마다 컴파일을 다시하고 지정된 js 실행파일을 다시 실행해서 편리하다

tsconfig.json 설정

"outDir": "./dist"

• 컴파일 후 생성되는 js파일이 생성될 폴더명
• ./dist 하위에 js파일 컴파일됨

"rootDir": "./src"

• 시작하는 루트 폴더

// "removeComments": true,    

• 컴파일시 주석을 제거해준다

typescript DOM 선택

• 객체를 선택한 후 바로 조작하려하면 에러가난다
• 선택한 객체는 null일 수 있는 union타입이기 때문이다

1. Non-null assertion operator

타입스크립트에서 변수 앞이 아닌 뒤에 느낌표(!)를 사용하면 피연산자가 null이나 undefined값이 아님을 단언할 수 있다.

const button = document.getElementById("button")!;

button.addEventListener('click', ()=>{

})

2. optional chaining

타입스크립트에서 물음표(?)는 접근하는 객체의 프로퍼티가 null 또는 undefined일 수 있는 optional property인 경우 if문을 사용하지 않고 넘어가게 하는 체이닝을 하는데 쓰인다

const button = document.getElementById("button");

button?.addEventListener('click', ()=>{

})