How to call third-party libraries in Angular

This time I will show you how to call third-party libraries in Angular, and what are the precautions for calling third-party libraries in Angular. The following is a practical case, let's take a look.

Angular’s ​​components and modules seem to be a bit incompatible with existing third-party libraries (such as lodash, moment, etc.). The main reason for this is the illusion caused by TypeScript. The three pillars of front-end are actually the same, no matter what kind of front-end framework, these third-party libraries can be used.

Below I will explain from another perspective how Angular uses third-party libraries as an experience.

1. Written in front

Before you start, you need to understand the TypeScript module system - a module refers to a module in its own scope Executed in the global scope instead of in the global scope; the relationship between modules relies on export and import. During the compilation process, the compiler also relies on this relationship to locate the files that need to be compiled.

TypeScript still publishes class libraries in the form of JavaScript files, which results in types that cannot be expressed and require a declaration file to describe the type; therefore, the declaration file has become an indispensable part of the class library.

2. Classification

Angular is developed using TypeScript language. As mentioned in the previous section, if you want a class library to be used, The requirement is whether there is a declaration document.

There is a declaration file

To distinguish whether the class library has a declaration file *.d.ts, you can confirm this from two aspects:

1. The class library comes with

After installing a dependent package from Npm, you can directly check whether the package.json of its library contains the typings node, for example, moment:

"typings": "./moment.d.ts"

2. TypeSearch retrieval

TypeScript provides a website called TypeSearch, where you can directly enter keywords to check whether the declaration file of the class library is included.

For example, lodash can be clicked in the list to jump to the npm website, and you will see a command like this:

npm install --save @types/lodash

No declaration file

This kind of situation is quite common. For example, G2 did not have a declaration file earlier. In this case, you can only write the declaration file yourself.

The project created by Angular Cli will contain a src/typings.d.ts declaration file, which will be automatically included in the global declaration definition, and it is best to write the declaration information of these class libraries in it.

Generally speaking, it is difficult to write a complete declaration file for a class library. This is too cost-effective, so we often only make an "any" for some global objects (meaning to ignore the static type). Check) can also be used, for example:

// src/typings.d.ts
declare var G2: any;

3. How to use?

The declaration file is a link, and it is still used in this way to divide how to use it.

For declaration files, there is no need to do anything extra, just use import where the module is needed, for example:

import * as moment from 'moment';
moment(); // 当前时间

No declaration file

It is important to look at what to do when there is no declaration file. As mentioned earlier, using any to indicate ignoring static type checking means that the user cannot enjoy the pleasure of intelligent prompts brought by the declaration file.

Like G2, we can use it directly anywhere in the project, but it can only recognize G2 variables, and the methods or properties of the instance are agnostic.

// app.component.ts
const g2 = new G2();
g2. // 输入 `.` 后是不会有任何方法或属性

In addition, TypeScript will not perform any type check on G2 during the compilation process. Whether G2 really exists can only be determined by yourself. For Angular, these modules need to be explicitly loaded in the scripts node of .angular-cli.json.

// .angular-cli.json
"scripts": [
  "../node_modules/@antv/g2/dist/g2.min.js"
]

TypeScript is still JavaScript code after compilation. If you do not manually load G2 related JavaScript files, it will naturally provide an error that G2 is not found during the running process.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Summary of how to use state objects in vuex

##actual usage analysis of react-redux plug-in project

The above is the detailed content of How to call third-party libraries in Angular. For more information, please follow other related articles on the PHP Chinese website!