TypeScript 在线编译器

输出结果

在线编译器

支持所有主流语言，在线就可以编程

关于 TypeScript 在线编译器

很多时候，我们只想临时写几行 TypeScript 练练手，比如测一下 interface 该怎么定义。如果为了这几行代码，还要兴师动众地去安装 Node.js、搞一堆项目配置，那也太折腾人了。

这时候，直接用咱们绿叶网的 TypeScript 在线编译器就方便多了。打开浏览器就能写代码，点击运行就可以看结果，主打一个简单快捷。

TypeScript 在线编译器怎么用？

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

编写代码：在编辑区，输入或粘贴 TypeScript 代码。
运行代码：点击 “运行” 按钮，或者直接使用 Ctrl + Enter 快捷键。
查看结果：程序运行后，在右侧查看 console.log() 等代码输出的结果。
继续修改：如果代码出现语法错误或者结果不符合预期，直接修改后再次运行即可。

比如，我们可以定义一个 Student 接口，再让数组中的每个对象都遵循同样的数据结构：

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

const students: Student[] = [
    { name: "小绿", score: 92 },
    { name: "小叶", score: 76 },
    { name: "小芽", score: 88 },
];

const excellentStudents = students.filter(student => student.score >= 80);

excellentStudents.forEach(student => {
    console.log(`${student.name}：${student.score} 分`);
});

运行结果如下。

小绿：92 分
小芽：88 分

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

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

简单来说，TypeScript 在线编译器最适合拿来 “试水” 和快速验证。特别是刚接触 TypeScript 时，各种 “类型” 概念光看理论容易头晕。我们直接在网页里敲几行代码跑一下，立马就能豁然开朗。

其中，它非常适合用于以下场景：

新手入门练手：刚开始学怎么给变量标注类型，或者搞不懂 interface（接口）怎么用？在网页里写一行测一行，边学边练最直观。
验证类型写法：有时候拿不准某个函数参数、或者复杂对象的类型该怎么写，打开网页试着敲几段，编译器马上就能提示你写得对不对。
JS 升级体验：如果你已经会点 JavaScript，可以把平时写的 JavaScript 代码贴进来，试着给它们加上类型，直观感受一下 TypeScript 带来的安全感。
教学与演示：老师上课讲基础概念，或者你想给别人演示某个类型怎么用时，用在线环境能免去配置环境的烦恼，让人把注意力都集中在代码上。

TypeScript在线编译器的四个适用场景：入门练手、验证类型、JS升级与教学演示

TypeScript 是什么？

TypeScript，简称 “TS”，它是微软开发并开源的一门编程语言。TypeScript 是 JavaScript 的一个 “超集”。也就是说，任何合法的 JavaScript 代码，天然就是合法的 TypeScript 代码。TypeScript 只是在 JavaScript 的基础上，加了一层 “类型检查” 的外衣而已。

图解TypeScript的概念，展示它是JavaScript的超集并增加了类型检查功能

写过 JavaScript 的小伙伴都知道，JavaScript 是非常 “奔放” 的。一个变量刚才还是数字，下一秒变成字符串也没人管。这种自由在写小段代码时很爽，可一旦项目变大，就容易让人抓狂——你常常搞不清一个变量或者函数参数到底该传什么格式进去。

TypeScript 的核心工作就是增加类型检查。它要求你提前约定好变量是什么 “类型”（比如必须是数字，或者必须包含某些特定字段的对象）。一旦你写错了，代码还没运行，编辑器就会画上红线提醒你。

TypeScript 主要用在哪些地方？

TypeScript 最常见的舞台还是 Web 开发，尤其适合代码量较大、多人协作或者需要长期维护的项目。比较常见的方向有：

Web 前端开发：可以和 Vue、React、Angular 等前端框架配合，为组件、数据和函数增加更明确的类型约束。
Node.js 后端开发：TypeScript 也可以用于 Node.js 项目，让服务端代码同样获得类型检查和更完整的开发工具支持。
全栈项目：前端和后端都使用 TypeScript 时，一些数据结构和类型定义可以更容易保持一致。
工具与库开发：很多 JavaScript 生态中的工具、组件库和 SDK 也会使用 TypeScript 来提升代码可维护性，并提供更好的类型提示。

TypeScript的主要应用领域：Web前端开发、Node.js后端开发、全栈项目以及工具与库开发

所以，TypeScript 的优势并不是 “语法看起来更高级”，而是在项目逐渐变复杂以后，类型信息能够帮助我们更清楚地知道一段代码需要什么、返回什么，以及哪里可能写错。

TypeScript 和 JavaScript 有什么区别？

这两个名字经常一起出现，而且 TypeScript 本来就是建立在 JavaScript 基础上的，所以新手很容易问：“学了 TypeScript，是不是就不用学 JavaScript 了？” 答案当然不是。

JavaScript：Web 开发的基石，无论浏览器还是运行环境（如 Node.js）都能直接执行它。
TypeScript：JavaScript 的 “增强版”。它主要增加了一套静态类型系统，能在代码运行前帮你揪出错误。

我们可以这样去理解：JavaScript 是一块已经打好的地基，你可以随便在上面盖房子；而 TypeScript 则是给这块地基加了一套严格的 “施工规范”。因此，学好 JavaScript 是学习 TypeScript 的前提。

对比JavaScript与TypeScript的区别，解释TypeScript作为增强版带来的静态类型检查与安全可靠性

TypeScript 为什么要先编译成 JavaScript？

简单来说，是因为：浏览器只认识 JavaScript，不认识 TypeScript。

TypeScript 里面写了很多特有的 “类型标记”（比如 string、interface），如果直接把这些代码直接扔给浏览器，浏览器会完全看不懂。所以，我们必须先使用编译器，把 TypeScript “翻译（编译）” 成纯正的 JavaScript，代码才能在浏览器中跑起来。

那既然最后还是要变成 JavaScript，为什么非要多此一举先写 TypeScript 呢？这主要是为了在 “翻译” 的过程中帮我们做一件事：

提前排雷（类型检查）：编译器在翻译时，会像个严格的老师一样检查代码。比如一个函数规定要传数字（number），你却传了字符串（string），那么它在开发阶段就会立刻报错拦住你，而不是等程序上线后才突然报错。

此外需要清楚的是：当代码被翻译成 JavaScript 后，那些用来做检查的 TypeScript 类型代码就全被剔除掉了。

TypeScript代码经过编译器转换为浏览器可识别的JavaScript代码的流程图解

常用快捷键

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

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

其中最值得记住的还是 Ctrl + Enter。写完代码顺手一按就能运行，用来反复测试类型和小段逻辑非常方便。