From 1b56682d05930e21a041f58f90bce43b8fae03c6 Mon Sep 17 00:00:00 2001 From: zzall <1809642355@qq.com> Date: Tue, 8 Nov 2022 17:23:00 +0800 Subject: [PATCH 1/2] translate TypeScript Tooling in 5 minutes.md in zh-CN --- .../TypeScript Tooling in 5 minutes.md | 181 ++++++++++++++++++ 1 file changed, 181 insertions(+) create mode 100644 docs/documentation/zh/tutorials/TypeScript Tooling in 5 minutes.md diff --git a/docs/documentation/zh/tutorials/TypeScript Tooling in 5 minutes.md b/docs/documentation/zh/tutorials/TypeScript Tooling in 5 minutes.md new file mode 100644 index 00000000..4de8a4e9 --- /dev/null +++ b/docs/documentation/zh/tutorials/TypeScript Tooling in 5 minutes.md @@ -0,0 +1,181 @@ +--- +title: 5分钟了解TypeScript工具 +layout: docs +permalink: /zh/docs/handbook/typescript-tooling-in-5-minutes.html +oneline: 一个了解如何使用TypeScript来创建小型网站的教程 +# translatable: true +--- + +让我们从`用TypeScript构建一个简单的web应用程序`开始。 + +## 安装TypeScript + +有两种主要方法在项目中使用TypeScript： + +- 通过npm（Node.js包管理器） +- 通过安装TypeScript的Visual Studio插件 + +Visual Studio 2017和Visual Studio 2015 Update 3默认包含TypeScript语言支持，但不包括TypeScript编译器`tsc`。 + +如果没有在Visual Studio中安装TypeScript，您可以在这里[下载它](/download)。 + +使用npm: + +```shell +> npm install -g typescript +``` + +## 构建第一个TypeScript文件 + +在编辑器中，在`greeter.ts`中键入以下JavaScript代码： + +```ts twoslash +// @noImplicitAny: false +function greeter(person) { + return "Hello, " + person; +} + +let user = "Jane User"; + +document.body.textContent = greeter(user); +``` + +## 编译您的代码 + +我们使用了`.ts`扩展名，但这段代码只是JavaScript。您可以直接从现有的JavaScript应用程序中复制/粘贴此内容。 + + +在命令行中，运行TypeScript编译器： + +```shell +tsc greeter.ts +``` + +会生成一个`greeter.js`的JavaScript文件，其中内容与您输入的JavaScript相同。这表明了我们正在JavaScript应用程序中使用TypeScript！ + +现在我们可以开始使用TypeScript提供的一些新工具。向`person`函数参数添加`:string`类型注释，如下所示： + +```ts twoslash +function greeter(person: string) { + return "Hello, " + person; +} + +let user = "Jane User"; + +document.body.textContent = greeter(user); +``` + +## 类型注解 + +TypeScript中的类型注释是用来约束函数或变量类型的一种轻量级方式。在这个例子中，我们指明了要使用单个字符串参数来调用greeter函数。然后我们尝试下改为传递数组参数来调用greeter： + +```ts twoslash +// @errors: 2345 +function greeter(person: string) { + return "Hello, " + person; +} + +let user = [0, 1, 2]; + +document.body.textContent = greeter(user); +``` + +重新编译时，您将看到一个错误： + +```shell +error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'. +``` + +同样，尝试删除greeter调用的所有参数，TypeScript会告诉您：您调用了这个函数，但参数的数量不是预期的。在这两种情况下，TypeScript都可以基于代码的结构和提供的类型注释提供静态分析。 + +请注意，尽管有报错，但`greeter.js`文件仍然被创建成功了。也就是说，即使代码中有报错，也可以正常使用TypeScript。但在这种情况下，被TypeScript警告的代码可能无法按预期运行。 + +## 接口 + +让我们进一步完善我们的示例。这里我们使用一个`interface`接口来描述具有firstName和lastName字段的对象。 +在TypeScript中，如果两种类型的内部结构相一致，则它们被认为是一致的。 +这允许我们通过只定义接口所需的结构来实现接口，而不需要显式的使用`implements`关键字。 + +```ts twoslash +interface Person { + firstName: string; + lastName: string; +} + +function greeter(person: Person) { + return "Hello, " + person.firstName + " " + person.lastName; +} + +let user = { firstName: "Jane", lastName: "User" }; + +document.body.textContent = greeter(user); +``` + +## 类 + +最后，让我们用`class`类扩展一下这个示例。 +TypeScript支持JavaScript中的新功能，例如支持基于类的面向对象编程。 + +在这里，我们将创建一个带有构造函数和几个公共字段的`Student`类。 +请注意，类和接口可以很好地结合在一起，并且允许程序员来决定正确的抽象级别。 + +另外需要注意的一点是，在构造函数的参数上使用`public`是一种简写，它将自动为我们创建具有相同名称的属性。 + +```ts twoslash +class Student { + fullName: string; + constructor( + public firstName: string, + public middleInitial: string, + public lastName: string + ) { + this.fullName = firstName + " " + middleInitial + " " + lastName; + } +} + +interface Person { + firstName: string; + lastName: string; +} + +function greeter(person: Person) { + return "Hello, " + person.firstName + " " + person.lastName; +} + +let user = new Student("Jane", "M.", "User"); + +document.body.textContent = greeter(user); +``` + +重新运行`tsc greeter.ts`，您将看到生成的JavaScript与之前的代码相同。 +TypeScript中的类只是JavaScript中常用的基于原型的面向对象的简写。 + +## 运行您的TypeScript web应用 + +现在在`greeter.html`中键入以下内容： + +```html + + + + TypeScript Greeter + + + + + +``` + +在浏览器中打开`greeter.html`去运行您的第一个简单的TypeScript web应用程序！ + +小提示：在Visual Studio中打开`greeter.ts`，或将代码复制到[TypeScript Playground](https://www.typescriptlang.org/play)中。 +您可以将光标悬停在标识符上来查看其类型。 +请注意，在某些情况下，类型会自动为您推到。 +重新键入最后一行，并根据DOM元素的类型查看约束列表和参数帮助。 +将光标放在greeter函数的引用上，然后按F12键转到其定义。 +还请注意，您可以右键单击符号并使用重构对其进行重命名。 + +类型提示借由一些JavaScript编辑器工具一起工作，比如上面说到的Visual Studio或者TypeScript自带的编译平台TypeScript Playground。 +有关TypeScript中可能的更多示例，请参阅网站的“示例”部分。 + +![Visual Studio picture](/images/docs/greet_person.png) From fa48086528af96e2a62d083100e6479c0479a704 Mon Sep 17 00:00:00 2001 From: zzall <1809642355@qq.com> Date: Tue, 17 Jan 2023 11:01:17 +0800 Subject: [PATCH 2/2] fix: translate TypeScript Tooling in 5 minutes.md in zh-CN --- .../zh/tutorials/TypeScript Tooling in 5 minutes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 4de8a4e9..160dc51b 100644 --- a/docs/documentation/zh/tutorials/TypeScript Tooling in 5 minutes.md +++ b/docs/documentation/zh/tutorials/TypeScript Tooling in 5 minutes.md @@ -170,7 +170,7 @@ TypeScript中的类只是JavaScript中常用的基于原型的面向对象的简 小提示：在Visual Studio中打开`greeter.ts`，或将代码复制到[TypeScript Playground](https://www.typescriptlang.org/play)中。 您可以将光标悬停在标识符上来查看其类型。 -请注意，在某些情况下，类型会自动为您推到。 +请注意，在某些情况下，类型会自动为您推导。 重新键入最后一行，并根据DOM元素的类型查看约束列表和参数帮助。 将光标放在greeter函数的引用上，然后按F12键转到其定义。 还请注意，您可以右键单击符号并使用重构对其进行重命名。