Congratulations on choosing TypeScript as one of your first languages — you’re already making good decisions!
恭喜你选择TypeScript作为你的第一种语言——你已经做了最佳的决定！
You’ve probably already heard that TypeScript is a “flavor” or “variant” of JavaScript. The relationship between TypeScript (TS) and JavaScript (JS) is rather unique among modern programming languages, so learning more about this relationship will help you understand how TypeScript adds to JavaScript.
可能你已经听说了TypeScript是JavaScript的变体。TypeScript与JavaScript的关系在现代程序语言中是相当独特的，所以学习更多这两者之间的关系会帮你理解TypeScript是如何增强JavaScript的。

What is JavaScript? A Brief History

什么是JavaScript？一个简短的历史

JavaScript (also known as ECMAScript) started its life as a simple scripting language for browsers. At the time it was invented, it was expected to be used for short snippets of code embedded in a web page — writing more than a few dozen lines of code would have been somewhat unusual. Due to this, early web browsers executed such code pretty slowly. Over time, though, JS became more and more popular, and web developers started using it to create interactive experiences.
JavaScript （也被称为ECMAScript）最初是作为一种简单的浏览器脚本语言而存在的。在它被发明的时候，人们期望用它简短的代码片段嵌入到web页面——编写几十行以上的JS代码有点不寻常。因此，早期的web浏览器执行此类代码的速度相当缓慢。但是，随着时间的推移，Js变得越来越流行，web开发人员开始使用它来创建交互体验。
Web browser developers responded to this increased JS usage by optimizing their execution engines (dynamic compilation) and extending what could be done with it (adding APIs), which in turn made web developers use it even more. On modern websites, your browser is frequently running applications that span hundreds of thousands of lines of code. This is long and gradual growth of “the web”, starting as a simple network of static pages, and evolving into a platform for rich applications of all kinds.
Web浏览器开发人员通过优化他们的执行引擎(动态编译)和扩展使用它(添加api)来应对JS使用量的增加，这反过来又使Web开发人员更多地使用它。在现代的网站上，你的浏览器经常运行着跨越数十万行代码的应用程序。从一个由静态页面组成的简单网络开始，逐渐发展成为各种丰富应用程序的平台，这是“web”漫长而渐进的成长。
More than this, JS has become popular enough to be used outside the context of browsers, such as implementing JS servers using node.js. The “run anywhere” nature of JS makes it an attractive choice for cross-platform development. There are many developers these days that use only JavaScript to program their entire stack!
不仅如此，JS已经变得非常流行，可以在浏览器环境之外使用，比如使用node.js实现JS服务器。JS“随处运行”的特性使得它成为跨平台开发的一个非常有吸引力的选择。现在有很多开发者只使用Javascript来编写他们的全栈!
To summarize, we have a language that was designed for quick uses, and then grew to a full-fledged tool to write applications with millions of lines. Every language has its own quirks — oddities and surprises, and JavaScript’s humble beginning makes it have many of these. Some examples:
总之，我们有一种为快速使用而设计的语言，然 后发展成一种完全成熟的工具，可以编写数百万行应用程序。每一种语言都有它自己的怪异——古怪和惊奇，而JavaScript简陋的开发出来使它有了许多怪异之处。
一些例子:

  • JavaScript’s equality operator (==) coerces its arguments, leading to unexpected behavior:

  • JavaScript的相等操作符(==)强制它的参数，导致意想不到的行为:

    1. if ("" == 0) {
    2. // 正确! 为什么??
    3. }
    4. if (1 < x < 3) {
    5. // x为任何值都正确!
    6. }

  • JavaScript also allows accessing properties which aren’t present:

  • JavaScript也允许访问不存在的属性
    1. const obj = { width: 10, height: 15 };
    2. // 为什么是NaN?拼写是很困难的!
    3. const area = obj.width * obj.heigth;

Most programming languages would throw an error when these sorts of errors occur, some would do so during compilation — before any code is running. When writing small programs, such quirks are annoying but manageable; when writing applications with hundreds or thousands of lines of code, these constant surprises are a serious problem.
当这类错误发生时，大多数编程语言都会抛出错误，有些会在任何代码运行之前的编译过程中抛出错误。在编写小项目时，这样的怪癖很烦人，但还可以控制；在编写包含数百或数千行代码的应用程序时，这些不断出现的意外是一个严重的问题。

