Angular's components and modules seem to be a bit out of place with the existing third-party library (for example: lodash, moment, etc.), which is a big reason for this is the illusion caused by TypeScript. The front ends of the three-legged tripod are actually the same. No matter which front-end framework it is, these third-party libraries can be used.
Below I will explain from another perspective an empirical approach to how Angular uses third-party library.
1. Write it in front
Before you start, you need to understand the TypeScript module system - modules refer to being executed in their own scope, not in the global scope; modules rely on export and import to establish relationships. 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 will cause the types to be expressed and need to be described in combination with the declaration file; 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 file.
Declaration file
To distinguish whether the class library has a declaration file *., you can confirm this from two aspects:
1. The library comes with its own
After installing a dependency package from Npm, you can directly check whether the library contains typings nodes, such as moment:
"typings": "./"
2. TypeSearch search
TypeScript provides aTypeSearch For websites, you can directly enter keywords to check whether the declaration file of this type of library is included.
For example, lodash can be clicked in the list and will jump to the npm website, and you will see a command like this:
npm install --save @types/lodash
Non-declared file
This kind of situation is quite common. For example, there is no declaration file earlier in G2, and in this case, you can only write the declaration file yourself.
Projects created by Angular Cli will contain a src/ declaration file, which will be automatically included in the global declaration definition, and it would be better to write the declaration information of these class libraries here.
Generally speaking, it is difficult for you to write a complete declaration file for a class library, which is too unfair for cost. Therefore, you often only do any for some global objects (indicating that the static type check is ignored) as well, for example:
// src/ declare var G2: any;
3. How to use it?
Declaration documents are bonds, and they still divide how to use them in this way.
For declaration files, there is no need to do anything extra, just use import where modules are needed, for example:
import * as moment from 'moment'; moment(); // Current time
Non-declared file
It is important to look at how to do it when there is no declaration file. As mentioned earlier, using any to indicate ignoring static type checking, which means that the user cannot enjoy the smart prompt pleasure brought by the declaration file.
Like G2, we can use it directly anywhere in the project, but we can only recognize G2 variables, while the methods or properties of the instance are agnostic.
// const g2 = new G2(); g2. // After entering `.`, there will be no methods or attributes
In addition, there will be no type checks on G2 during the compilation process of TypeScript. Whether G2 really exists can only be controlled by yourself. For Angular, these modules need to be loaded explicitly on the scripts node of .
// . "scripts": [ "../node_modules/@antv/g2/dist/" ]
TypeScript still still has JavaScript code after compilation. If G2-related JavaScript files are not loaded manually, an error that G2 is not found during operation will naturally be provided.
Summarize
From the perspective of TypeScript, you will feel differently, just a simple non-reliable but effective description. I hope those who know more will show mercy.
There is no intention to blackmail G2 here, and now G2 has provided the declaration file.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.