@neos21/in-browser-ts : In Browser TS
ブラウザ上で TypeScript コードをコンパイルし Web ページに適用するライブラリ。
Demo
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>