tsplayground 全方位解析

开发者们常常需要在代码编辑器中尝试新功能、解决错误。TypeScript Playground就是一个通过组合TypeScript语言和Web的编程环境，能够让开发人员在编辑器 GUI 无法捕获错误前就能快速发现错误的在线编译器。

一、运行环境

tsplayground的运行环境是一个Web应用程序，因此它可以在任何浏览器中运行。它是使用 TypeScript 和 Vue.js 编写的，使用了 Ace 编辑器用于在代码段上实现高亮、自动缩进、智能感知等编辑器功能。Vue.js 用于构建整个应用程序并通过 TypeScript 编写了所有 vue 组件。Ace 编辑器以及 Vue.js 的在线文档都是完全开源的。

在运行时，当你在tsplayground中编写 TypeScript 代码时，编辑器将使用 TypeScript 编译器将编写的代码编译成 JavaScript 代码，并将结果显示在另一个面板中。同时，在这个过程中，TypeScript Playground 会将编写的代码转化为一个 JavaScript 函数，写入 URL 进行快速分享。

以下是TypeScript Playground的主要代码实现：

import { Component, Vue } from "vue-property-decorator";
import { AceEditor } from "@/components/ace-editor/AceEditor.vue";

@Component({
  components: {
    AceEditor
  }
})
export default class App extends Vue {
  title: string = "TypeScript Playground";
  code: string = "console.log('Hello TypeScript!')";
  compiled: string = "";
  compile() {
    // 编译 TypeScript 代码
    ...
  }
}

二、主要工具

tsplayground有三个主要的工具，分别是 Editor、Preview、Output。它们能够使开发人员编写 TypeScript 代码、查看编译结果以及实时运行代码。在编辑器面板中，通过 Ace 编辑器，能够实现代码智能感知、自动完成和语法高亮等编辑器功能，从而支持对 TypeScript 代码进行快速编写。同时还提供快捷键编辑操作，如 Ctrl+Enter 用于快速编译代码。

其中预览和输出功能分别对应了 TypeScript Playground 页面的另外两个面板，并且同时显示在面板中，方便开发人员对运行结果进行直接观察：

                                                        
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/192370.html