# ts-playground

**Repository Path**: jamesfancy/ts-playground

## Basic Information

- **Project Name**: ts-playground
- **Description**: 创建一个本地的 TypeScript Playground，可以监控 `.ts` 文件变化自动编译 `.js` 并执行。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-25
- **Last Updated**: 2022-05-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TypeScript Playground

TypeScript Playground 搭建了基本的 TypeScript 编辑/编译/运行环境。使用 VSCode 等编辑器打开后可以迅速试验/调试简单代码。TypeScript 官方的 [Playground](https://www.typescriptlang.org/play) 也是一个很好的代码试验平台，但需要在线使用，受网络环境和网络速度的限制。

当前版本的 TypeScript Playground 使用 VSCode 内置的调试器来运行和调试，在运行之前会自动调用构建任务，从 `.ts` 源码生成 `.js` 目标代码。

> 备注：之前使用 `gulp watch` 进行即时构建的方式，由于 `gulp` 技术栈越来越不活跃，已经废弃。如果仍然需要 `gulp watch` 方式的 TypeScript Playground，请切到 `gulp-watch-version` 分支。

## 用法

- 下载/克隆 ts-playground 源代码
- 使用 VSCode 打开，在 `src` 目录下编写代码
- 运行/调试：
    - 快捷键 <kbd>F5</kbd> 调试，<kbd>Ctrl+F5</kbd> 运行但不调试
    - 也可从菜单「Run ⇒ Start Debugging」或「Run ⇒ Run Without Debugging」启动
- 在  VSCode 的内置终端中查看运行结果

## 已知问题

构建结果是 ESM 类型，最近的 Node 大版本均支持直接运行 ESM 类型的代码，前提是在 `package.json` 中添加 `"type": "moudle"`。这个参数和浏览器中 `<script></script>` 标签的 `type="module"` 属性作用相同。但是较旧的 Node 可能不支持 ESM，请注意检查 Node 的版本。

ESM 要求 `import` 时书写完整的文件名（含扩展名 `.js`），但 TypeScript Compiler 并不会为 `import` 语句补充 `.js` 扩展名，编写代码时需要手工添加。而且注意，是添加 `.js` 扩展名，而不是 `.ts` 扩展名，哪怕它实际是一个 `.ts` 文件。关于这个问题在  [TypeScript Issue](https://github.com/Microsoft/TypeScript/issues/16577) 中经过了激烈的讨论并已有[结论](https://github.com/Microsoft/TypeScript/issues/16577#issuecomment-754941937)。