translate TypeScript Tooling in 5 minutes.md in zh-CN

[zzall]

translate TypeScript Tooling in 5 minutes.md in zh-CN

[github-actions]

Thanks for the PR!

This section of the codebase is owned by @Kingwl - if they write a comment saying "LGTM" then it will be merged.

[github-actions]

Translation of TypeScript Tooling in 5 minutes.md

---

title: 5 minutes to learn about the TypeScript tool
layout: docs
permalink: /zh/docs/handbook/typescript-tooling-in-5-minutes.html
oneline: A tutorial on how to use TypeScript to create small websites

translatable: true

---

Let's start with用TypeScript构建一个简单的web应用程序Begin.

Install TypeScript

There are two main ways to use TypeScript in your projects:

• Via npm (Node.js package manager)
• By installing the Visual Studio plugin for TypeScript

Visual Studio 2017 and Visual Studio 2015 Update 3 include TypeScript language support by default, but not the TypeScript compilertsc。

If you don't have TypeScript installed in Visual Studio, you can do it hereDownload it。

Using npm:

> npm install -g typescript

Build your first TypeScript file

In the editor, ingreeter.tsType the following JavaScript code:

// @noImplicitAny: false
function greeter(person) {
  return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user);

Compile your code

We used.tsextension, but this code is just JavaScript. You can copy/paste this directly from an existing JavaScript application.

On the command line, run the TypeScript compiler:

tsc greeter.ts

One is generatedgreeter.js, where the content is the same as the JavaScript you entered. This shows that we are using TypeScript in our JavaScript applications!

Now we can start using some of the new tools that TypeScript offers. towardpersonFunction parameters are added:stringType annotations as follows:

function greeter(person: string) {
  return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user);

Type annotation

Type annotations in TypeScript are a lightweight way to constrain the type of a function or variable. In this example, we indicated that we want to call the greeter function with a single string parameter. Then we try to call greeter by passing array parameters instead:

// @errors: 2345
function greeter(person: string) {
  return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.textContent = greeter(user);

When recompiling, you will see an error:

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

Again, try to remove all the arguments called by greeter, and TypeScript will tell you that you called this function, but the number of arguments is not as expected. In both cases, TypeScript can provide static analysis based on the structure of the code and the type comments provided.

Note that despite the error, thoughgreeter.jsThe file is still created successfully. In other words, even if there is an error in the code, TypeScript can be used normally. But in this case, the code warned by TypeScript may not work as expected.

interface

Let's refine our example further. Here we use oneinterfaceinterface to describe an object with firstName and lastName fields.
In TypeScript, two types are considered consistent if their internal structures coincide.
This allows us to implement the interface by defining only the structures it requires, without the need for explicit useimplementsKeywords.

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);

kind

Finally, let's useclassThe class extends this example.
TypeScript supports new features in JavaScript, such as support for class-based object-oriented programming.

Here, we will create one with a constructor and several public fieldsStudentKind.
Note that classes and interfaces work well together and allow the programmer to decide the right level of abstraction.

Another thing to note is that it is used on the parameters of the constructorpublicis a shorthand that will automatically create a property with the same name for us.

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);

reruntsc greeter.ts, you will see that the generated JavaScript is the same as the previous code.
Classes in TypeScript are just shorthand for prototype-based object-orientation commonly used in JavaScript.

Run your TypeScript web application

Now ingreeter.htmlType the following:

<!DOCTYPE html>
<html>
  <head>
    <title>TypeScript Greeter</title>
  </head>
  <body>
    <script src="greeter.js"></script>
  </body>
</html>

Open in a browsergreeter.htmlGo and run your first simple TypeScript web application!

Tip: Open in Visual Studiogreeter.ts, or copy the code to TypeScript PlaygroundMiddle.
You can hover over an identifier to see its type.
Note that in some cases, the type is automatically deduced for you.
Retype the last line and see the list of constraints and parameter help depending on the type of DOM element.
Place the cursor on the reference of the greeter function and press F12 to go to its definition.
Also note that you can right-click the symbol and rename it using refactoring.

Type hints work together through JavaScript editor tools, such as Visual Studio or TypeScript's built-in compilation platform, TypeScript Playground.
For more examples that are possible in TypeScript, see the "Examples" section of the website.

Generated by 🚫 dangerJS against fa48086

[zzall]

@microsoft-github-policy-service agree [company="{your company}"]

@microsoft-github-policy-service agree [company="{zzall}"]

[zzall]

@microsoft-github-policy-service agree

@microsoft-github-policy-service agree

[hexiaokang]

Suggested change

	请注意，在某些情况下，类型会自动为您推到。
	请注意，在某些情况下，类型会自动为您推导。