TypeScript ファイルを読み込んでブラウザ上でコンパイル・適用する「in-browser-ts」を作った
以前、SASS・SCSS ファイルを読み込んでブラウザ上でコンパイル・適用する「in-browser-sass」という npm パッケージを作ったことがある。
sass.js というライブラリが JavaScript オンリーで SASS・SCSS をトランスパイルできるので、外部ファイルを読み込んだり、インラインに記述した SCSS コードを取得したりして sass.js に食わせているだけのアプリだ。
最近ふと、TypeScript のトランスパイルもブラウザ上の JavaScript オンリーでトランスパイルできるのでは？と思って調べてみたところ、できた。というワケで in-browser-ts という npm パッケージを作った。
- リポジトリ : Neos21/in-browser-ts: @neos21/in-browser-ts : Compile TypeScript in the browser.
- 動作デモ : @neos21/in-browser-ts : In Browser TS … ソースコード、コンソールログを参照のこと
@neos21/in-browser-ts という npm パッケージ、および GitHub Packages として公開しているので、npm 系の CDN からファイルを参照すれば良い他、GitHub Pages や Raw Git 経由で利用してもらっても良いと思う。
核となるのは、TypeScript 公式が提供している typescript.js というファイル。似たようなモノに typescriptServices.js というファイルもあり違いがよく分かってないが、とりあえずこの単一ファイルさえあれば、グローバル変数に生える ts.transpile() 関数を叩いて、TypeScript コードを変換できるというワケだ。
既に似たようなことをやっているパッケージはあったし、TypeScript 公式の Playground なんかも同様の仕組みだろうし、Monaco Editor なんかが TypeScript 構文を理解できるのもこの辺の仕組みを利用してのモノと思われる。新規性はないのだが、とりあえず作れました、ということで。あと試してないけど import とかは解決できないはず。
- 参考 : basarat/typescript-script: Script tag support for TypeScript
- 参考 : How to compile TypeScript code in the browser? - Stack Overflow
- 参考 : TypeScript/typescript.js at v4.7.4 · microsoft/TypeScript
- 参考 : TypeScript/typescript.d.ts at v4.7.4 · microsoft/TypeScript
- 参考 : TypeScript/typescriptServices.js at v4.7.4 · microsoft/TypeScript
- 参考 : TypeScript/typescriptServices.d.ts at v4.7.4 · microsoft/TypeScript
