Typescriptでモーダル作成

Question

前提・実現したいこと

typescriptの学習をしています。(初心者です)
簡単なclass設計など、一通りtypescriptの基礎を学習しましたが、いざtypescriptでモーダルを作成しようとしたところ、作成方法がわかりません。
下記javascriptで記述したモーダルをtypescriptで記述するようにしたいです。

Javascriptで書いたモーダル

  document.querySelectorAll('[data-modal-open]').forEach(elem => {
    // 開閉する要素
    const targetModalId = elem.getAttribute('data-modal-open');
    const modal = document.getElementById(targetModalId);

    // 開く
    elem.addEventListener('click', () => {
      modal.classList.add('is-open');
    });

    // 閉じる
    modal.querySelectorAll('[data-modal-close]').forEach(closeElem => {
      closeElem.addEventListener('click', function() {
        modal.classList.remove('is-open');
      });
    });
  });

typescriptでclass設計をして使用するにはどうしたら良いでしょうか？
または、typescriptで書かれた参考モーダル等のサイトや書籍はありますでしょうか？

Comments

[miyabi_pudding]

typescriptのこと何か勘違いされてませんか？
typescriptは、javascriptの糖衣言語となりますので、
なんらかの形でjavascriptにコンパイルしないと、ブラウザでモーダルを表示などのWeb動作はできません。
もしかして、AngularなどのJSフレームワークを使っていますか？
であるならば、Angularなどの、JSフレームワークのタブも追加し、質問文を修正すべきです。

Answer 1

typescriptはでHTMLの操作をするのであれば、
拡張子を.tsとしてプログラムを組むといいです。
コードを見たところ htmlのクラスの付替えで表示を切り替えているように見えるので、
表示・非表示の切り替えができているか確認をしてみましょう。

JSもTSもブラウザ上で動くものは根本的にHTML, CSSを操作する言語なので、
やりたいことベースで検索して少しずつ覚えると良いと思います。