TypeScript Playground 快速入门：你的在线 TS 探索乐园

你好！准备踏上 TypeScript 的奇妙旅程了吗？无论你是 TypeScript 新手，还是有一定经验但想快速验证某个语法或配置，TypeScript Playground 都是一个不可多得的利器。它是一个在线的 TypeScript 编辑器和编译器，让你无需安装任何本地环境，就能实时书写、编译、运行（ সীমিত，仅限编译结果的查看）TypeScript 代码，并直观地看到编译后的 JavaScript 输出。

这篇教程旨在帮助你快速掌握 TS Playground 的核心功能，让你能自信地利用它进行学习、实验和分享。我们将从界面的基本布局讲起，深入探讨编译选项、错误诊断、以及一些实用的小技巧。读完这篇教程，你将能够充分利用 Playground 的强大功能，让你的 TypeScript 学习之路更加顺畅高效。

1. 初识 TS Playground：界面导览

打开你的浏览器，输入 https://www.typescriptlang.org/play 或直接搜索 “TypeScript Playground”，你就会看到 Playground 的主界面。初看之下，界面可能有些信息量，但它的布局非常直观，主要分为以下几个核心区域：

1.1 编辑器区域 (Editor Panel)

这是界面左侧最大的区域，是你书写 TypeScript 代码的地方。它是一个功能丰富的在线代码编辑器，支持语法高亮、代码补全、错误提示（红色波浪线）等特性，体验媲美本地 IDE。

当你输入 TypeScript 代码时，这个区域会实时检查语法和类型错误，并在代码下方或旁边显示错误信息。

1.2 输出区域 (Output Panel)

界面右侧的区域是输出区域，它默认展示的是你的 TypeScript 代码编译后的 JavaScript 代码。这个区域有多个 Tab 页，默认显示的是：

JS (JavaScript Output): 展示你的 TypeScript 代码经过编译后生成的 JavaScript 代码。这是 Playground 最重要的功能之一，让你能直接看到 TS 是如何被“翻译”成 JS 的。通过对比 TS 和 JS 代码，你可以更好地理解 TypeScript 的编译过程以及它为 JS 带来的额外特性（如类型检查在编译时移除）。
Errors (Diagnostics): 显示编译过程中发现的类型错误、语法错误等诊断信息。这里会列出错误的位置、错误码和详细描述。当你点击列表中的错误时，编辑器区域会自动跳转到对应的代码行。
Logs: 通常用于显示 Playground 内部的一些日志信息，对于普通用户来说使用较少，除非你在开发 Playground 插件或者需要调试 Playground 本身的问题。
DTS (Declaration File): 显示你的 TypeScript 代码生成的类型声明文件（.d.ts）。这对于理解如何为 JavaScript 库编写类型定义或查看自己代码的类型输出非常有用。

1.3 配置区域 (Options Panel)

界面底部通常是配置区域，这里包含了控制 TypeScript 编译行为的各种选项。你可以通过勾选、下拉菜单或输入框来调整这些选项。这些选项是 TypeScript 编译器的重要组成部分，它们决定了编译的目标 JavaScript 版本、严格程度、模块系统等。

Compiler Options: 这是最主要的 Tab，列出了大量的编译器选项（Compiler Options）。这是 Playground 的核心功能之一，我们将在后续章节详细介绍一些重要的选项。
Plugins: 允许你启用或禁用 Playground 的扩展插件，这些插件可以提供额外的功能，比如可视化 AST（抽象语法树）或类型结构。
Examples: 提供了一些官方预设的 TypeScript 代码示例，涵盖了各种语言特性和使用场景。这是学习 TypeScript 特性的绝佳资源。
What’s New: 介绍最新 TypeScript 版本中新增的特性。

通过鼠标拖动，你可以调整这三个主区域的大小，以适应你的浏览习惯或代码长度。

2. 快速上手：编写与编译你的第一个 TS 代码

现在，让我们来写点简单的 TypeScript 代码，看看 Playground 是如何工作的。

清空编辑器： 如果编辑器区域有默认代码，你可以全部删除。
输入 TS 代码： 在编辑器区域输入以下代码：

“`typescript
function greet(person: string) {
return “Hello, ” + person + “!”;
}

let user = “TypeScript Enthusiast”;
console.log(greet(user));

// 故意引入一个类型错误
// greet(123);
“`
观察 JS 输出： 默认情况下，当你输入代码时，Playground 会实时编译。切换到输出区域的 “JS” Tab。你会看到类似这样的 JavaScript 代码：

