[TypeScript] HTML 조작 및 주의점

2022. 5. 27. 17:35·TypeScript/기초
목차
  1. strictNullCheck 
  2. HTML 찾고 변경하기 
  3. narrowing
  4. assertion
  5. optional chaining 연산자
  6. 이벤트 리스너 추가하기 
반응형

strictNullCheck 

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "strictNullChecks": true
    }
}

변수 조작을 하기 전에 null인지 확인하는 작업은 중요하다.

특히 html 조작을 할 때 셀렉터로 찾으면 null인 경우가 꽤 발생하니 많은 도움이 된다. 

 

그러므로 tsconfig.json에 strictNullChecks 옵션을 켠다면 null이 들어왔는지 아닌지 확인할 수 있다. 

 

HTML 찾고 변경하기 

let title = document.querySelector("#title");
title.innerHtml = "Hello";  // 에러

querySelector로 조회하고 innerHtml로 변경하는 방식은 자바스크립트라면 문제가 없는 방식이지만, 

타입스크립트에서는 에러가 난다. 

 

" title이라는 변수가 null 일 수 있다 " 는 이유로 말이다. 

strictNullChecks 옵션을 켜서 이런 에러가 발생하는데, 셀렉터로 html을 찾으면 타입이 Element | null 이기 때문이다. 

 

해결책으로는 

  1. narrowing을 한다.
  2. assertion을 사용한다. 
  3. optional chaining 연산자를 사용한다.
  4. strick 설정을 끈다.

narrowing

let title = document.querySelector("#title");

if(title !== null) {
	title.innerHtml = "hello";
}

title이 null인지 확인하고 null이 아니면 처리하는 방식으로 작업할 수 있다. 

 

let title = document.querySelector("#title");

if(title instanceof HTMLElement) {
	title.innerHtml = "hello";
}

instanceof라는 연산자를 사용해서 처리할 수 있다. 

instanceof 연산자는 우측의 타입이 맞는지 확인해서 체크해주는 연산자이다. 

 

assertion

let title = document.querySelector("#title") as HTMLElement;

title.innerHtml = "hello";

as 키워드를 사용하면 타입을 속여 타입스크립트에서 사용할 수 있다. 

하지만 정말 틀린 경우 정답이 될 수 없으므로 사용하지 않는 것을 추천한다. 

 

optional chaining 연산자

let title = document.querySelector("#title");

if(title?.innerHtml !== undefined) {
	title.innerHtml = "hello";
}

자바스크립트의 신문법으로 object 자료 안에 innerHtml이 존재하면 true 없다면 undefined를 리턴한다. 

 

가장 좋은 방법은 narrowing에서 instanceof 연산자를 사용하는 것이다. 

 

let link = document.querySelector("#link");

if(link instanceof HTMLElement) {
	link.href = "https://naver.com"   // 에러
}

HTMLElement 타입은 href 속성이 없기 때문에 에러가 발생한다. 

 

let link = document.querySelector("#link");

if(link instanceof HTMLAnchorElement) {
	link.href = "https://naver.com"   // 에러
}

html 태그의 종류별로 정확한 타입 명칭이 있고, 타입별로 특수하게 가지고 있는 기능이 있기 때문에 

정확한 타입으로 narrowing을 해줘야 html 속성을 수정할 수 있다. 

 

이벤트 리스너 추가하기 

let buttons = document.getElementById('button');
buttons.addEventListener('click', function(){   // 에러
  console.log('안녕')  
})

buttons이라는 변수도 null 일 수 있기 때문에 마찬가지로 에러가 난다. 

 

let buttons = document.getElementById('button');
buttons?.addEventListener('click', function(){   // 에러
  console.log('안녕')  
})

빠른 처리 방법으로 optional chaining을 사용하면 해결이 가능하다. 

button이라는 id를 가진 태그가 없다면 undefined를 내보내고, 있다면 addEventListener 함수를 사용할 수 있다. 

반응형
저작자표시 비영리 변경금지 (새창열림)

'TypeScript > 기초' 카테고리의 다른 글

[TypeScript] interface  (0) 2022.06.12
[TypeScript] class 만들 때 타입 지정  (0) 2022.06.10
[TypeScript] 함수와 method에 type alias 지정하기  (1) 2022.05.26
[TypeScript] Literal Type  (2) 2022.05.25
[TypeScript] type 키워드 & readonly  (1) 2022.05.10
  1. strictNullCheck 
  2. HTML 찾고 변경하기 
  3. narrowing
  4. assertion
  5. optional chaining 연산자
  6. 이벤트 리스너 추가하기 
'TypeScript/기초' 카테고리의 다른 글
  • [TypeScript] interface
  • [TypeScript] class 만들 때 타입 지정
  • [TypeScript] 함수와 method에 type alias 지정하기
  • [TypeScript] Literal Type
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    webpack
    프로그래머스
    리액트
    다이소
    CSS
    덤프
    리얼클래스
    Docker
    알고리즘
    타입스크립트
    react
    리얼학습일기
    typescript
    ReactNative
    네이버 부스트캠프
    Babel
    CCNA
    next.js
    네트워크
    바질 키우기
    ChatGPT
    영어회화
    redux
    javascript
    Node.js
    식물
    바질
    자바스크립트
    타일러영어
    영어독학
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
[TypeScript] HTML 조작 및 주의점

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.