[TypeScript] クライアントサイド – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
	<script src="main.js"></script>
</head>
<body>
	<h1 class="bg-primary text-white p-2">web sample</h1>
	<div class="container">
		<h2 class="my-3">web sample</h2>
		<div class="alert alert-primary">
			<p id="msg">wait...</p>
		</div>
	</div>
</body>
</html>

index.ts

let msg:HTMLParagraphElement

const html = `<h2>This is message</h2>
	<p>これはTypeScriptで表示したコンテンツです。</p>`

window.addEventListener('load', ()=> {
	msg = document.querySelector('#msg')
	msg.innerHTML = html
})

let msg:HTMLParagraphElement

const html = `<h2><a id="title">This is message</a></h2>
	<p>これはTypeScriptで表示したコンテンツです。</p>`

window.addEventListener('load', ()=> {
	msg = document.querySelector('#msg')
	msg.innerHTML = html
	const title:HTMLAnchorElement = document.querySelector('#title')
	title.href = 'http://google.com'
})