javascript function greet(person) { return "Hello, " + person + "!"; } let user = "TypeScript Enthusiast"; console.log(greet(user)); // 故意引入一个类型错误 // greet(123);

解释：
* 你会注意到，在编译后的 JavaScript 代码中，person: string 这个类型注解消失了。这是 TypeScript 的核心特点之一：类型信息主要用于编译时的检查，编译后会被擦除（Type Erasure），生成的 JavaScript 代码是纯净的，不包含类型信息。
* let 关键字被保留，这是因为 Playground 默认或常用的 target 编译选项是比较新的 ECMAScript 版本（如 ES2015 或更高）。如果你将 target 设置为更老的版本（如 ES5），let 可能会被编译成 var。
观察错误： 现在，让我们取消注释 // greet(123); 这一行，使其生效：

“`typescript
function greet(person: string) {
return “Hello, ” + person + “!”;
}

let user = “TypeScript Enthusiast”;
console.log(greet(user));

// 故意引入一个类型错误
greet(123); // 取消注释
“`

你会立即看到编辑器区域的 greet(123) 下方出现红色波浪线。同时，切换到输出区域的 “Errors” Tab，你会看到一个错误信息：

Argument of type 'number' is not assignable to parameter of type 'string'. (parameter) person: string

解释：
* 这个错误清楚地告诉你：你尝试将一个 number 类型的值 123 赋值给一个期望 string 类型参数的 person。
* 这就是 TypeScript 的类型检查在发挥作用！它在编译阶段就帮你发现了潜在的运行时错误。
* 要消除这个错误，你需要修改代码，比如传入一个字符串：greet("Alice"); 或者删除错误的那一行代码。

通过这个简单的例子，你已经体验了在 Playground 中编写 TypeScript 代码、实时查看编译结果和诊断错误的基本流程。

3. 深入核心：理解编译选项 (Compiler Options)

编译选项是 TS Playground 最强大也是最复杂的部分。它们是 TypeScript 编译器 (tsc) 的配置项，决定了 TypeScript 代码如何被编译。熟悉常用的编译选项对于理解 TypeScript 的行为至关重要。

在 Playground 的底部区域，切换到 “Options” Tab。你会看到一个很长的列表，包含了几十个甚至上百个选项。别担心，你不需要一次性掌握所有选项。我们将重点介绍一些最常用和最重要的选项。

3.1 目标版本 (Target)

target 选项决定了编译后生成的 JavaScript 代码遵循哪个 ECMAScript 标准。不同的标准支持不同的语言特性（如 class, arrow function, async/await, let/const 等）。TypeScript 会将你使用的较新的 TS/JS 特性“降级”（downlevel）编译到你指定的 target 版本所支持的语法。

常见值： ES3, ES5, ES2015 (ES6), ES2016, ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext (最新的标准)。
作用： 控制代码的兼容性。如果你的代码需要在较老的 JavaScript 环境中运行（如旧版浏览器），你需要选择较低的 target。如果你的环境支持较新的标准（如现代浏览器、较新版本的 Node.js），可以选择较高的 target，生成的代码会更接近你的源代码，通常也更简洁高效。
实践： 尝试将 target 从 ESNext 改为 ES5，观察你的 JS 输出有何变化。例如，箭头函数 => 在 ES5 中会被编译成普通函数 function。

typescript // TS 代码 (不受 target 影响) const add = (a: number, b: number): number => a + b;

javascript // JS 输出 (target: ESNext) const add = (a, b) => a + b;

javascript // JS 输出 (target: ES5) var add = function (a, b) { return a + b; };

3.2 模块系统 (Module)

module 选项决定了 TypeScript 代码中使用的模块语法（如 import/export）应该被编译成哪种 JavaScript 模块系统。

常见值： None, CommonJS, AMD, System, UMD, ES2015, ESNext, Node16, NodeNext。
作用： 与代码运行的环境有关。
- Node.js 环境通常使用 CommonJS（require/module.exports）。
- 现代浏览器和打包工具（如 Webpack, Rollup, Parcel）通常使用 ES Modules (import/export)，对应 ES2015 或 ESNext。
- UMD 是一种通用模式，试图兼容 CommonJS、AMD 和全局变量。
实践： 尝试编写带有 import/export 的代码，并切换 module 选项观察 JS 输出。例如：

