TypeScriptの関数をHTML（JavaScript）から呼び出す

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

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

生やしたいメソッドのinterfaceを定義する
globalなWindowのプロパティにinterfaceを定義する
関数を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