Add modern JavaScript

packages/playground-examples/copy/zh/JavaScript/Modern JavaScript/Async Await.ts

@@ -69,16 +69,15 @@ const exampleSquareRootFunction = async (input: any) => {
   }
 
   if (input < 0) {
-    return { success: false, message: "Cannot square root negative number"}
+    return { success: false, message: "Cannot square root negative number" }
   } else {
     return { success: true, value: Math.sqrt(input) }
   }
 }
 
 // Then the function consumers can check in the response and
-// figure out what to do with your return value. While this
-// is a trivial example, once you have started working with
-// networking code these APIs become worth the extra syntax.
+// 确定如何使用您的返回值。尽管这是一个简单的例子，但是一旦您开始使用
+// 网络代码，这些 API 就需要使用额外的语法。
 
 const checkSquareRoot = async (value: number) => {
   const response = await exampleSquareRootFunction(value)
@@ -87,7 +86,7 @@ const checkSquareRoot = async (value: number) => {
   }
 }
 
-// Async/Await took code which looked like this:
+// Async、Await 使代码看起来是如下形式：
 
 // getResponse(url, (response) => {
 //   getResponse(response.url, (secondResponse) => {
@@ -98,13 +97,12 @@ const checkSquareRoot = async (value: number) => {
 //   })
 // })
 
-// And let it become linear like:
+// 然后使其变为线性：
 
 // const response = await getResponse(url)
 // const secondResponse = await getResponse(response.url)
 // const responseData = secondResponse.data
 // const thirdResponse = await getResponse(responseData.url)
 // ...
 
-// Which can make the code sit closer to left edge, and
-// be read with a consistent rhythm.
+// 可以使代码左对齐，并且以一致的节奏阅读。

packages/playground-examples/copy/zh/JavaScript/Modern JavaScript/Immutability.ts

@@ -1,57 +1,48 @@
-// JavaScript is a language with a few ways to declare that
-// some of your objects don't change. The most prominent is
-// const - which says that the value won't change.
+// JavaScript 是有一门多种方式声明您的对象不可变的语言。最常见的方式是
+// const ——表示某些值不会变。
 
 const helloWorld = "Hello World";
 
-// You cannot change helloWorld now, TypeScript will give
-// you an error about this, because you would get one at
-// runtime instead.
+// 您不可以更改 helloWorld，TypeScript 将会在您试图修改时报错，
+// 因为您同样不能再运行时这样做。
 
 helloWorld = "Hi world";
 
-// Why care about immutability? A lot of this is about
-// reducing complexity in your code. If you can reduce the
-// number of things which can change, then there are less
-// things to keep track of.
+// 为什么要关心不变性？很大一部分原因是为了减少代码复杂度。如果您
+// 可以减少可变事物的数量，那么需要跟踪的东西也会随之变少。
 
-// Using const is a great first step, however this fails
-// down a bit when using objects.
+// 使用 const 是很好的第一步，但是使用 object 时这样会失效。
 
 const myConstantObject = {
   msg: "Hello World"
 };
 
-// myConstantObject is not quite a constant though, because
-// we can still make changes to parts of the object, for
-// example we can change msg:
+// myConstantObject 并不是一个常量，因为我们仍然可以更改对象的某些
+// 部分。例如我们可以更改 msg：
 
 myConstantObject.msg = "Hi World";
 
-// const means the value at that point stays the same, but
-// that the object itself may change internally. This can
-// be changed using Object.freeze.
+// const 代表该引用的值不变，但对象本身可能在内部发生变化。
+// 我们可以改用 Object.freeze 来实现。
 
 const myDefinitelyConstantObject = Object.freeze({
   msg: "Hello World"
 });
 
-// When an object is frozen, then you cannot change the
-// internals. TypeScript will offer errors in these cases:
+// 当一个对象被 “冻结”，之后您将不能改变其内部。TypeScript 将
+// 对这些情况抛出错误：
 
 myDefinitelyConstantObject.msg = "Hi World";
 
-// This works the same for arrays too:
+// 这对数组同样有效：
 
 const myFrozenArray = Object.freeze(["Hi"]);
 myFrozenArray.push("World");
 
-// Using freeze means you can trust that the object is
-// staying the same under the hood.
+// 使用 freeze 代表您确认这个对象将会保持不变。
 
-// TypeScript has a few extra syntax hooks to improve working
-// with immutable data which you can find in the TypeScript
-// section of the examples:
+// TypeScript 有一些为了改进对不可变数据处理的额外语法，您可以
+// 在这些例子中里看到他们：
 //
 // example:literals
 // example:type-widening-narrowing

packages/playground-examples/copy/zh/JavaScript/Modern JavaScript/Import Export.ts

@@ -1,109 +1,86 @@
 //// { order: 1, target: "ES5" }
 
-// JavaScript added import/export to the language back in 2016
-// and TypeScript has complete support for this style of
-// linking between files and to external modules. TypeScript
-// expands on this syntax by also allowing types to be passed
-// with code.
+// JavaScript 于 2016 将 import、export 添加到该语言，TypeScript 完全
+// 支持这种在文件和外部模块之间进行连接的风格。TypeScript 还通过允许将
+// 类型与代码一起传递来扩展该语法。
 
-// Let's look at importing code from a module.
+// 让我们看一下从模块导入代码。
 
 import { danger, message, warn, DangerDSLType } from "danger";
 
-// This takes a set of named imports from a node module
-// called danger. While there are more than four imports,
-// these are the only ones that we have chosen to import.
+// 这个例子需要从一个名为 “danger” 的 node 模块获取一组具名导入（named import）。
+// 虽然有 4 个以上的导入，但是这是我们唯一选择导入的东西。
 
-// Specifically naming which imports you are importing
-// gives tools the ability to remove unused code in your
-// apps, and helps you understand what is being used in
-// a particular file.
+// 指定您要导入的东西的名字可以帮助工具删除您的应用中未使用到的代码。
+// 并且可以帮助您了解特定文件中正在使用的内容。
 
-// In this case: danger, message and warn are JavaScript
-// imports - where as DangerDSLType is an interface type.
+// 在这个例子中，danger， message，和 warn 是 JavaScript 的
+// 导入——DangerDSLType 是一个接口类型。
 
-// TypeScript lets engineers document their code using
-// JSDoc, and docs are imported also. For example if
-// you hover on the different parts below, you see
-// explanations of what they are.
+// TypeScript 允许工程师使用 JSDoc 为他们的代码提供文档，并且
+// 文档将被一起导入。例如您将鼠标悬停在下面不同的部分上，则
+// 可以看到他们相关的解释。
 
 danger.git.modified_files;
 
-// If you want to know how to provide these documentation
-// annotations read example:jsdoc-support
+// 如果您想了解怎么提供这些文档注解，可以查看 example:jsdoc-support
 
-// Another way to import code is by using the default export
-// of a module. An example of this is the debug module, which
-// exposes a function that creates a logging function.
+// 另一个导入代码的方式是让模块使用默认导出（default export）。debug 模块
+// 是一个相关的例子，它导出了一个创建日志记录的函数。
 
 import debug from "debug";
 const log = debug("playground");
 log("Started running code");
 
-// Because of the nature of default exports having no true
-// name, they can be tricky when applied with static analysis
-// tools like the refactoring support in TypeScript but they
-// have their uses.
+// 由于默认导出不具有真实的名称，因此将他们与静态分析工具（如 TypeScript
+// 中的重构支持）一起使用时，他们可能会很棘手。但是他们有适合的用途。
 
-// Because there is a long history in importing/exporting code
-// in JavaScript, there is a confusing part of default exports:
-// Some exports have documentation that implies you can write
-// an import like this:
+// 由于导入导出在 JavaScript 中历史悠久，所以会有一些关于默认导出的困惑：
+// 一些导出文件中的文档暗示您可以写这样形式的导入：
 
 import req from "request";
 
-// However that fails, and then you find a stack overflow
-// which recommends the import as:
+// 但是这会报错，在 StackOverflow 上可以找到将其改为 import as 的建议：
 
 import * as req from "request";
 
-// And this works. Why? We'll get back to that at the end of
-// our section on exporting.
+// 这样就可以正常工作了。为什么呢？我们将在导出部分的结尾回顾这一点。
 
-// In order to import, you must be able to export. The modern
-// way to write exports is using the export keyword.
+// 为了可以导入，您必须先导出。现代的导出方式是使用 export 关键字。
 
-/** The current stickers left on the roll */
+/** 当前卷轴上的剩余的贴纸 */
 export const numberOfStickers = 11;
 
-// This could be imported into another file by:
+// 它可以通过以如下形式被导入至另一个文件：
 //
 // import { numberOfStickers } from "./path/to/file"
 
-// You can have as many of those in a file as you like. Then
-// a default export is close to the same thing.
+// 您可以在一个文件中按需包含任意多个导出，默认导出几乎相与之同。
 
-/** Generates a sticker for you */
-const stickerGenerator = () => {};
+/** 为您生成一个贴纸 */
+const stickerGenerator = () => { };
 export default stickerGenerator;
 
-// This could be imported into another file by:
+// 它可以以如下形式被导入至另一个文件：
 //
 // import getStickers from "./path/to/file"
 //
-// The naming is up to the module consumer.
+// 命名取决于模块的使用者。
 
-// These aren't the only types of imports, just the most common
-// in modern code. Covering all of the ways code can cross
-// module boundaries is a very long topic in the handbook:
+// 导入的类型有很多，这里只介绍了现代代码中最常见的集中。手册中涵盖了
+// 跨越模块便捷的所有方式，这是一个非常大的主题：
 //
 // https://www.typescriptlang.org/docs/handbook/modules.html
 
-// However, to try cover that last question. If you look at
-// the JavaScript code for this example - you'll see this:
+// 但是，为了解决上一个问题，如果查看此示例的 JavaScript 代码，您将看到：
 
 // var stickerGenerator = function () { };
 // exports.default = stickerGenerator;
 
-// This sets the default property on the exports object
-// to be stickerGenerator. There is code out there which
-// sets exports to be a function, instead of an object.
+// 这会将 exports 对象的 default 属性设置为 stickerGenerator，
+// 这里的代码将 exports 设置为一个函数，而不是一个对象。
 //
-// TypeScript opted to stick with the ECMAScript specification
-// about how to handle those cases, which is to raise an
-// error. However, there is a compiler setting which will
-// automatically handle those cases for you which is
-// esModuleInterop.
+// TypeScript 选择了 ECMAScript 规范中如何处理这些情况的部分，他们会
+// 抛出一个错误。但是有一个编译器选项可以自动为您处理这些情况，即 esModuleInterop。
 //
-// If you turn that on for this example, you will see that
-// error go away.
+// 如果您在示例中将此选项打开，您会看到错误消失了。

packages/playground-examples/copy/zh/JavaScript/Modern JavaScript/JSDoc Support.js

@@ -1,62 +1,53 @@
 //// { order: 3, isJavaScript: true }
 
-// TypeScript has very rich JSDoc support, for a lot of cases
-// you can even skip making your files .ts and just use JSDoc
-// annotations to create a rich development environment.
+// TypeScript 有着非常丰富的 JSDoc 支持，很多情况下您甚至可以不写 .ts 文件
+// 而仅仅使用 JSDoc 注解去创建丰富的开发环境。
 //
-// A JSDoc comment is a multi-line comment which starts with
-// two stars instead of one.
+// JSDoc 注释是由两个星号（*）开头的多行注释。
+/* 这是一个普通注释 */
+/** 这是一个 JSDoc 注释 */
 
-/* This is a normal comment */
-/** This is a JSDoc comment */
-
-// JSDoc comments become attached to the closest JavaScript
-// code below it.
+// JSDoc 注释会附加到下方最近的 JavaScript 代码中。
 
 const myVariable = "Hi";
 
-// If you hover over myVariable, you can see that it has the
-// text from inside the JSDoc comment attached.
+// 如果您将书本悬停到 myVariable，你可以看到这段在 JSDoc 注释
+// 中的文字及已经非附加了。
 
-// JSDoc comments are a way to provide type information to
-// TypeScript and your editors. Let's start with an easy one
-// setting a variable's type to a built-in type.
+// JSDoc 注释是一种为 TypeScript 和 您的编辑器提供类型信息的方式。
+// 让我们简单的从将变量的类型设置为内置类型开始。
 
-// For all of these examples, you can hover over the name,
-// and on the next line try write [example]. to see the
-// auto-complete options.
+// 对于所有这些示例，您可以将鼠标悬停在名称上，然后再下一行尝试
+// 输入【示例】以查看自动完成选项。
 
 /** @type {number} */
 var myNumber;
 
-// You can see all of the supported tags in the handbook:
+// 你可以在手册中查看所有已支持的标签：
 //
 // https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html#supported-jsdoc
 
-// However, we'll try go through some of the more common examples
-// here. You can also copy & paste any examples from the handbook
-// into here.
+// 但是，我们将在这里尝试一些更常见的示例，您也可以将手册中的任何示例粘贴到此处。
 
-// Importing the types for JavaScript configuration files:
+// 由 JavaScript 配置文件中导入类型：
 
 /** @type { import("webpack").Config } */
 const config = {};
 
-// Creating a complex type to re-use in many places:
+// 创建一个复杂的类型以在其他多处地方复用：
 
 /**
- * @typedef {Object} User - a User account
- * @property {string} displayName - the name used to show the user
- * @property {number} id - a unique id
+ * @typedef {Object} User - 用户账户
+ * @property {string} displayName - 用来展示用户的名字
+ * @property {number} id - 唯一 ID
  */
 
-// Then use it by referencing the typedef's name:
+// 然后通过引用类型的名字来使用它：
 
 /** @type { User } */
 const user = {};
 
-// There's the TypeScript compatible inline type shorthand,
-// which you can use for both type and typedef:
+// type 和 typedef 有兼容 TypeScript 的内联类型快捷：
 
 /** @type {{ owner: User, name: string }} */
 const resource;
@@ -66,29 +57,28 @@ const resource;
 /** @type {Resource} */
 const otherResource;
 
-// Declaring a typed function:
+// 声明一个有类型的函数：
 
 /**
- * Adds two numbers together
- * @param {number} a The first number
- * @param {number} b The second number
+ * 将两个数值相加
+ * @param {number} a 第一个数字
+ * @param {number} b 第二个数字
  * @returns {number}
  */
 function addTwoNumbers(a, b) {
   return a + b;
 }
 
-// You can use most of TypeScript's type tools, like unions:
+// 你可以使用大多数 TypeScript 的类型工具，例如联合类型：
 
 /** @type {(string | boolean)} */
 let stringOrBoolean = "";
 stringOrBoolean = false;
 
-// Extending globals in JSDoc is a more involved process
-// which you can see in the VS Code docs:
+// 在 JSDoc 中扩展全局变量是一个涉及更多内容的过程，您可以
+// 在 VS Code 文档中找到：
 //
 // https://code.visualstudio.com/docs/nodejs/working-with-javascript#_global-variables-and-type-checking
 
-// Adding JSDoc comments to your functions is a win-win
-// situation; you get better tooling and so do all your
-// API consumers.
+// 在您的函数中添加 JSDoc 注释是一个双赢的情况，您将获得更好的工具，
+// 所有 API 的使用者也一样。