Deno 在线编译器

关于 Deno 在线编译器

刚接触 TypeScript 时，想随手试下类型标注、处理个数组，或者验证一段异步逻辑？如果非得先去下载 Deno、配置编辑器、建个本地文件，确实有点折腾。对于这种 “代码没两行，就想看个结果” 的情况，在线环境显然更香。

咱们绿叶网的 Deno 在线编译器就是为你量身定做的。打开网页直接写，一键运行看结果。因为 Deno 天生就能直接执行 JavaScript 和 TypeScript，拿来做小段代码练习再合适不过了。

Deno 在线编译器怎么用？

页面上方就是咱们的 Deno 在线编译器：左边写代码，右边看结果。操作起来非常直观，轻松就能上手。

• 编写代码：在编辑区输入或粘贴需要测试的 JavaScript / TypeScript 代码。
• 运行代码：点击 “运行” 按钮，或者直接使用 Ctrl + Enter 快捷键。
• 查看结果：程序运行后，在结果区域查看 console.log() 等代码产生的输出。
• 继续修改：如果语法或逻辑有问题，直接调整代码后再次运行即可。

我们来跑个简单例子：用 TypeScript 定义一组成绩，挑出 80 分及以上的同学，并算一下平均分。这个例子不需要任何第三方库，很适合第一次体验 Deno 直接跑 TS 的丝滑感。

interface Student {
    name: string;
    score: number;
}

const students: Student[] = [
    { name: "小林", score: 88 },
    { name: "小周", score: 72 },
    { name: "小陈", score: 93 },
    { name: "小吴", score: 81 },
];

const passed = students
    .filter((student) => student.score >= 80)
    .map((student) => student.name);

const average = students.reduce((sum, student) => sum + student.score, 0)
    / students.length;

console.log(`80 分及以上：${passed.join("、")}`);
console.log(`平均分：${average}`);

运行结果如下。

80 分及以上：小林、小陈、小吴
平均分：83.5

像上面这种小代码，最适合使用在线编译器来验证。写完直接运行，不需要专门去建个本地项目。

Deno 在线编译器适合哪些场景？

Deno 在线编译器更适合小段代码、语法练习和快速验证。它的价值主要在于省去本地环境配置，让你先把代码跑起来。常见场景包括：

• JavaScript / TypeScript 入门练习：学习变量、数组、对象、函数、接口、泛型等基础语法时，可以写一点跑一点。
• 快速验证 TypeScript 代码：临时测试类型标注、可选属性、联合类型或一小段数据处理逻辑，不必先搭建完整项目。
• 异步逻辑测试：Promise、async / await、定时器等不依赖外部环境的异步代码，很适合用小例子快速验证。
• Web API 练习：Deno 重视 Web 标准，URL、TextEncoder、crypto 等不少 Web API 可以直接使用，适合对照浏览器环境理解代码。
• 课堂教学与演示：老师介绍 JavaScript、TypeScript 或不同运行时之间的差异时，学生打开网页就能跟着运行代码。

Deno 是什么？

简单来说，Deno 是一个用来运行 JavaScript 和 TypeScript 的环境。它并不是一门新语言，而是 Node.js 作者 Ryan Dahl 总结了当年设计 Node.js 时的遗憾后，重新打造的一代运行时。

它底层同样基于 V8 引擎，但大量使用了 Rust 语言来编写。相比早期的 Node.js，Deno 最大的卖点就是：默认更安全、原生支持 TypeScript，并且 “自带了一大堆好用的工具”。

如果你以前听说过 “Deno 不能用 npm，只能靠网址导入包”，这个旧观念现在可以抛弃了。进入 Deno 2 时代后，它已经非常务实地全面拥抱了 Node.js 生态和 npm。

Deno 主要用在哪些地方？

Deno 能干的活，很大程度上和 Node.js 是重合的，但它在以下场景会让人觉得更顺手：

• 写 TypeScript 项目：不用再折腾 ts-node 或配置一堆编译工具，直接建个 .ts 文件就能跑。
• 后端与 API 开发：标准库自带好用的 HTTP 网络能力，写后端服务或 REST API 非常方便。
• 自动化脚本：写一些处理数据、整理文件的脚本，配合它的权限控制，用起来很安心。
• 命令行工具：它可以把你写的脚本，直接编译打包成一个独立的可执行文件（CLI 工具），发给别人直接就能用。
• 跑现有的 Node.js 项目：因为 Deno 2 兼容性大增，很多现成的 npm 项目也能直接拿过来运行或逐步迁移。