“`typescript
// a.ts
export const value = 10;

// main.ts (假设在编辑器中写这个)
import { value } from “./a”; // Playground 默认在一个文件中处理，这里的路径是概念性的
console.log(value);
“`

在 Playground 中，通常你只在一个编辑器窗口编写代码。当涉及到模块时，Playground 会模拟模块编译。比如，如果你写了 export，选择 CommonJS 会生成 exports.value = 10;，选择 ESNext 则保留 export const value = 10;。

3.3 严格模式 (Strictness)

Playground 提供了许多选项来控制 TypeScript 类型检查的严格程度。启用严格模式可以帮助你捕获更多潜在的错误，编写更健壮的代码。推荐在新项目中启用所有严格检查。

strict: 这是一个总开关，启用它会同时启用所有推荐的严格模式选项。在 Playground 中，你会发现勾选 strict 会自动勾选下面一大堆相关的选项。这是最推荐的设置。
noImplicitAny: 防止隐式的 any 类型。如果 TypeScript 无法推断出变量、函数参数等的类型，并且你没有明确指定类型，那么默认情况下它会推断为 any。启用此选项后，这种情况将报错。
- 示例：
  “`typescript
  // noImplicitAny: false (默认或未勾选 strict)
  function processData(data) { // data 是 any 类型，不报错
  console.log(data.toFixed(2)); // 运行时可能出错
  }
  processData(“abc”); // 运行时会出错，但编译时没警告
  
  // noImplicitAny: true (勾选 strict)
  function processData(data) { // 报错：Parameter ‘data’ implicitly has an ‘any’ type.
  console.log(data.toFixed(2));
  }
  // 修正：
  function processData(data: number) { // 明确指定类型
  console.log(data.toFixed(2));
  }
  processData(123.456); // OK
  processData(“abc”); // 报错：Argument of type ‘string’ is not assignable to parameter of type ‘number’.
  * **`strictNullChecks`:** 启用严格的空值检查。这意味着 `null` 和 `undefined` 将不再属于其他类型（如 `string`, `number` 等），除非你明确使用联合类型（如 `string | null`）。这能有效防止很多空指针或未定义错误。 * **示例：**typescript
  // strictNullChecks: false
  let name: string = null; // 不报错！潜在问题
  
  // strictNullChecks: true (勾选 strict)
  let name: string = null; // 报错：Type ‘null’ is not assignable to type ‘string’.
  // 修正：
  let name: string | null = null; // OK
  使用时需要进行空值检查：typescript
  function greet(name: string | null) {
  if (name === null) {
  console.log(“Hello, Guest!”);
  } else {
  console.log(“Hello, ” + name); // name 在这里被窄化为 string 类型
  }
  }
  greet(“Alice”);
  greet(null);
  `` * **strictFunctionTypes:** 严格检查函数参数的类型。 * **strictBindCallApply:** 严格检查bind,call,apply方法的使用。 * **strictPropertyInitialization:** 确保类实例属性在构造函数中被初始化。 * **noImplicitReturns:** 防止函数存在隐式的undefined返回（即有些分支没有明确return）。 * **noUncheckedIndexedAccess:** 在通过索引访问数组或对象时，如果元素可能不存在，会包含undefined` 类型。

3.4 其他重要选项

esModuleInterop: 启用从 CommonJS/AMD 模块导入 ES Module 的语法兼容性。这在使用一些 Node.js 库时非常有用，允许你使用 import * as React from 'react' 这样的语法来导入 CommonJS 模块。
jsx: 控制 JSX 语法如何被处理。如果你在使用 React 或类似的库，你需要根据你的项目配置选择合适的选项（如 React, React Preserve, React Native）。
skipLibCheck: 跳过检查声明文件的类型。这可以加快编译速度，但在某些情况下可能会隐藏库中的类型问题。
forceConsistentCasingInFileNames: 强制文件名大小写一致。这有助于避免在不区分大小写的文件系统（如 Windows 或 macOS 默认设置）上开发时，部署到区分大小写的文件系统（如 Linux）时出现问题。
allowJs: 允许编译器处理 .js 文件。
checkJs: 在允许处理 .js 文件时，对 .js 文件也进行类型检查（使用 JSDoc 注释）。

3.5 实践与探索编译选项

花时间在 Playground 中尝试修改不同的编译选项，观察它们如何影响 JS 输出和错误列表。这是理解 TypeScript 编译行为的最佳方式。例如：

