init translation of typescript tooling

docs/documentation/zh/tutorials/TypeScript Tooling in 5 minutes.md

@@ -1,32 +1,31 @@
 ---
-title: TypeScript Tooling in 5 minutes
+title: 5 分钟了解 TypeScript 工具
 layout: docs
 permalink: /zh/docs/handbook/typescript-tooling-in-5-minutes.html
-oneline: A tutorial to understand how to create a small website with TypeScript
+oneline: 一个教程，帮助你了解如何使用 TypeScript 创建简单的网站
 translatable: true
 ---
 
-Let's get started by building a simple web application with TypeScript.
+让我们从使用 TypeScript 构建一个简单的 Web 应用程序来开始。
 
-## Installing TypeScript
+## 安装 TypeScript
 
-There are two main ways to add TypeScript to your project:
+主要有两种方法可以将 TypeScript 添加到你的项目中：
 
-- Via npm (the Node.js package manager)
-- By installing TypeScript's Visual Studio plugins
+- 通过 npm（Node.js 包管理器）
+- 通过安装 TypeScript 的 Visual Studio 插件
 
-Visual Studio 2017 and Visual Studio 2015 Update 3 include TypeScript language support by default but does not include the TypeScript compiler, `tsc`.
-If you didn't install TypeScript with Visual Studio, you can still [download it](/download).
+Visual Studio 2017 和 Visual Studio 2015 Update 3 默认包含 TypeScript 语言支持，但不包含 TypeScript 编译器 `tsc`。如果你没有在 Visual Studio 中安装 TypeScript，还可以[下载它](/zh/download)。
 
-For npm users:
+对于 npm 用户：
 
 ```shell
 > npm install -g typescript
 ```
 
-## Building your first TypeScript file
+## 构建你的第一个 TypeScript 文件
 
-In your editor, type the following JavaScript code in `greeter.ts`:
+在你的编辑器中，输入以下 JavaScript 代码到 `greeter.ts` 文件中：
 
 ```ts twoslash
 // @noImplicitAny: false
@@ -39,22 +38,19 @@ let user = "Jane User";
 document.body.textContent = greeter(user);
 ```
 
-## Compiling your code
+## 编译你的代码
 
-We used a `.ts` extension, but this code is just JavaScript.
-You could have copy/pasted this straight out of an existing JavaScript app.
+虽然我们使用了 `.ts` 扩展名，但这段代码实际上是 JavaScript 代码。你可以直接从现有的 JavaScript 应用程序中复制/粘贴这段代码。
 
-At the command line, run the TypeScript compiler:
+在命令行中运行 TypeScript 编译器：
 
 ```shell
 tsc greeter.ts
 ```
 
-The result will be a file `greeter.js` which contains the same JavaScript that you fed in.
-We're up and running using TypeScript in our JavaScript app!
+结果会是一个名为 `greeter.js` 的文件，其中包含与输入相同的 JavaScript 代码。我们已经开始在 JavaScript 应用程序中使用 TypeScript 了！
 
-Now we can start taking advantage of some of the new tools TypeScript offers.
-Add a `: string` type annotation to the 'person' function argument as shown here:
+现在，我们可以开始利用 TypeScript 提供的一些新工具了。向‘person’函数参数添加 `: string` 类型注解，如下所示：
 
 ```ts twoslash
 function greeter(person: string) {
@@ -66,11 +62,9 @@ let user = "Jane User";
 document.body.textContent = greeter(user);
 ```
 
-## Type annotations
+## 类型注解
 
-Type annotations in TypeScript are lightweight ways to record the intended contract of the function or variable.
-In this case, we intend the greeter function to be called with a single string parameter.
-We can try changing the call greeter to pass an array instead:
+在 TypeScript 中，类型注解是一种轻量级的记录函数或变量预期约定的方式。在本例中，我们希望 greeter 函数只接收一个字符串参数。我们可以尝试更改 greeter 的调用，传递一个数组：
 
 ```ts twoslash
 // @errors: 2345
@@ -83,24 +77,19 @@ let user = [0, 1, 2];
 document.body.textContent = greeter(user);
 ```
 
-Re-compiling, you'll now see an error:
+重新编译，你将会看到报错：
 
 ```shell
 error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
 ```
 
-Similarly, try removing all the arguments to the greeter call.
-TypeScript will let you know that you have called this function with an unexpected number of parameters.
-In both cases, TypeScript can offer static analysis based on both the structure of your code, and the type annotations you provide.
+同样地，尝试删除 greeter 调用的所有实参。TypeScript 将会提醒你，你调用函数时使用的实参数量并非预期值。在这两种情况下，TypeScript 可以基于代码结构和提供的类型注解进行静态分析。
 
