typescript是什么_什么是TypeScript？

最新推荐文章于 2024-09-05 20:51:09 发布

cumian9828

最新推荐文章于 2024-09-05 20:51:09 发布

阅读量526

点赞数

文章标签：编程语言 java linux python javascript ViewUI

原文链接：https://www.freecodecamp.org/news/what-is-typescript/

版权

typescript是什么

TypeScript概述 (TypeScript Overview)

So as you are most likely aware, JavaScript is expanding its footprint everyday. It is both overwhelming and amazing what you can do with the language nowadays.

因此，您很可能知道，JavaScript每天都在扩展其足迹。如今，使用该语言所能做的一切令人难以置信且令人惊奇。

However, as more large-scale projects start to use JavaScript, the process of making the code easier to write and more maintainable becomes more and more difficult.

但是，随着越来越多的大型项目开始使用JavaScript，使代码更易于编写和更易于维护的过程变得越来越困难。

This is a problem Microsoft recognized early on and they came up with a solution: TypeScript The first version was released on October 1st, 2012.

这是Microsoft早期发现的一个问题，他们提出了一个解决方案：TypeScript第一个版本于2012年10月1日发布。

JavaScript与TypeScript (JavaScript vs TypeScript)

Okay so now that we have a general sense of what TypeScript is, let’s play a quick game of Where’s Waldo.

好的，现在我们大致了解了TypeScript是什么，让我们快速地玩一下“ 哪里的Waldo” 。

In the above screenshot, you can spot the differences between JavaScript & TypeScript in this very simple multiplication program that just prints out the product of two numbers I’ve pre-defined.

在上面的屏幕截图中，您可以在这个非常简单的乘法程序中发现JavaScript和TypeScript之间的差异，该程序仅打印出我预先定义的两个数字的乘积。

这些区别是什么？ 🤔️ (What are those differences though? 🤔️)

They’re types!

他们是类型！

So JavaScript has dynamic typing in that a variable declared as a number can be turned into a string where as TypeScript has static typing meaning you declare beforehand what type of value the variable will hold and it doesn’t change.

因此， JavaScript具有动态类型化功能，因为声明为数字的变量可以转换为字符串，而TypeScript具有静态类型化功能，这意味着您可以事先声明该变量将保持什么类型的值并且它不会改变。

In that multiplication.ts file, I’m declaring all these variables to be numbers so they cannot be changed to something else.

在那个multiplication.ts文件中，我将所有这些变量都声明为数字，以便不能将它们更改为其他名称。

In essence, TypeScript is trying to help JavaScript reach new heights and become very scalable. It can be highlighted by the following features:

本质上，TypeScript试图帮助JavaScript达到新的高度并变得非常可扩展。可以通过以下功能突出显示它：

free and open-source programming language developed and maintained by Microsoft
由Microsoft开发和维护的免费开源编程语言
strict syntactical super-set of JavaScript that compiles to plain JavaScript
JavaScript的严格语法超集，可编译为纯JavaScript
eases development of large scale applications written in JavaScript
简化了用JavaScript编写的大规模应用程序的开发
extends JavaScript by adding static types, classes, modules, interfaces and generics
通过添加静态类型，类，模块，接口和泛型来扩展JavaScript

🎉 FUN FACT TypeScript turned 7 years old on October 1st, 2019.

UN FUN FACT TypeScript于2019年10月1日满7岁。

版 (Version)

Latest stable version available is TypeScript 3.7 (as of early 2020).

最新的稳定版本是TypeScript 3.7 (截至2020年初)。

如何安装TypeScript (How to Install TypeScript)

To get started yourself, the two things you will need are the TypeScript compiler and an editor that supports TypeScript.

要开始自己，您需要做的两件事是TypeScript编译器和支持TypeScript的编辑器。

In the above screenshot, I’m installing both the compiler and TSLint (which is similar to ESLint) using npm in Visual Studio Code’s integrated terminal.

在上面的截图，我安装编译器和TSLint (其类似于ESLint使用) npm在Visual Studio代码的集成终端。

安装TypeScript (Installing TypeScript)

This command will install the TypeScript package as a dependency in your project using npm which is a popular package manager.

此命令将使用流行的软件包管理器npm将TypeScript软件包作为依赖项安装在您的项目中。

npm i typescript

To Note There are several options that npm provides depending on where you want TypeScript installed.

注意 npm提供了多个选项，具体取决于您要在其中安装TypeScript的位置。

npm i -g typescript to globally install the TypeScript package
npm i -g typescript以全局安装TypeScript软件包
npm i -D typescript to install the TypeScript package as a dev dependency
npm i -D typescript将TypeScript软件包安装为dev依赖项

将单个文件编译为JavaScript (Compiling a single file down to JavaScript)

tsc multiplication.ts

To Note You can configure this TypeScript compilation process as a custom npm script in your package.json.

注意您可以在package.json将此TypeScript编译过程配置为自定义npm脚本。

配置选项 (Configuration Options)

touch tsconfig.json

There’s also the option to create a tsconfig.json file that specifies the root files and compiler options.

还可以选择创建一个tsconfig.json文件，该文件指定根文件和编译器选项。

Within your tsconfig.json file, for example, you could specify that you want TypeScript to compile down to ES5 instead of ES6.

例如，在tsconfig.json文件中，您可以指定希望TypeScript向下编译为ES5，而不是ES6。

快速范例 (Quick Example)

In the screenshot above, you can see two files - multiplication.js and multiplication.ts.

在上面的屏幕截图中，您可以看到两个文件multiplication.js和multiplication.ts 。

This program just prints out the product of two numbers I’ve pre-defined.

该程序仅打印出我预先定义的两个数字的乘积。

multiplication.ts

let a: number = 10;
let b: number = 2;

function showProduct(first: number, second: number): void {
  console.info("Mathematical! The result is " + first * second + ".");
}

showProduct(a, b);

// Mathematical! The result is 20.

Once I’ve finished creating multiplication.ts, I can compile it down to JavaScript using the tsc command which stands for TypeScript compile.

创建完multiplication.ts ，可以使用代表TypeScript compile的tsc命令将其编译为JavaScript。

multiplication.js

var a = 10;
var b = 2;

function showProduct(first, second) {
    console.info("Mathematical! The result is " + first * second + ".");
}

showProduct(a, b);

// Mathematical! The result is 20.

Bam - we just successfully compiled TypeScript to JavaScript!

Bam-我们刚刚将TypeScript编译为JavaScript！