我们来看看不同版本的角，以及它们的不同反应，以及如何在你的Angular项目中使用TS。

获得高级管理人员手册的重要趋势、技巧和战略，以竞争和赢得数字经济。

每天都创建新的JavaScript框架和库。这就产生了一个难题:在启动项目时应该使用哪种解决方案?

我在过去几年的web开发经验主要包括AngularJS和主干。js框架。角度、jQuery和传统的JavaScript都在我的舒适区。当我和打字稿面对面的时候，我觉得新的、可怕的、令人困惑的。我想让你的转变更容易!

本文的目的是为您提供对TypeScript的理解，特别是当您来自AngularJS web开发背景时。为此，我们将首先介绍TypeScript。然后我们将讨论不同版本的角度和角度与反应之间的差异，并着眼于您需要了解的内容，以便理解JavaScript工具的景观类型。最后，我们将通过一个具体的TypeScript示例来研究语法和结构。

第1部分:打字稿介绍。

TS是什么?

TypeScript是由微软开发和维护的一种免费的开源编程语言。它是JavaScript的一种严格的语法超集，在语言中添加了可选的静态类型。另外，看看我们写过的一些其他的出版物，比如排版或将企业应用程序转换为打字稿。

TS与JS相比如何?

自从角2项目决定采用TS以来，TS已经获得了很大的人气。TypeScript所做的事情与LESS或SASS为CSS所做的类似。它们是它的超集，这意味着您编写的每个JS代码都是有效的TypeScript代码。另外，您还可以使用其他附加组件到语言，代码将是有效的JavaScript。您甚至可以设置要生成代码的JS版本。

使用TypeScript可以帮助避免在编写JavaScript代码时遇到的麻烦。TypeScript实际上可以在不保存文件的情况下报告问题，并利用类型系统来帮助您更快地编写代码(这将导致一个真正出色的编辑经验)。

但是，在JavaScript中设置一些东西会更快。缺少一个类型系统会使更改的内容变得灵活和容易。但它也能让你更容易打破。JavaScript是更加灵活。你必须记住，一个类型系统的主要目的是使它很难被打破。如果TypeScript是Windows，那么JavaScript就是Linux。

正如已经说过的，TypeScript是一种超集的JavaScript。这意味着，如果需要的话，可以很容易地将JavaScript转换为TypeScript。

为什么我们还要使用打字稿?

TypeScript为表带来了几个新特性。其中最值得注意的是类、接口和编译时类型检查。

最好在下列情况下使用打字稿:

你有一个很大的代码库。当超过一个人在一个项目上工作并且代码基数很大时，TS将帮助你避免常见错误。

您的开发人员来自强类型语言。当开发人员已经有了诸如c++和Java等语言的经验，并且不想仅仅处理JavaScript。

一个框架推荐使用TS，比如角2+。

你真的需要更快的性能。

第2部分:AngularJS vs Angular 2, 4, 5

那么这些版本号的处理方法是什么呢?角j，角2，角4是什么?

角JS在2010年由谷歌发布。由于它的特性集，它很快就流行起来了，不同版本的角JS被发布，比如1.1、1.2等等。

几年后，谷歌的工程师彻底重写了这个框架，以满足当今丰富的客户端应用程序的需求。他们在TypeScript(不向后兼容)中创建了一个新版本的AngularJS，并在2016年发布了角2作为框架。他们把它命名为角2，去掉了JS后缀。

几个月后，在角2的发布之后，引入了新特性，并完成了各种bug修复，新版本被发布为角4。没有角3。

角3怎么了?角代码库被分解成部分/库，如核心、编译器、动画、路由器等，每个部分都可以有自己的版本。路由器库达到了版本3，其他的仍然是2.3。下一个版本是2.4，但是对于路由器库的2.4版本是不正确的，所以为了避免混淆，他们跳过了版本3和角4。

当我们说角的时候，它的意思是角(2+)当我们说AngularJS时，它的意思是角JS(1。x)看这里的角产品网站。

第3部分:Angular vs. React

AngularJS和角2/5是非常不同的;即使是经验丰富的AngularJS用户也可能会感到困惑。但是，另一个非常流行的反应是什么呢?这两个比较起来如何?

角2可以给你更多的设施，而不是反应。它可以为您提供更多的选择，在JavaScript框架中使用增强的依赖注入和服务。

React是一个用来解决UI问题的库。这使得它的尺寸比角度小，也更简单，所以它的学习曲线是快速的。它的区别之一是使用JSX的能力，尽管它不是必需的。JSX是一个非常重要的元素，它有助于组件的简单声明和创建。

但是，使用JSX意味着没有HTML。因此，那些在HTML中很自然的配置，比如样式(CSS)，添加了更多的概念来学习。另外，由于没有明确的关注点分离(JS和HTML)，因为所有东西都在JSX中，没有开发技能的设计人员可能需要开发人员的帮助来组织他们的工作、文件、CSS等等。

首先，你必须明白反应是一个库，而角2/5是一个框架。当我们使用反应时，我们肯定需要使用其他工具来完成我们需要的许多任务。

反应允许我们选择我们希望从几个选项中工作的工具集，而角度已经包含了我们需要的所有东西，集成到框架中。如果这种自由被认为是积极的，那么这种差异就有利于反应。但是，它也可以是偏向角的，因为反应给我们的自由会使我们很难决定使用什么，不使用什么，为什么。

