9. Let's do Mini Project

 

 

Step 1. Settings

• Install Typescript 

FOLDER > npm install typescript --save-dev

 

• tsconfig.json 파일 생성

FOLDER > npx tsc --init

 

• 폴더 생성 (src, dist)

FOLDER > mkdir src dist

 

• tsconfig.json 설정 변경

{
	"compilerOptions": {
            ...
            
            "outDir": "./dist",
            
            ...
        },
        "include": ["src"]
}

 

• Watch 모드 설정

FOLDER > npx tsc --watch

 

 

 

Step 2. DOM

• tsconfig.json의 lib에서 "DOM"을 적용하거나, 주석 처리 Default인 경우 DOM 사용 가능
• Javascript와 같은 방식으로 DOM 사용

// tsconfig.json
  "compilerOptions": {
  	"lib": ["DOM"]
  }
  
  const dom = document

 

 

• Non-null 단언 연산자
• ! 를 사용하여 절대 null이 되지 않음을 명시

let button = document.getElementById('btn') // button => HTMLElement | null
let button = document.getElementById('btn')! // button => HTMLElement

button.addEventListener('click', function(){})

 

 

• Type Assertions (타입 단언)
• DOM의 타입을 직접적으로 명시해줌
• as HTML~

let input = document.getElementById('todoInput')

input.value // ERROR

• getElementById로 불러온 input은 HTMLInputElement로써, 현재 작성된 코드로는 HTMLInputElement라는 것을 알지 못하기 때문에, value값을 가질수도 있고 안가질 수도 있으므로 inpute.value는 ERROR

 

let input = document.getElementById('todoInput') as HTMLInputElement

input.value // OK

• input이 HTMLInputElement라는 것을 단언 함으로써, input.value가 적용

 

 

• DOM 선택
• querySelector로 태그를 입력하면 HTML태그요소로 바로 적용
  ==> as HTMLFormElement 단언 필요 없음
  ex) document.querySelector('form') // HTMLFormElement

document.getElementById('button') // HTMLElement | null
documlent.querySelector('form') // HTMLFormElement | null

 

 

• 이벤트 다루기

const form = document.querySelector('form')!

form.addEventListener('submit', function(e){
	e.preventDefault() // submit 이벤트의 자동 새로고침을 막아줌
    	alert('SUBMIT')
})

• Javascript와 똑같은 방식으로 event 사용

const form = document.querySelector('form')!

const submitFnc = (e: SubmitEvent) => {
	e.preventDefault()
    	alert('SUBMIT')
}

form.addEventListener('submit', submitFnc)

• submitFnc의 파라미터 e가 SubmitEvent 타입임을 명시하지 않는다면, e는 any 타입으로 자동 명시되어,
  e.preventDefault() 이벤트 적용 X