HTML Dom narrowing

tsconfig.json 에서 "strictNullChecks" : true  나 "strict": true 옵션을 설정하면 이런 널 값을 잡아주는데,

특히 html 조작할때 셀렉터로 찾으면 null 값이 많이 발생함. 이거 잡을때 특히 유용.

 

쨋든 여기서 에러가 나는 이유는 

셀렉터로 html 을 찾으면 타입이 Element | null 이라서 그럼.

왜냐면 html 못찾아내면 null 이 되기 때문.

 

이걸 해결하려면 여러 방법이 있는데

 

1. 그냥 narrowing 을 해준다.

2. instanceof 를 사용해서 narrowing을 해준다.

3. assertion 을 쓴다.

4. optional chaining( 옵셔널 체이닝 )을 쓴다.

5. 그냥 strict 옵션을 끈다.

 

5가지 방법중 2번의 방법이 가장 낫다.

그 이유는 글 후반부에 설명.

 

1. 그냥 narrowing 을 해준다. 의 예시

 

null 인지 아닌지만 narrowing

 

2. instanceof 를 사용한 narrowing 예시

 

3. assertion 을 쓰는 예시

 

4. optional chaining 을 쓰는 예시

 

 

옵셔널체이닝을 써주면 "왼쪽의 object 자료형 안에 innerHTML 이 존재하면 그거 쓰고 없으면 undefined 로 해"

이므로 undefined 를 narrowing 해주면 되겠군뇨.

 

5. 그냥 strict 옵션 끄기

 

이럴거면 타입스크립트말고 그냥 자바스크립트 쓰셈.

 

 

instanceof 를 사용한 narrowing  이 가장 좋은 방법인 이유는

 

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

 

a 태그는 HTMLAnchorElement

img 태그는 HTMLImageElement

h1,h2,h3... 태그는 HTMLHeadingElement

 

이런 정확한 타입으로 narrowing 해줘야 html 속성 수정을 제대로 할 수 있음.

대부분은 자동완성 잘 됨.

셀렉터로 태그를 찾으면 Element 라는 타입이 부여되는데,

아직 이 태그가 뭔지 몰라서 그냥 광범위한 타입을 지정해주는거임.

 

예를들어 a 태그의 href 속성을 조작할때 

 

href 속성은 HTMLElement 타입에 없다고 함.

 

dom 관련 타입 만들때

Element 에 있는거 복사해서 몇개 더 추가해서 HTMLElement 타입 만들어놨고,

HTMLElement 에 있는거 복사해서 몇개 더 추가해서 HTMLAnchorElement 타입 만들어놓고 이런식으로 타입을 만들어 놔서 그냥 Element 나 HTMLElement 타입에는 .href .src 이런거 안들어 있음.

 

"HTMLAnchorElement 타입에 href, style, class, id .... 이런 속성을 가질수 있다" 라고 정의 되어있음.

그래서 a태그에 맞는 타입인 HTMLAnchorElement 라는 타입의 instance 인지를 확인 하는

instanceof 를 이용한 narrowing 이 가장 좋은 방법임.