角5有一个以html为中心的设计，而React有一个以javascript为中心的设计。这可以使角度稍微复杂一点。

角5从角1和反应中学到了很多;这使得它们采用了这两种技术的一些最佳特性。

虽然角5在角1上的性能有了很大的提高，但是它的性能仍然更高，更快，更好地使用内存，并且更容易使用。

反应和角2之间的决定不容易，而且可能没有单一的答案或真相。一个世界的“粉丝”和另一个世界的“粉丝”之间会有明显的区别。

我说，如果团队没有任何技术经验，也许最好的选择就是使用反应。它需要学习一些其他的框架和补充的库。但是由于这个库的简单性，它需要的时间比角度要少，而且要达到高质量的效果。

第4部分:让我们开始:角2/5和打字稿。

对我来说，最困难的是在角1和角2/5之间转换。我的大脑就是这样工作的。一旦我对某件事感到很舒服，我就很难转换到新的事物中去学习去理解它。让我们来讨论一下打字稿的基础知识，以及角度5如何工作和利用它。

语法

最让我困惑的是语法。因为我主要针对的是那些已经有了角1的经验的人，让我们直接进入，让我展示一下在打字稿中是怎么做的。

打字稿有三种基本类型:

let confirmed: boolean = false;

let totalTasks: number = 42;

let employeeFirstName: string = "Chris";

但是，如果变量是从显式文本派生出来的，则可以省略类型注释。

let confirmed = false;

let totalTasks = 42;

let employeeFirstName = "Chris";

当不可能知道的时候，就会有“任何”类型。

let notReallySure: any = 4;

notReallySure = "maybe a string";

notReallySure = false; // now boolean

对于集合，有类型化数组和泛型数组。

let list: Array<number> = [1, 2, 3];

Enumerations

enum Cars { Ford, Chevy, GMC };

let c: Cars = Cars.Ford;

现在的功能。函数是一等公民，支持lambda“胖箭头”语法，并使用类型推断。

let f1 = function (i: number): number { return i * i; }

界面结构;任何具有属性的东西都与接口兼容。

interface Car {

brand: string;

// Optional properties, marked with a "?"

type?: string;

// And of course functions

move(): void;

}

现在，实现汽车接口的对象可以被当作汽车来对待，因为它具有名称和移动属性:

let newCar: Car = { brand: "Chevy", type: "SUV", move: () => { } };

当然，打字稿还有很多。但是这些基本的基础知识将帮助您理解JS和TS之间的一些区别。

现在让我们回到角2/5，开始。

对于快速的角度开发，我们将使用角CLI(在您开始安装角CLI之前，请确保您已经安装了最新版本的节点。js在您的机器上)。

Install Node.js.

Install Angular CLI. 进入终端，运行 npm install -g @angular/cli

现在我们可以使用下面的命令创建一个新的角度项目(我们使用ng来访问角CLI): ng new hello-world.

现在转到项目目录:cd hello-world

并使用命令: npm install.

然后用ng文件运行它。最后一个命令编译我们的应用程序并将其托管在一个轻量级服务器上。

现在打开浏览器，转到。

Congrats!

结构

现在，我们来谈谈这个项目的结构。

你的应用程序生活在src文件夹中。所有的角度组件、模板、样式、图像和任何其他应用程序都需要到这里。此文件夹之外的任何文件都是用来支持构建您的应用程序的。

应用程序:应用程序目录是我们定义角项目的构建块，比如模块、组件、服务等。

资产:顾名思义，这个目录包含应用程序的所有静态资产，如图像等。

环境:环境目录保存我们的特定于环境的设置，例如用于开发、测试、分段等的不同配置文件。

文件

现在到文件。

我们大多数人都知道指数。html文件。对于那些不这样做的人，它是我们应用程序的登录页面或主页，这是我们的角度应用程序引导的地方。

主要。ts文件是用来引导角模块的主要类型文件。对环境的检查也在这里执行，如下面的代码片段所示。

模块类是从app.module导入的。应用程序目录中的ts文件。正如我之前说过的，这是我们的角应用的构建块，包括模块，组件，组件样式，组件模板，服务，等等。

现在我们来看看这个app.module.ts文件。这里我们声明我们的角模块，@NgModule decorator用于初始化角应用程序的不同方面。

当app.components.ts文件简单地定义一个角组件时，我们也在这里定义了我们的approot选择器(见下面)。

最后,app.component.html。这是应用程序组件的模板文件，这表示我们组件的可视部分，在浏览器中呈现。

现在我们知道，我们在最后一部分浏览器中看到的所有可视组件实际上来自我们的app.component.html模板。

第五部分:结论

总而言之，不管你是否使用打字稿，你都可以试着去开发你自己的观点。它有一个学习曲线，但是如果你已经知道了JavaScript，它将会非常顺利。从角度1的角度来看，角的变化量很大。x, MV*模型，到我们今天所知道的框架。

转换的目的是为了有效地支持JavaScript的新特性，以及同步最新的web开发标准。当与TypeScript一起使用时，它使用的是对类型的支持，与ide的集成，如Visual Studio代码，以及许多其他有用的特性。

在这个过程中，角1到2的升级包含了许多破坏的变化。然而，升级到未来版本的角度预计将是平滑的，很少或没有中断的变化。角度框架将继续发展，以支持更多的特性，使开发人员的工作更容易。

阅读本指南，了解关于RPA的所有知识，以及它如何帮助您管理和自动化您的流程。