TypeScriptの関数をHTML(JavaScript)から呼び出す

TypeScriptの型の恩恵を受けながらHTML(JavaScript)から必要な関数だけを呼び出したい。

そんな時はグローバルなWindowにメソッドを生やす事で対応できます。

  1. 生やしたいメソッドのinterfaceを定義する
  2. globalなWindowのプロパティにinterfaceを定義する
  3. 関数をWindowのプロパティに代入する

実装

今回は console.log を呼ぶ簡単な関数を即時関数で実装しました。

interface TsFunc {
  print(message: string): void;
}

declare global {
  interface Window {
    tsFunc: TsFunc;
  }
}

const tsFunc: TsFunc = (() => {
  return {
    print: (message: string) => {
      console.log(message);
    },
  };
})();
window.tsFunc = tsFunc;

実行

JavaScriptのモジュールを呼ぶのと同様にHTML(JavaScript)から呼ぶ出すことができる。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <script src="bundle.js"></script>
  <script>
    tsFunc.print("JavaScriptからコール");
  </script>
</body>
</html>

output

JavaScriptからコール

この手法を取る事によって、型の恩恵を受けながら簡易的にHTMLから呼び出したい場合に有効かと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です