あなたのツール、私たちのサンドボックス

新しいTypeScriptプレイグラウンドでは、TypeScriptチームが予期しない方法でプレイグラウンドに接続し、拡張することができます。

プレイグラウンドのサイドバーは、外部プラグインと同じプラグインインフラストラクチャを使用しているため、プレイグラウンドと同じレベルのアクセス権を持ち、興味深いプロジェクトを構築できます。

プレイグラウンドプラグインは、DOM APIと拡張性の高いデザインシステムを使用して構築されますが、実行時にReactやSvelteなどのフレームワークを自由に使用できます。

 

使い始めるのは簡単です。プラグインテンプレートがあり、プレイグラウンドにはローカルサーバーに直接接続するための開発モードがあるため、TypeScript Webサイトのコピーを実行しなくても、動作する開発環境を用意できます。

サンプルプラグインのリポジトリはmicrosoft/TypeScript-Playground-Samplesにあり、既存のオープンソースプラグインも多数あります：プレゼンテーションモード、Clippy、TSQuery、Collaborate、Transformerはデフォルトで利用可能で、調査して理解することができます。

プラグインの開発中に質問がある場合は、TypeScriptコミュニティDiscordで質問してください。完成したら、npmレジストリに公開すると、プラグインサイドバーに表示されます。

Screenshot of the playground showing the plugins tab

クイックチュートリアル

必要なのは、約5分、Node.js、yarn、Firefox/EdgeまたはChromeです。

ステップ1：テンプレートを使用してブートストラップします：yarn create typescript-playground-plugin playground-my-plugin

ステップ2：新しいリポジトリでyarn startを実行して、ローカル開発サーバーを起動します

ステップ3：ブラウザでプレイグラウンドを開き、「オプション」をクリックして"Connect to localhost:5000/index.js"を有効にします

ステップ4：更新して、新しいタブを表示します。これでプラグインが起動して実行されています

 

これで、すべての要素が連携して動作するようになりました。テンプレートに変更を加えて、プラグインを構築できます。開発モードのプラグインは、接続されているときは常に最前面に表示されるため、多くのクリックなしで再読み込みできます。テンプレートの技術を理解するには、CONTRIBUTING.mdをご覧ください

代替案

よく知られたビューライブラリを使用してプラグインをブートストラップする、コミュニティが運営するプレイグラウンドプラグインのテンプレートがあります

READMEに最新のドキュメントがあります。