angular2创建应用_如何在Angular 2+应用程序中使用JavaScript库

angular2创建应用

Do you remember when you were learning AngularJS (version 1), and tutorials kept telling you that you don’t need to add JQuery into your project?

您还记得当您学习AngularJS(版本1)时，教程不断告诉您不需要在项目中添加JQuery吗？

That hasn't changed - you don’t need to add JQuery to your Angular 2+ project. But if, for any reason, you might need to use some JavaScript libraries, you need to know how to use them in Angular. So, let’s get started from zero.

这没有改变-您不需要将jQuery添加到Angular 2+项目中。 但是，由于某种原因，如果您可能需要使用某些JavaScript库，则需要知道如何在Angular中使用它们。 因此，让我们从零开始。

I’m going to add underscore.js to a project and show you how it works.

我将在 项目中 添加 underscore.js 并向您展示其工作方式。

1.使用Angular CLI创建一个新项目 (1. Create a new project using Angular CLI)

If you don’t already have CLI installed on your machine, install it. After installation, create a new project (if you don’t already have one).

如果您的计算机上尚未安装CLI， 请安装它 。 安装后，创建一个新项目(如果您还没有一个项目)。

ng new learning

新的学习

Now you will have a new Angular project named “learning”.

现在，您将有一个名为“ learning ”的新Angular项目。

2.将软件包安装到您的项目中 (2. Install the package into your project)

Go to the project we just made:

转到我们刚刚完成的项目：

cd learning

光盘学习

Use your preferred package manager to install the library you’re going to use; I use npm to install underscore.js.

使用您首选的软件包管理器来安装要使用的库； 我使用npm安装underscore.js 。

npm install --save underscore

npm install-保存下划线

3.将库导入Angular(TypeScript) (3. Import the library into Angular (TypeScript))

We are writing code in TypeScript, and we should follow its rules. TypeScript needs to understand underscore.js.

我们正在用TypeScript编写代码，并且应该遵循其规则。 TypeScript需要了解underscore.js 。

As you might know, TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript has its own syntax, function and variables can have defined types. But when we are going to use an external library such as underscore, we need to declare type definitions for TypeScript.

如您所知，TypeScript是JavaScript的类型化超集，可编译为纯JavaScript。 TypeScript具有自己的语法，函数和变量可以具有定义的类型。 但是，当我们要使用下划线之类的外部库时，我们需要为TypeScript声明类型定义。

In JavaScript, the type of arguments are not important and you will not get an error while you’re writing code. But TypeScript won’t let you to give an array to a function that accepts a string as input. Then here is the question: should we rewrite the underscore.js in TypeScript and define types there?

在JavaScript中，参数的类型并不重要，并且在编写代码时不会出现错误。 但是TypeScript不允许您将数组提供给接受字符串作为输入的函数。 然后是一个问题：我们应该在TypeScript中重写underscore.js并在其中定义类型吗？

Of course not - TypeScript provides declaration files (*.d.ts) which define types and standardize a JavaScript file/libraries for TypeScript.

当然不是-TypeScript提供声明文件(* .d.ts) ，该文件定义类型并标准化TypeScriptJavaScript文件/库。

Some libraries include a typing file and you don’t need to install TypeScript’s type destination for them. But in case a library does not have a  .d.ts file, you need to install it.

一些库包含一个键入文件，您无需为其安装TypeScript的类型目标。 但是如果库中没有.d.ts文件，则需要安装它。

We just need to find and import underscore.js type definition file. I suggest that you use Type Search to find the declaration file for the libraries you need.

我们只需要找到并导入underscore.js类型定义文件。 我建议您使用类型搜索来查找所需库的声明文件。

Search for underscore in Type Sceach and it redirects you totypes/underscore. Install the declaration file using the following command:

在Type Sceach中搜索underscore ，它将您重定向到type / underscore 。 使用以下命令安装声明文件：

npm install --save @types/underscore

npm install --save @types/underscore

4.将类型声明导入Angular应用 (4. Import type declaration into Angular app)

Let’s say you’re going to use underscore in your app.component.ts file. Open the app.component.ts by your IDE and add the following code in the top of the file:

假设您要在app.component.ts文件中使用下划线。 通过IDE打开app.component.ts ，并在文件顶部添加以下代码：

import * as _ from 'underscore';/*** OR simply:* import 'underscore';*/

The TypeScript in that component now understands _ and it easily works as expected.

该组件中的TypeScript现在可以理解_并且可以轻松按预期工作。

问题：如何使用在TypeScript和Angular中没有类型定义(* .d.ts)的库？ (Question: How to use a library which does not have type definition (*.d.ts) in TypeScript and Angular?)

Create it if the src/typings.d.ts does not exist. Otherwise open it, and add your package to it:

如果src/typings.d.ts不存在，请创建它。 否则，将其打开，然后将其添加到其中：

declare var

In your TypeScript, now you need to import it by the given name:

在您的TypeScript中，现在您需要使用给定名称导入它：

import * as yourPreferedName from 'yourLibrary';yourPreferedName.method();

结论 (Conclusion)

To wrap up, let’s make a simple example to see a working example of _. Open app.component.ts and inside the appComponent class write a constructor which returns the last item of an array using underscore's _.last() function:

总结一下，让我们做一个简单的示例，看看_的工作示例。 打开app.component.ts并在appComponent类中编写一个constructor ，该constructor使用下划线的_.last()函数返回数组的最后一项：

...
import * as _ from 'underscore';
...
export class AppComponent {
  constructor() {
    const myArray: number[] = [9, 1, 5];
    const lastItem: number = _.last(myArray); //Using underscore
    console.log(lastItem); //5
  }
}

If you open your Angular app now, you will get 5 in the console, which means we could correctly add underscore into our project and it’s working as expected.

如果现在打开Angular应用程序，控制台中将显示5 ，这意味着我们可以在项目中正确添加underscore并且按预期方式工作。

You can add any JavaScript libraries to your project just by following the same steps.

您可以按照相同的步骤将任何JavaScript库添加到项目中。

---

---

You can follow me for more articles on technology and programming.

您可以关注我以获取更多有关技术和编程的文章。

翻译自: https://www.freecodecamp.org/news/how-to-use-javascript-libraries-in-angular-2-apps/

angular2创建应用