@neos21/in-browser-ts : In Browser TS

ブラウザ上で TypeScript コードをコンパイルし Web ページに適用するライブラリ。

Demo

Demo (GitHub Pages)

How To Use

• 分離バージョンの場合 : typescript.js と in-browser-ts.js を読み込む
  • 圧縮板 : in-browser-ts.min.js

<script src="./typescript.js"></script>
<script src="./in-browser-ts.js"></script>

• バンドルバージョンの場合 : in-browser-ts.bundle.js を読み込む
  • 圧縮板 : in-browser-ts.bundle.min.js

<script src="./in-browser-ts.bundle.js"></script>

次のように type="text/typescript" 属性を付与して TypeScript コードを書く。

<!-- 外部 TypeScript ファイルを読み込む -->
<script type="text/typescript" src="./example.ts"></script>

<!-- インラインに TypeScript を記述する -->
<script type="text/typescript">
  const text: string = 'Hello World';
</script>

DOMContentLoaded のタイミングで TypeScript コードが JavaScript にトランスパイルされ body 要素の末尾にインライン script 要素として挿入される。

In Browser TS の動作ログをコンソール出力するには in-browser-ts.js を読み込む前に次のグローバル変数を定義しておく。

<script>
  window.inBrowserTsIsOutputLog = true;
</script>

<script src="./in-browser-ts.bundle.min.js"></script>

Links

• Neo's World
• GitHub - Neos21
• GitHub - in-browser-ts
• GitHub Pages - @neos21/in-browser-ts : In Browser TS
• npm - @neos21/in-browser-ts