[코딩애플] 타입스크립트 HTML 조작시 주의점 (2) : 더 narrowing하기

우선..

{
  "compilerOptions": {
    ...
    "strictNullChecks": true,
    ...
  },
}

tsconfig.json 파일에서 strictNullCheck 옵션을 true로 바꾼다. (혹은 "strict" : true로 써둬도 된다) 이렇게 설정하면 TypeScript 컴파일러는 더 엄격한 규칙을 적용하며, 변수에 대한 null 체크가 강제된다.

---

href 조작시 오류

let link = document.querySelector('#link');
if(link instanceof HTMLElement){
  link.href = 'https://kakao.com';
}

HTMLElement 타입은 href 속성이 없다는 오류가 뜬다. 링크태그의 경우에는 좀더 좁게 narrowing해줘야 한다. 

---

해결방법

let link = document.querySelector('#link');
if(link instanceof HTMLAnchorElement){
  link.href = 'https://kakao.com';
}

링크태그의 경우에는 좀더 좁게 narrowing해줘야 한다.

html 태그 종류별로 정확한 타입명칭이 있다.

• a 태그는 HTMLAnchorElement
• img 태그는 HTMLImageElement
• h4 태그는 HTMLHeadingElement
• ...

엄청 많으니 자동완성을 쓰자.

---

출처 : 코딩애플 https://codingapple.com/ / TypeScript Documentation https://www.typescriptlang.org/docs/handbook/2/objects.html