-Notice that although there were errors, the `greeter.js` file is still created.
-You can use TypeScript even if there are errors in your code. But in this case, TypeScript is warning that your code will likely not run as expected.
+请注意，尽管存在错误，`greeter.js` 文件仍然被创建了。即使代码中存在错误，你仍然可以使用 TypeScript。但在这种情况下，TypeScript 会警告你，你的代码可能无法按预期运行。
 
-## Interfaces
+## 接口
 
-Let's develop our sample further. Here we use an interface that describes objects that have a firstName and lastName field.
-In TypeScript, two types are compatible if their internal structure is compatible.
-This allows us to implement an interface just by having the shape the interface requires, without an explicit `implements` clause.
+让我们进一步开发我们的示例。接下来我们使用一个接口来描述具有 `firstName` 和 `lastName` 字段的对象。在 TypeScript 中，只要两个类型的内部结构相互兼容，那么这两个类型就相互兼容。这使得我们可以通过使接口具有所需的结构来实现接口，而无需显式使用 `implements` 子句。
 
 ```ts twoslash
 interface Person {
@@ -117,15 +106,13 @@ let user = { firstName: "Jane", lastName: "User" };
 document.body.textContent = greeter(user);
 ```
 
-## Classes
+## 类
 
-Finally, let's extend the example one last time with classes.
-TypeScript supports new features in JavaScript, like support for class-based object-oriented programming.
+最后，让我们通过类进一步扩展示例。TypeScript 支持 JavaScript 的新特性，例如支持基于类的面向对象编程。
 
-Here we're going to create a `Student` class with a constructor and a few public fields.
-Notice that classes and interfaces play well together, letting the programmer decide on the right level of abstraction.
+接下来，我们需要创建 `Student` 类，它具有一个构造函数和一些公共字段。需要注意的是，类和接口可以很好地配合使用，程序员借此可以决定哪种抽象级别合适。
 
-Also of note, the use of `public` on arguments to the constructor is a shorthand that allows us to automatically create properties with that name.
+另外需要注意的是，构造函数参数上的 `public` 关键字是一种简写形式，借此我们可以自动创建具有相同名称的属性。
 
 ```ts twoslash
 class Student {
@@ -153,12 +140,11 @@ let user = new Student("Jane", "M.", "User");
 document.body.textContent = greeter(user);
 ```
 
-Re-run `tsc greeter.ts` and you'll see the generated JavaScript is the same as the earlier code.
-Classes in TypeScript are just a shorthand for the same prototype-based OO that is frequently used in JavaScript.
+重新运行 `tsc greeter.ts`，你会注意到新生成的 JavaScript 代码与之前的代码相同。TypeScript 中的类只是 JavaScript 中经常使用的基于原型的面向对象的一种简写形式。
 
-## Running your TypeScript web app
+## 运行你的 TypeScript Web 应用
 
-Now type the following in `greeter.html`:
+现在在 `greeter.html` 中输入以下内容：
 
 ```html
 <!DOCTYPE html>
@@ -172,16 +158,10 @@ Now type the following in `greeter.html`:
 </html>
 ```
 
-Open `greeter.html` in the browser to run your first simple TypeScript web application!
+在浏览器中打开 `greeter.html`，运行你的第一个简单的 TypeScript Web 应用程序！
 
-Optional: Open `greeter.ts` in Visual Studio, or copy the code into the TypeScript playground.
-You can hover over identifiers to see their types.
-Notice that in some cases these types are inferred automatically for you.
-Re-type the last line, and see completion lists and parameter help based on the types of the DOM elements.
-Put your cursor on the reference to the greeter function, and hit F12 to go to its definition.
-Notice, too, that you can right-click on a symbol and use refactoring to rename it.
+可选项：在 Visual Studio 中打开 `greeter.ts`，或将代码复制到 TypeScript 演练场中。你可以将鼠标悬停在标识符上，查看它们的类型。注意，在某些情况下，这些类型会自动为你推断出来。重新输入最后一行，查看基于 DOM 元素类型的自动完成列表和参数帮助。将光标放在对 greeter 函数的引用上，按 F12 键跳转到其定义处。同时，注意你可以右键点击一个符号，然后使用重构工具重命名它。
 
-The type information provided works together with the tools to work with JavaScript at application scale.
-For more examples of what's possible in TypeScript, see the Samples section of the website.
+类型信息加上工具的帮助，可以处理应用程序规模的 JavaScript。有关 TypeScript 的更多示例，请参阅本站的示例部分。
 
-![Visual Studio picture](/images/docs/greet_person.png)
+![Visual Studio 图片](/images/docs/greet_person.png)