在线学习实践 TypeScript 的官方Playground（演练场）使用介绍

本文可以看作是下面两文的续篇：

TypeScript学习与实践（上）https://blog.csdn.net/cnds123/article/details/164074853

TypeScript学习与实践（下）https://blog.csdn.net/cnds123/article/details/164074899

Playground（演练场）简介

Playground（ 演练场）官网：

https://www.typescriptlang.org/play/

可以切换为中文：

https://www.typescriptlang.org/zh/play/

TypeScript Playground## 它是TypeScript 官方提供的"在线编辑器"：不用安装配置任何环境（即不用你安装 Node + TS，tsc 编译、node 运行），浏览器打开就能写 TS 代码、实时看编译结果、实时看类型错误、直接运行。最适合你这种刚入门、想随手试语法的情况。

首次打开会显示 `Downloading TypeScript...`（下载编译器），等几秒就进入编辑器。如果有 Cookie 提示点 "Accept"(同意)或"Reject"(拒绝)，点Accept 或 Reject 无所谓几乎一样，功能和体验一点不受影响。Reject（拒绝）时网站的访问统计里不会有你（对用户来说其实反而是好事，更隐私友好）。

打开后，界面布局：

核心理解：左边写 TS，右边 5 个标签页看结果，全程实时自动更新，不需要你编译。

右边 5 个标签页简介：

JS ：编译后的 JS

DTS：类型定义

错误（ Errors）：类型错误

日志（ Logs）：运行输出

插件（Plugins ）：给 Playground 额外装的小工具，用来扩展它自带的功能。

顶部按钮说明：

版本下拉框：切换 TS 版本

导出（Export）：导出代码 / 配置保存到本地

Share：生成分享链接把代码发给别人一起看

配置（TS Config）：打开 tsconfig 配置调严格模式等编译选项

示例（Examples）：官方预置示例集，演示学习各种 TS 特性

Help：帮助文档

Playground（演练场）使用操作

第 1 步：在左侧输入 TS 代码

点一下左侧空白编辑区，直接输入（比如）：

javascript 复制代码

interface Person {
  name: string;
  age: number;
}

const me: Person = { name: "张三", age: 25 };
console.log("你好，" + me.name);

第 2 步：看编译后的 JS（JS 标签页）

右侧 JS标签页会实时显示编译成的 JavaScript------ 你会看到 `interface` 消失了，只留下类型被擦除的纯 JS。这就是 "TS 编译成 JS" 的直观演示。

"use strict";
const me = { name: "张三", age: 25 };
console.log("你好，" + me.name);

第 3 步：故意写错，看类型检查（Errors 标签页）

const var_wrong: number = "这不是数字"; // 演示类型错误！

你会看到：

左侧这行代码出现**红色波浪线**
右侧 **Errors** 标签出现**红色数字角标**（1）
点开 Errors，显示具体错误：`Type 'string' is not assignable to type 'number'.`

这就是 TS 的核心价值：写代码的同时就抓错误，根本不用运行。

第 4 步：运行看输出

点顶部的 "Run"按钮，右侧自动切到"Logs" 标签页，显示运行结果：

你好，张三

OK！

在线学习实践 TypeScript 的官方Playground（演练场）使用介绍