TypeScript: A Static Type Checker

TypeScript：一个静态类型检查器

We said earlier that some languages wouldn’t allow those buggy programs to run at all. Detecting errors in code without running it is referred to as static checking. Determining what’s an error and what’s not based on the kinds of values being operated on is known as static type checking.
我们之前说过，有些语言根本不允许那些有bug的程序运行。在不运行代码的情况下检查代码中的错误称为静态检查。确定什么是个错误，什么不是基于值的类型操作的，这被称为静态类型检查
TypeScript checks a program for errors before execution, and does so based on the kinds of values, it’s a static type checker. For example, the last example above has an error because of the type of obj. Here’s the error TypeScript found:
TypeScript在执行前检查程序是否有错误，并且是根据值的类型来判断的，它是一个静态类型检查器。例如，上面的最后一个例子因为obj的类型而有一个错误。以下是TypeScript发现的错误:

  1. const obj = { width: 10, height: 15 };
  2. const area = obj.width * obj.heigth;
  3. Property 'heigth' does not exist on type '{ width: number; height: number; }'. Did you mean 'height'?2551Property 'heigth' does not exist on type '{ width: number; height: number; }'. Did you mean 'height'?

A Typed Superset of JavaScript

JavaScript的类型化超集

How does TypeScript relate to JavaScript, though?
TypeScript和Javascript有什么关系呢?

Syntax

语法

