TypeScriptでHTML内のid名やclass名取得

前提・実現したいこと

エディタ：Visual Studio Code
TypeScript学習中。静的型言語は未経験です。

javascriptで行なっていたDOM取得をTypeScriptで記述すると
エラーが発生します。　型定義の問題だと思いますがDOM取得の場合は
どのように型定義を指定したら良いかわかりません。
ご教授お願いします。

発生している問題・エラーメッセージ

javascriptでは問題なく動きます。
コード太字部分：
•number型にstringに割り当てできません。
•オブジェクトはnullである可能性があります。

該当のソースコード

textarea 内の文字数をチェックするコードです。
テキストエリア内の上限文字数：５０
残り文字数が１０文字切ったら赤く表示。

-----------HTMLファイル-----------

<body> <div class="container"> <textarea id="comment"placeholder="your comment here"></textarea> <div class="btn">Submit</div> <p><span id="label"></span></p>

</div>
<script src="js/main.js"></script>

</body>

-----------ｔｓファイル-----------
let comment = document.getElementById('comment');
let label = document.getElementById('label');

const LIMIT: number =  ５０; 
const WARING: number = １０;

**label.innerHTML** = LIMIT;　
    //　label.innnerHTML でエラー。
    //内容: number 型を　stringに割り当てできません。

**comment**.addEventListener('keyup', () => {
     //commentでエラー
     //内容：オブジェクトはnullである可能性があります。

	let remaining: number = LIMIT - this.value.length;
	label.innerHTML = remaining;
	label.className = remaining < WARING ? 
	'warning' : '';
　});

-----------CSSファイル-----------
body {
font-family: Verdana, sans-serif;
font-size: 16px;
background: #e0e0e0;
}

.container {
width: 400px;
margin: 30px auto;
}

textarea {
width: 400px;
height: 200px;
box-sizing: border-box;
padding: 14px;
font-size: 16px;
border: none;
border-radius: 5px;
margin-bottom: 14px;
line-height: 1.5;
}
textarea:focus {
outline: none;
}

p {
color: #333;
font-size: 14px;
margin: 0;
padding-top: 8px;
}

.btn {
display: block;
width: 150px;
background: #00aaff;
padding: 5px;
color:#fff;
border-radius: 5px;
text-align: center;
cursor: pointer;
box-shadow: 0 4px 0 #0088cc;
float: right;
}
.warning {
color: red;
}