[TypeScript] 타입스크립트로 마이그레이션하기

 

◽ @ts-check

마이그레이션 과정에서 타입스크립트 전환 시 어떤 문제가 발생하는지 @ts-check를 활용하여 시험해 볼 수 있다.

// @ts-check
const person = { first: 'Grace', last: 'Hopper' }
2 * person.first // Error!

 

 

◽ JSDoc

아래 코드에서 에러가 나는 이유는 더 상위 개념인 HTMLElement 타입을 반환하기 때문이다.

// @ts-check
const ageEl = document.getElementById('age')
ageEl.value = '12' // Error! 'HTMLElement' 유형에 'value' 속성이 없습니다.

 

확실히 input 엘리먼트라는 것을 알고있다면 단언문을 사용히여 해결할 수 있다. 하지만 타입스크립트가 아닌 자바스크립트로 작성되었기 때문에, JSDoc으로 해결할 수 있다.

// @ts-check
// 문법: /** @type {[타입]} */( // .. )
// 중괄호로 감싸주어야 한다.
const ageEl = /** @type {HTMLInputElement} */(document.getElementById('age'))
ageEl.value = '12' // 정상

 

 

 

---

 

 

 

출처

댄 밴터캄, 이펙티브 타입스크립트 (프로그래밍 인사이트, 2021)

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.