将 target 设置为 ES5，然后写一个箭头函数和一个 async 函数，看看它们的 JS 输出。
启用 strictNullChecks，然后声明一个 string 类型变量但不初始化，看看是否报错。
启用 noImplicitAny，然后写一个没有类型注解的函数参数，看看是否报错。

通过反复实验，你将对这些选项的作用有更深刻的理解。

4. 高效利器：错误诊断与日志

Playground 的错误诊断功能是其核心价值之一。当你的代码有类型问题或语法错误时，Playground 会立即反馈。

编辑器内的波浪线： 最直观的提示是编辑器中代码下方的红色波浪线。将鼠标悬停在波浪线上，会显示详细的错误信息。
Errors Tab： 输出区域的 “Errors” Tab 提供了所有错误的汇总列表。每个条目包含错误码、描述和文件/行号。点击列表项可以直接跳转到代码位置。

如何利用错误信息学习和调试：

阅读错误信息： 错误信息通常会告诉你问题的类型（如 “Type ‘number’ is not assignable to type ‘string'”），涉及的代码元素（变量、函数参数等），以及出错的位置。
理解错误码： 每个错误都有一个 TS 开头的错误码（如 TS2345）。记住一些常见的错误码可以帮助你快速识别问题类型。
根据提示修改代码： 大多数错误信息都非常具有指导性。例如，“Argument of type ‘number’ is not assignable to parameter of type ‘string’” 明确告诉你，参数需要一个字符串，但你给了一个数字。
利用 Playground 实验： 如果你不确定如何修复某个错误，可以在 Playground 中尝试不同的代码修改，看看错误是否消失，或者是否出现了新的错误。

Logs Tab： 如前所述，Logs Tab 通常用于 Playground 自身的调试。对于日常使用，你基本不会用到它。如果你遇到 Playground 似乎不工作、加载慢等问题，查看 Logs 可能会提供一些线索。

5. 分享你的代码：让协作更轻松

TS Playground 提供了一个非常方便的代码分享功能。当你想向别人展示一段代码、报告一个 bug、或者就某个 TypeScript 问题向社区求助时，分享链接非常有用。

点击 Share 按钮： 在 Playground 界面的右上角，你会找到一个 “Share” 按钮（通常是一个分享图标）。
生成链接： 点击按钮后，Playground 会生成一个独特的 URL。这个 URL 不仅包含了你的 TypeScript 代码，还保存了你当前的所有编译选项配置！
复制并分享： 复制生成的 URL，然后粘贴到邮件、聊天窗口、GitHub Issue、Stack Overflow 问题中。

当其他人打开这个链接时，他们看到的 Playground 界面将和你分享时的完全一样，包括代码和所有的编译选项。这极大地简化了代码问题的沟通和复现。

6. 探索更多：Examples, Plugins, DTS

Playground 还有一些其他有用的区域和功能，值得你去探索：

6.1 Examples (示例)

在底部配置区域的 “Examples” Tab 中，你可以找到官方维护的许多 TypeScript 代码示例。这些示例涵盖了：

基本的类型：Primitives, Arrays, Tuples, Enums 等。
高级类型：Union, Intersection, Type Aliases, Interfaces, Generics 等。
类与接口：Classes, Interfaces。
模块与命名空间：Modules, Namespaces。
新的语言特性：如最新版本中添加的特性。

点击一个示例，Playground 会自动加载代码和相应的推荐配置。这是学习 TypeScript 语法和特性的绝佳起点。

6.2 Plugins (插件)

“Plugins” Tab 允许你启用或禁用 Playground 的插件。这些插件可以增强 Playground 的功能，例如：

AST Viewer (抽象语法树查看器): 可以可视化你的 TypeScript 代码解析后的 AST。这对于理解编译器如何“看懂”你的代码以及学习编译原理很有帮助。
Type Visualizer (类型可视化器): 可以帮助你理解复杂类型的结构，特别是涉及到泛型、条件类型等高级特性时。
其他插件可能会提供代码格式化、ESLint 集成等功能。

启用插件后，通常会在输出区域或新的侧边栏出现对应的面板。尝试启用一些插件，看看它们能为你提供什么额外信息。

6.3 DTS (Declaration File – 声明文件)

