同意するチェックボックスでボタン有効化

よくあるチェックしたらボタン押せるようになるやつ。

<div class="contactAgree">
  <label><input type="checkbox" name="agree" value="agreement"> 同意する</label>
  <input id="submitButton" type="submit" value="送信" disabled>
</div>

const button = document.getElementById('submitButton')
const checkbox = document.querySelector('input[name="agree"]')

checkbox.addEventListener('change', (e) => {
  button.disabled = !e.target.checked
})

参考

TypeScript Type Assertion（型アサーション）

Type Assertion（型アサーション） - TypeScript Deep Dive 日本語版

ここでエラーが発生するのは、fooの推論された型が {}、すなわちプロパティがゼロのオブジェクトだからです。したがって、barやbasを追加することはできません。これは、単純に型アサーションas Fooで修正することができます：

interface Foo {
    bar: number;
    bas: string;
}
var foo = {} as Foo;
foo.bar = 123;
foo.bas = 'hello';

as fooと<foo>の違い

しかし、JSXでスタイルのアサーションを使用する場合、言語文法にあいまいさがあります。

一貫性のためにas fooを使うことをお勧めします。