在线学习实践 TypeScript 的官方Playground演练场使用介绍本文可以看作是下面两文的续篇TypeScript学习与实践上https://blog.csdn.net/cnds123/article/details/164074853TypeScript学习与实践下https://blog.csdn.net/cnds123/article/details/164074899Playground演练场简介Playground演练场官网https://www.typescriptlang.org/play/可以切换为中文https://www.typescriptlang.org/zh/play/TypeScript Playground## 它是TypeScript 官方提供的“在线编辑器”不用安装配置任何环境即不用你安装 Node TStsc 编译、node 运行浏览器打开就能写 TS 代码、实时看编译结果、实时看类型错误、直接运行。最适合你这种刚入门、想随手试语法的情况。首次打开会显示 Downloading TypeScript...下载编译器等几秒就进入编辑器。如果有 Cookie 提示点 “Accept”(同意)或“Reject”(拒绝)点Accept 或 Reject 无所谓几乎一样功能和体验一点不受影响。Reject拒绝时网站的访问统计里不会有你对用户来说其实反而是好事更隐私友好。打开后界面布局核心理解左边写 TS右边 5 个标签页看结果全程实时自动更新不需要你编译。右边 5 个标签页简介JS 编译后的 JSDTS 类型定义错误 Errors类型错误日志 Logs 运行输出插件Plugins 给 Playground 额外装的小工具用来扩展它自带的功能。顶部按钮说明版本下拉框切换 TS 版本导出Export导出代码 / 配置保存到本地Share生成分享链接把代码发给别人一起看配置TS Config打开 tsconfig 配置调严格模式等编译选项示例Examples官方预置示例集演示学习各种 TS 特性Help帮助文档Playground演练场使用操作第 1 步在左侧输入 TS 代码点一下左侧空白编辑区直接输入比如interface Person { name: string; age: number; } const me: Person { name: 张三, age: 25 }; console.log(你好 me.name);第 2 步看编译后的 JSJS 标签页右侧 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（演练场）使用介绍
在线学习实践 TypeScript 的官方Playground演练场使用介绍本文可以看作是下面两文的续篇TypeScript学习与实践上https://blog.csdn.net/cnds123/article/details/164074853TypeScript学习与实践下https://blog.csdn.net/cnds123/article/details/164074899Playground演练场简介Playground演练场官网https://www.typescriptlang.org/play/可以切换为中文https://www.typescriptlang.org/zh/play/TypeScript Playground## 它是TypeScript 官方提供的“在线编辑器”不用安装配置任何环境即不用你安装 Node TStsc 编译、node 运行浏览器打开就能写 TS 代码、实时看编译结果、实时看类型错误、直接运行。最适合你这种刚入门、想随手试语法的情况。首次打开会显示 Downloading TypeScript...下载编译器等几秒就进入编辑器。如果有 Cookie 提示点 “Accept”(同意)或“Reject”(拒绝)点Accept 或 Reject 无所谓几乎一样功能和体验一点不受影响。Reject拒绝时网站的访问统计里不会有你对用户来说其实反而是好事更隐私友好。打开后界面布局核心理解左边写 TS右边 5 个标签页看结果全程实时自动更新不需要你编译。右边 5 个标签页简介JS 编译后的 JSDTS 类型定义错误 Errors类型错误日志 Logs 运行输出插件Plugins 给 Playground 额外装的小工具用来扩展它自带的功能。顶部按钮说明版本下拉框切换 TS 版本导出Export导出代码 / 配置保存到本地Share生成分享链接把代码发给别人一起看配置TS Config打开 tsconfig 配置调严格模式等编译选项示例Examples官方预置示例集演示学习各种 TS 特性Help帮助文档Playground演练场使用操作第 1 步在左侧输入 TS 代码点一下左侧空白编辑区直接输入比如interface Person { name: string; age: number; } const me: Person { name: 张三, age: 25 }; console.log(你好 me.name);第 2 步看编译后的 JSJS 标签页右侧 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