diff --git a/docs/documentation/zh/tutorials/TypeScript Tooling in 5 minutes.md b/docs/documentation/zh/tutorials/TypeScript Tooling in 5 minutes.md index 013ab22..34c4c36 100644 --- a/docs/documentation/zh/tutorials/TypeScript Tooling in 5 minutes.md +++ b/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 @@ -172,16 +158,10 @@ Now type the following in `greeter.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)