你的玩具，我們的沙盒

全新的 TypeScript Playground 允許人們接入 Playground，並以 TypeScript 團隊意想不到的方式對其進行擴充套件。

Playground 的側邊欄使用了與外部外掛相同的基礎設施，因此你擁有與 Playground 相同的訪問級別來構建有趣的專案。

Playground 外掛透過 DOM API 和一套豐富的“設計系統”構建，不過，你也可以自由地在執行時使用 React 或 Svelte 等框架。

上手非常簡單，我們提供了一個外掛模板，並且 Playground 擁有開發模式，可以直接連線到你的本地伺服器，因此你無需執行一份完整的 TypeScript 網站程式碼即可擁有一個正常工作的開發環境。

我們有一個示例外掛程式碼倉庫 microsoft/TypeScript-Playground-Samples，此外還有許多現有的開源外掛可以參考：演示模式 (Presentation Mode)、回形針 (Clippy)、TSQuery、協作 (Collaborate) 以及 Transformer，這些外掛預設可用，供你研究和理解。

如果你在開發外掛時遇到問題，請在 TypeScript 社群 Discord 中提問。當外掛完善後，將其釋出到 npm 登錄檔，它就會出現在外掛側邊欄中。

快速教程

你需要大約 5 分鐘時間、安裝好 Node.js、yarn 以及 Firefox/Edge 或 Chrome 瀏覽器。

第一步：使用模板進行引導：yarn create typescript-playground-plugin playground-my-plugin

第二步：在新倉庫中執行 yarn start，以啟動本地開發伺服器

第三步：在瀏覽器中開啟 Playground，點選“Options”（選項），並啟用 "Connect to localhost:5000/index.js"

第四步：重新整理頁面，即可看到新選項卡。你的外掛已經執行起來了。

以上就是所有協同工作的環節，現在你可以修改模板並構建你的外掛了。處於開發模式的外掛在連線時會自動處於最前，因此你無需頻繁點選即可重新載入。要了解模板的技術細節，請閱讀 CONTRIBUTING.md。

社群還提供了一些 Playground 外掛模板，可以幫助你使用流行的檢視庫來引導你的外掛：

它們各自的 README 中都有最新的文件。