optimize the translation

[awxiaoxian2020]

No description provided.

[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 TS for the New Programmer.md

---

title: TypeScript for beginners in programming
short: TS for beginners in programming
layout: docs
permalink: /zh/docs/handbook/typescript-from-scratch.html

oneline: Learn TypeScript from scratch

Congratulations on choosing TypeScript as your first programming language – you've made the smart decision!

You may have heard that TypeScript is a "spice" or "variant" of JavaScript. The relationship between TypeScript (TS) and JavaScript (JS) is quite unique in modern programming languages, so understanding this relationship further will help you understand how to add TypeScript to JavaScript.

What is JavaScript? A brief history

JavaScript (also known as ECMAScript) was born as a simple browser scripting language. When it was invented, it was expected to be used to embed short code snippets in web pages. These fragments usually do not exceed a few dozen lines. As a result, early Web browsers executed such code very slowly. However, over time, JS became more popular, and web developers began to use it to create interactive experiences.

Web browser developers cope with the increasing use of JS by optimizing the execution engine (dynamic compilation) and extending what can be done (adding APIs), which in turn makes web developers more use of JS. On modern websites, your browser often runs applications with more than hundreds of thousands of lines of code. This is the long-term and gradual development of the "web", starting with a simple static page network and gradually evolving into one for various enrichments application of platforms.

Not only that, but JS has become popular enough that it can be used outside of the browser environment. For example, implement a JS server with node .js. JS's "Run Anywhere" nature makes it an attractive option for cross-platform development. Nowadays, there are many developers only Full-stack programming is possible with JavaScript!

In summary, we have a language that was originally designed for quick use and later evolved into a powerful tool for writing applications with millions of lines. Every language has it Weird, which is wacky or surprising. JavaScript's slightly rudimentary beginnings make this weird A lot。 Some examples:

• JavaScript's equals operator (==will try compulsion Equal values, resulting in some unexpected behavior:

  if ("" == 0) {
    // 他们相等！但是为什么呢？？
  }
  if (1 < x < 3) {
    // x是 *任何* 值都为真！
  }

• JavaScript also allows access to properties that do not exist:

  const obj = { width: 10, height: 15 };
  // 为什么是 NaN？拼写好难！
  const area = obj.width * obj.heigth;

Most programming languages throw an error message when such an error occurs, and some do so during compilation (before any code runs). When writing small programs, this weirdness is annoying, but it's easy to manage. When writing an application with hundreds or thousands of lines of code, these constant streams of strange errors can be a serious problem.

TypeScript: Static type checker

As we mentioned earlier, some languages simply don't allow those wrong programs to run. Detecting errors in it without running code is called Static check 。 Depending on the kind of value being manipulated to determine what error and what is not an error, this is called static type Examine.

TypeScript is based on before execution The type of the value Check the program for errors. It is Static Type Checker。 For example, based on obj target _type_TypeScript found an error in the last example above:

// @errors: 2551
const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;

JavaScript typed superset

But what does TypeScript have to do with JavaScript?

grammar

TypeScript is JavaScript superset : The JS syntax is therefore legal for TS. Syntax refers to the way we write text to form a program. For example, this code has one grammar Error because it is missing one )：

// @errors: 1005
let a = (4

TypeScript does not treat any JavaScript code as an error. This means that you can put any valid JavaScript code in a TypeScript file without worrying about exactly how it is written.

type

However, TypeScript is one Typing The superset of, meaning it adds rules on how to use different types of values. Previously about obj.heigth The error is not grammar error, but instead used some value in an incorrect way ( type ）。

As another example, this JavaScript code can run in a browser Yes Print a value:

console.log(4 / []);

The syntax is legal for the program to print out Infinity 。 However, TypeScript considers dividing numbers by arrays to be meaningless and reports an error:

// @errors: 2363
console.log(4 / []);

You may It's true Trying to divide a number by an array, maybe just to see what happens, but most of the time, it's a programming error. TypeScript's type checker is designed to allow the right program to pass through while still catching as many common errors as possible. (Later, we'll learn how to configure TypeScript to control how strictly the inspection code is.) ）

This may occur if you move some code from a JavaScript file to a TypeScript file Type error , depending on how the code is written. These may be real problems with the code, or TypeScript is too conservative. In this guide, we'll show you how to add various TypeScript syntax to eliminate such errors.

Runtime behavior

TypeScript retains JavaScript's Runtime behavior 。 For example, the result of being divided by zero in JavaScript is Infinityinstead of throwing a runtime exception. In principle, TypeScript never Change the runtime behavior of JavaScript code.

This means that if you migrate code from JavaScript to TypeScript, even if TypeScript thinks the code has a type error guarantee Operates in the same way.

Keeping the same behavior as the JavaScript runtime is a fundamental commitment of TypeScript. Because this means you can easily switch between two languages without worrying about some nuances that might stop the program from working.

The type of erase

Roughly speaking, once TypeScript's compiler has done its job of inspecting the code, it does Erase type to generate the final "compiled" code. This means that once your code is compiled, the generated normal JS code has no type information.

This also means that TypeScript will never change the program based on the type it infers behavior 。 Most importantly, although you may see type errors during compilation, the type system itself has nothing to do with how the program runs.

Finally, TypeScript does not provide any additional runtime libraries. Your program uses the same standard library (or external library) as your JavaScript program. So you don't need to learn other frameworks specific to TypeScript.

Learn JavaScript and TypeScript

We often see questions like, "Should I learn JavaScript or TypeScript?" ”。

The answer is that you can't learn TypeScript without learning JavaScript! TypeScript shares JavaScript syntax and runtime behavior. Therefore, any knowledge of JavaScript can help you learn TypeScript.

Programmers can use many, many resources to learn JavaScript. If you're writing TypeScript,No Ignore these resources. For example, with javascript The StackOverflow tag is about the same as the problem typescript Labels are 20 times more, however all javascriptThe question also applies to TypeScript.

If you're searching for something like "how to sort a list in TypeScript," keep in mind: TypeScript is the JavaScript runtime with a compile-time type checker 。 Lists are sorted in TypeScript in the same way as in JavaScript. That's fine if you find resources that use TypeScript directly, but don't be limited to thinking you need TypeScript-specific answers when solving day-to-day problems with runtime tasks.

Next

The following is a brief introduction to common syntax and tools in TypeScript. Here you can:

• Learn some JavaScript basics (A JavaScript guide for Mozilla Web Docs It's a good start)
• Read on TypeScript for JavaScript programmers
• Read the full brochure from top to bottom (30m)
• explore Playground example

Generated by 🚫 dangerJS against 181f0da

[Kingwl]

LGTM

[github-actions]

Merging because @Kingwl is a code-owner of all the changes - thanks!