Deno 和 Node.js 有什么关系？

它们就像同父异母的兄弟，核心都是 V8 引擎，基础的 JavaScript 语法写起来完全一样。区别主要在于设计理念和配套工具。

Deno 刚诞生时显得有点 “叛逆”，故意和 Node.js 划清界限。但现在的 Deno 2 变得非常亲民，它提供了 Node API 兼容层，也能无缝读取 package.json，很多老项目改动很小就能跑起来。

不过要注意，兼容并不等于 “一模一样”。一些偏底层的 Node 模块或比较老的依赖包，在 Deno 里可能还是会有摩擦。迁移项目时，记得先跑跑测试，不能指望所有包都自动亮绿灯。

Deno 为什么可以直接运行 TypeScript？

这是新手觉得最香的一点。以前写 TypeScript，通常得先把它编译成 JavaScript 才能运行。但在 Deno 里，敲完代码直接 deno run 就能跑。

这里有个很讨巧的细节：Deno 默认只是把代码里的 “类型注解” 快速抹掉，然后当成普通的 JS 扔给引擎去跑，并不会因为你写错了一个类型，就死活不让程序运行。

如果你想严谨地做类型检查，可以使用 deno check 命令，或者在运行时加上 --check 参数。它把 “运行代码” 和 “检查类型” 拆成了两件事，让日常的开发修改更轻快。

Deno 现在还能用 npm 和 package.json 吗？

完全可以！这是现在学习 Deno 必须更新的知识点。

Deno 2 已经把兼容 Node.js 和 npm 当成了核心发力点。它不仅能愉快地读取 package.json、安装 npm 依赖，也支持大量的 Node 内置模块。在代码写法上，它虽然主推现代的 import / export，但也向下兼容了旧的 CommonJS 规范。

所以，不要再以为 Deno 只能靠写长长的 URL 网址来引入第三方包了，它现在已经非常主动地融入了主流的前端生态。

Deno 的权限控制有什么特别？

Deno 默认是一个 “铁公鸡”，非常注重安全。

随便拿来一段脚本，它默认是没有权限读写你的硬盘、访问网络或者读取环境变量的。如果你需要这些功能，必须在运行命令时主动给它 “发通行证”：

• --allow-read：允许读取文件。
• --allow-write：允许修改或写入文件。
• --allow-net：允许连接网络。
• --allow-env：允许读取环境变量。
• --allow-run：允许运行其他的外部命令。

这种 “默认拒绝” 的设计，让你在跑网上来源不明的代码时，心里会踏实很多。

Deno 为什么常被说成 “自带工具箱”？

在以前的前端项目里，想统一代码风格，你得装 Prettier；想做代码检查，得装 ESLint；想写测试，得装 Jest。光是配置这些工具，往往就能折腾大半天。

Deno 的思路是：我全给你内置了。

• deno fmt：一键自动格式化代码。
• deno lint：帮你找出代码里不规范的地方。
• deno test：直接运行测试用例。
• deno task：像 npm run 一样执行自定义的快捷命令。
• deno check：做严格的类型检查。

对于初学的小伙伴来说，这就省去了配环境的痛苦，“先用官方自带的，不够用了再去折腾第三方”，上手体验极其友好。

常用快捷键

代码写得多了以后，鼠标点来点去多少有点慢。Deno 在线编译器支持下面这些常用快捷键，小伙伴们先把几个高频的记住就够用了。

• Ctrl + Enter：运行代码。
• Ctrl + Z：撤销、Ctrl + Y：重做。
• Ctrl + C：复制、Ctrl + V：粘贴。
• Ctrl + A：全选。
• Ctrl + X：剪切。
• Ctrl + /：注释或取消注释。
• Ctrl + Home：跳转到首行的行首。
• Ctrl + End：跳转到末行的结尾。

其中最值得记住的还是 Ctrl + Enter。刚修改完一个 TypeScript 类型、数组筛选条件或者 async / await 逻辑，顺手运行一次，很快就能知道代码是否符合预期。