タイプスクリプトを使用してHTMLを変更および操作する際の注意点

HTMLを操作する前に、tsconfigを使用してください.jsonファイルを開き、strickNullChecksオプションをtrueに変更します.
あるいは「strict」:trueと書くだけで、strickNullChecksオプションも自動的にtrueになります.
多くの環境でnullが発生すると、チェックオプションが開き、エンコードされます.変数を操作する前にnullかどうかを知ることができます.特にhtmlを処理する場合,コレクタとして検索するとnullなどが多く発生し,キャプチャ時にも役立つ.

// tsconfig.json 파일
{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "strictNullChecks": true
    }
} 

htmlファイルの準備

<!-- index.html -->
<h4 id="title">안녕하세요</h4>
<a href="naver.com" class="link">링크</a>
<button id="button">버튼</button>

<script src="변환된 자바스크립트파일.js"></script>

HTMLの変更

// 에러나는 코드
let subject = document.querySelector("#title");
subject.innerHTML = "반가워요" 

JAvascriptではエラーは発生しませんが、タイプスクリプトではエラーが発生します.(strictオプションが追加されているため)、subject変数はnullになる可能性があります.
なぜなら、コレクタを使用してhtmlを検索する場合、タイプはElement|nullです.
上のコードでは、subject変数がunion type(Element|null)であるため、エラーが発生します.
1. narrowing

let subject = document.querySelector('#title');
if (subject != null) {
  subject.innerHTML = "반가워요"
}

if文に範囲を縮小
2. instanceof

let subject = document.querySelector('#title');
if (subject instanceof HTMLElement) {
  subject.innerHTML = "반가워요"
}

最も一般的な方法
これはinstanceofという演算子です.右側にHTML Elementを入力すると、タイプがチェックされます.
3. assertion(as)

let subject = document.querySelector('#title') as HTMLElement;
subject.innerHTML = "반가워요"

document.querySelector(#title")を要素として扱います.
asキーワードを使うと、タイプを組み合わせます.(推奨しない)
タイプをHTML Elementか普通のElementにすればいいです
4. optional chaining

let subject = document.querySelector('#title');
if (subject?.innerHTML != undefined) {
  subject.innerHTML = "반가워요"
}

?左のobject資料にあります.innerHTMLが存在するならそれを書いて無いと定義が無い(有るか無いか)
縮小する場合、&&演算子を使用したり、不確定なチェックで使用したりすることがあります.
HTMLタグ属性の変更
aタグのhrefプロパティの変更
JavaScriptで置換

let 링크 = document.querySelector(".link");
링크.href = "https://kakao.com";

タイプスクリプトで置換

let 링크 = document.querySelector('#link');

// 에러나는 코드
// if (링크 instanceof HTMLElement) {
//  링크.href = 'https://kakao.com' 
// }

if (링크 instanceof HTMLAnchorElement) {
  링크.href = 'https://kakao.com' 
}

HTML Elementを使用する場合、HTML Elementタイプにhref属性がないと勘違い
各htmlタグには正しいタイプ名があります.
a HTML AnchorElementと表記
imgはHTML ImageElementとしてマークされています
h 4 HTML HeadingElementと表記
buttonはHTML ButtonElementとしてマークされています
明かり.
htmlプロパティを変更するには、正しいタイプに縮小します.(自動補完機能利用)
imgラベルのsrcプロパティの変更

<img id="image" src="test.jpg">

let img = document.querySelector('#image');
if (img instanceof HTMLImageElement){
  img.src = 'change.jpg';
}

srcプロパティを変更するには、HTML ImageElementタイプを決定する必要があります.
複数の置換

<a href="naver.com" class="link">링크</a>
<a href="naver.com" class="link">링크</a>
<a href="naver.com" class="link">링크</a>

let links = document.querySelectorAll(".link");

links.forEach((link)=>{
	if (link instanceof HTMLAnchorElement) {
		link.href = "https://kakao.com"
	}
})

タイプスクリプトHTMLプロパティ
タイプスクリプトに書き込めるHTMLタイプ.
Element、HTML Element、HTML AnchorElementなど.
Elementに含まれるコンテンツをコピーし、いくつか追加してHTML Elementタイプを作成します.
HTML Elementに含まれるコンテンツをコピーし、いくつか追加してHTML AnchorElementタイプを作成しました
コレクタで見つけた場合、要素タイプが与えられます.
ElementTypeは広範なタイプである(href.srcなどの詳細な属性を持たない従来のhtmlタグの特徴をまとめている)
逆にHTML AnchorElement、HTML ImageElement、HTML HeadingElementなどのフォーマットは比較的詳細なタイプです.
このタイプは、「href、style、class、idはこれらの属性~」と定義されます.
aタグがHTML AnchorElementというタイプを書き込むことができるかどうかをinstanceofキーワードでチェックする必要があります.
確認プロセスを縮小と認定
addEventListener

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

エラーが発生しました.ボタンと呼ばれる変数はnullです.

let 버튼 = document.getElementById('button');
버튼?.addEventListener('click', function(){
  console.log('안녕')
})

?オプションのリンクを使用してエラーを回避
ソース:アップル