TypeScript is a language that is a superset of JavaScript: JS syntax is therefore legal TS. Syntax refers to the way we write text to form a program. For example, this code has a syntax error because it’s missing a ):
TypeScript是JavaScript的超集：JS的语法因此适用于 TS。语法是指我们编写文本来构成程序的方式。例如，这段代码有一个语法错误，因为它缺少a)：

  1. let a = (4
  2. ')' expected.1005')' expected.

TypeScript doesn’t consider any JavaScript code to be an error because of its syntax. This means you can take any working JavaScript code and put it in a TypeScript file without worrying about exactly how it is written.
TypeScript不会因为语法问题而认为任何JavaScript代码是错误的。这意味着你可以把任何正在运行的JavaScript代码放到TypeScript文件中，而不用担心它到底是怎么写的。

Types

类型

However, TypeScript is a typed superset, meaning that it adds rules about how different kinds of values can be used. The earlier error about obj.heigth was not a syntax error: it is an error of using some kind of value (a type) in an incorrect way.
然而，TypeScript是一个类型化超集，这意味着它添加了关于如何使用不同类型值的规则。先前关于obj.heigth的错误不是语法错：:它是以不正确的方式使用某种值(类型)的错误。
As another example, this is JavaScript code that you can run in your browser, and it will log a value:
另一个例子，这是你可以在浏览器中运行的JavaScript代码，它会打印一个值:

  1. console.log(4 / []);

This syntactically-legal program logs Infinity. TypeScript, though, considers division of number by an array to be a nonsensical operation, and will issue an error:
这个语法合法的程序会打印出Infinity。然而，TypeScript认为数字除以数组是一个无意义的操作，并会发出一个错误:

  1. console.log(4 / []);
  2. // 算术操作的右边必须是类型为'any'、'number'、'bigint'或enum类型

It’s possible you really did intend to divide a number by an array, perhaps just to see what happens, but most of the time, though, this is a programming mistake. TypeScript’s type checker is designed to allow correct programs through while still catching as many common errors as possible. (Later, we’ll learn about settings you can use to configure how strictly TypeScript checks your code.)
有可能你确实打算将一个数字除以一个数组，也许只是为了看看会发生什么，但大多数情况下，这是一个编程错误。TypeScript的类型检查器旨在允许正确的程序通过，同时还能捕获尽可能多的常见错误。(稍后，我们将学习如何配置TypeScript检查代码的严格程度。)
If you move some code from a JavaScript file to a TypeScript file, you might see type errors depending on how the code is written. These may be legitimate problems with the code, or TypeScript being overly conservative. Throughout this guide we’ll demonstrate how to add various TypeScript syntax to eliminate such errors.
如果你把一些代码从Javascript文件移到TypeScript文件中，你可能会看到类型错误，这取决于代码的编写方式。这些可能是代码的不合理，或者TypeScript过于保守。在本指南中，我们将演示如何添加各种TypeScript语法来消除此类错误。

Runtime Behavior

运行时行为

TypeScript is also a programming language that preserves the runtime behavior of JavaScript. For example, dividing by zero in JavaScript produces Infinity instead of throwing a runtime exception. As a principle, TypeScript never changes the runtime behavior of JavaScript code.
TypeScript也是一种编程语言，它保留了JavaScript的运行时行为。例如，在JavaScript中除以0会产生无穷大，而不是抛出运行时异常。原则上，TypeScript永远不会改变JavaScript代码的运行时行为。
This means that if you move code from JavaScript to TypeScript, it is guaranteed to run the same way, even if TypeScript thinks that the code has type errors.
这意味着，如果你把代码从JavaScript移到TypeScript，它保证会以同样的方式运行，即使TypeScript认为代码有类型错误。
Keeping the same runtime behavior as JavaScript is a foundational promise of TypeScript because it means you can easily transition between the two languages without worrying about subtle differences that might make your program stop working.
保持与JavaScript相同的运行时行为是TypeScript的一个基本承诺，因为这意味着你可以很容易地在这两种语言之间切换，而不用担心可能导致程序停止工作的细微差异。

Erased Types

清除类型

Roughly speaking, once TypeScript’s compiler is done with checking your code, it erases the types to produce the resulting “compiled” code. This means that once your code is compiled, the resulting plain JS code has no type information.
粗略地说，一旦TypeScript的编译器检查完你的代码，它就会删除类型以生成“编译”后的代码。这意味着一旦你的代码编译完成，生成的就是纯JS代码而没有类型信息。
This also means that TypeScript never changes the behavior of your program based on the types it inferred. The bottom line is that while you might see type errors during compilation, the type system itself has no bearing on how your program works when it runs.
这也意味着TypeScript永远不会根据它推断的类型改变你的程序的行为。最重要的是，虽然在编译过程中你可能会看到类型错误，但类型系统本身对程序运行时的工作没有影响。
Finally, TypeScript doesn’t provide any additional runtime libraries. Your programs will use the same standard library (or external libraries) as JavaScript programs, so there’s no additional TypeScript-specific framework to learn.
最后，TypeScript不提供任何额外的运行时的库。你的程序将使用与JavaScript程序相同的标准库(或外部库)，因此不需要学习额外的TypeScript特定框架。

Learning JavaScript and TypeScript

学习JavaScript和TypeScript

We frequently see the question “Should I learn JavaScript or TypeScript?“.
我们经常看到这样的问题“我应该学习JavaScript还是TypeScript?”
The answer is that you can’t learn TypeScript without learning JavaScript! TypeScript shares syntax and runtime behavior with JavaScript, so anything you learn about JavaScript is helping you learn TypeScript at the same time.
答案是，不学习JavaScript就无法学习TypeScript！TypeScript与JavaScript共享语法和运行时行为，所以你学到的任何关于JavaScript的知识都是在帮助你同时学习TypeScript。
There are many, many resources available for programmers to learn JavaScript; you should not ignore these resources if you’re writing TypeScript. For example, there are about 20 times more StackOverflow questions tagged javascript than typescript, but all of the javascript questions also apply to TypeScript.
有很多很多的资源可供程序员学习JavaScript；如果你正在编写TypeScript，你不应该忽略这些资源。例如，标记为javascript的StackOverflow问题比typescript多20倍，但所有javascript问题也都适用于typescript。
If you find yourself searching for something like “how to sort a list in TypeScript”, remember: If you find yourself searching for something like “how to sort a list in TypeScript”, remember: . The way you sort a list in TypeScript is the same way you do so in JavaScript. If you find a resource that uses TypeScript directly, that’s great too, but don’t limit yourself to thinking you need TypeScript-specific answers for everyday questions about how to accomplish runtime tasks.
如果你发现你自己正在搜索类似于“如何在TypeScript中排序列表”的内容，请记住：TypeScript是JavaScript的运行时，带有一个编译时类型检查器。在TypeScript中对列表排序的方式和在JavaScript中排序的方式是一样的。如果你找到一个直接使用TypeScript的资源，那也很好，但不要局限于认为你需要得到TypeScript特定的答案来回答关于如何完成运行时任务的日常问题。

Next Steps

下一步

This was a brief overview of the syntax and tools used in everyday TypeScript. From here, you can:
这是一个日常Typescript中使用的语法和工具的简要概述。从这里，你可以: