TypeScript - DOM Manupulation

꼬디바아 ㅣ 2024. 2. 26. 11:15

728x90

728x90

TypeScript를 사용하여 DOM(Document Object Model) 조작은 JavaScript와 거의 동일하게 이루어진다. TypeScript는 정적 타입을 제공하므로 코드의 안정성이 높아지며, JavaScript에 비해 좀 더 구조적이고 유지보수가 용이해진다.

📌 tsconfig.json 파일을 열어서 strickNullChecks 옵션을 true로 바꾼다. 바꾸는 이유는 true로 바꿔야 null 오류를 낸다.

🖥️ HTML 파일

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript DOM Manipulation</title>
</head>
<body>
    <div id="myDiv">Hello, TypeScript DOM!</div>
    <button id="myButton">Click me</button>
    <a href="naver.com">링크</a>
    <script src="main.js"></script>
</body>
</html>

🖥️ Js 파일

let 제목 = document.querySelector('#Mydiv');
제목.innerHTML = '반갑소'

위의 코드들 처럼 HTML을 작성 후 JS파일 처럼 코드를 작성하면 "제목이라는 변수가 null일 수 있다." 라는 에러를 낸다.

에러를 내는 이유는 셀럭터로 html을 찾으면 타입이 Element | null 이기 때문이다.

그래서 아직 확실하지 않아서 조작하고 변경하는걸 금지시키는 것이다. 이 에러를 해결하는 방법이 있다.

Type narrowing
assertion

1. narrwoing

let 제목 = document.querySelector('#Mydiv');
if (제목 != null) {
  제목.innerHTML = '반갑소'
}

2. instanceof narrowing

let 제목 = document.querySelector('#Mydiv');
if (제목 instanceof HTMLElement) {
  제목.innerHTML = '반갑소'
}

instanceof 연산자에 우측에 HTMLElement를 입력해 그 타입인지 체크해준다.

3. assertion

let 제목 = document.querySelector('#Mydiv') as HTMLElement;
제목.innerHTML = '반갑소'

4. optional chaining

let 제목 = document.querySelector('#Mydiv');
if (제목?.innerHTML != undefined) {
  제목.innerHTML = '반갑소'
}

여기서 가장 좋은 방법은 2. instanceof 연산자를 쓰는 것이다.

이유는 타입스크립트에서 쓸 수 있는 HTML 타입들이 Element, HTMLElement, HTMLAnchorElement 등이 있다.

Element에 들어있는 것을 복사 후 몇개 더 추가해서 HTMLElement 타입을 만들었다.

셀렉터로 대충 찾으면 Element 타입이라는게 부여된다. 아직 이 태그가 뭔지 몰라서 광범위한 타입하나를 지정해주는 것이다. 이건 광범위한 일반 html 태그의 정리해둔 타입이기 때문에 안에 .herf, .src 가 없다.

반면 HTMLAnchorElement는 조금 상세한 타입이다. 이 타입은 "herf, style, class, id 속성을 가질 수 있다" 라는 타입이 정의되어 있다. 그래서 a 태그에게 어울리는 HTMLAnchorElement 라는 타입을 쓸 수 있는지 instanceof 키워드로 확인해야한다.

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

HTMLElement 타입은 herf 속성이 없기 때문에 에러가 난다.

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

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

div : HTMLDivElement
span : HTMLSpanElement
p : HTMLParagraphElement
a : HTMLAnchorElement
img : HTMLImageElement
ul : HTMLUListElement 및 HTML OListElement
li : HTMLLIElement
table : HTMLTableElement
tr : HTMLTableRowElement
th : HTMLTableHeadersCellElement 및 HTMLTableCellElement
form : HTMLFormElement

등등이 있다..

728x90

'👨‍💻 TypeScript' 카테고리의 다른 글

TypeScript - 타입스크립트 Interface (2)	2024.02.28
TypeScript - Class types (2)	2024.02.27
TypeScript - Type alias (1)	2024.02.25
TypeScript - Narrowing / assertion 문법 (1)	2024.02.24
TypeScript 기본 타입 정리(primitive types) (0)	2024.02.23

경험하는 IT