输出区域的 “DTS” Tab 会显示你的 TypeScript 代码对应的类型声明文件（.d.ts）。声明文件只包含类型信息，没有具体的实现代码。它们是 TypeScript 生态系统中非常重要的一部分，用于为现有的 JavaScript 库提供类型定义，让 TypeScript 项目能够使用这些库并获得类型检查和智能提示。

查看你的代码生成的 .d.ts 文件可以帮助你理解类型是如何被导出的，以及你的代码对外暴露了哪些类型信息。

7. 实践技巧与进阶用法

掌握了基本功能后，这里有一些使用 Playground 的实践技巧：

快速验证语法： 不确定某个 TypeScript 语法如何写或如何工作？在 Playground 中快速输入代码并查看编译结果和错误。
理解编译细节： 通过改变 target 和 module 等选项，仔细观察 JS 输出的变化，深入理解 TypeScript 的编译过程。
重现和报告 Bug： 如果你在使用 TypeScript 时遇到了编译器 Bug 或类型推断问题，通常会被要求在 Playground 中创建一个最小化的重现示例，然后分享链接。
学习新的语言特性： 当 TypeScript 发布新版本时，官方通常会在 Playground 的 “What’s New” 和 Examples 中提供新特性的示例。
在线面试或技术交流： Playground 可以作为一个临时的在线编码环境，用于技术面试或与同事/朋友交流代码问题。
结合 JSDoc 学习 checkJs： 如果你在写纯 JavaScript 代码并想逐步引入类型检查，可以在 Playground 中启用 allowJs 和 checkJs，然后使用 JSDoc 注释为你的 JS 代码添加类型信息，看看 TypeScript 如何进行检查。

8. 总结

TS Playground 是一个强大、便捷且无需安装的 TypeScript 学习和实验平台。通过本教程的介绍，你应该已经掌握了以下核心功能：

熟悉 Playground 的界面布局（Editor, Output, Options）。
了解如何编写 TypeScript 代码并实时查看编译后的 JavaScript 输出。
掌握了如何查看和利用错误信息进行调试。
理解了 target, module, strict 等重要的编译选项及其作用。
学会了如何使用 Share 功能方便地分享你的代码和配置。
了解了 Examples, Plugins 和 DTS 等附加功能。

Playground 的价值在于它的即时性和可视化。它让你能够快速迭代、尝试不同的代码和配置，并立即看到结果。将 Playground 融入你的日常 TypeScript 学习和工作流程中，它无疑会成为你的得力助手。

现在，就打开 TS Playground，开始你的探索之旅吧！通过不断的实践和实验，你会越来越精通 TypeScript，并能更高效地构建健壮、可维护的应用程序。祝你学习愉快！

TS Playground 快速入门教程 – wiki基地

TypeScript Playground 快速入门：你的在线 TS 探索乐园

1. 初识 TS Playground：界面导览

1.1 编辑器区域 (Editor Panel)

1.2 输出区域 (Output Panel)

1.3 配置区域 (Options Panel)

2. 快速上手：编写与编译你的第一个 TS 代码

3. 深入核心：理解编译选项 (Compiler Options)

3.1 目标版本 (Target)

3.2 模块系统 (Module)

3.3 严格模式 (Strictness)

3.4 其他重要选项

3.5 实践与探索编译选项

4. 高效利器：错误诊断与日志

5. 分享你的代码：让协作更轻松

6. 探索更多：Examples, Plugins, DTS

6.1 Examples (示例)

6.2 Plugins (插件)

6.3 DTS (Declaration File – 声明文件)

7. 实践技巧与进阶用法

8. 总结

发表评论取消回复

TypeScript Playground 快速入门：你的在线 TS 探索乐园

1. 初识 TS Playground：界面导览

1.1 编辑器区域 (Editor Panel)

1.2 输出区域 (Output Panel)

1.3 配置区域 (Options Panel)

2. 快速上手：编写与编译你的第一个 TS 代码

3. 深入核心：理解编译选项 (Compiler Options)

3.1 目标版本 (Target)

3.2 模块系统 (Module)

3.3 严格模式 (Strictness)

3.4 其他重要选项

3.5 实践与探索编译选项

4. 高效利器：错误诊断与日志

5. 分享你的代码：让协作更轻松

6. 探索更多：Examples, Plugins, DTS

6.1 Examples (示例)

6.2 Plugins (插件)

6.3 DTS (Declaration File – 声明文件)

7. 实践技巧与进阶用法

8. 总结

发表评论 取消回复

发表评论取消回复