|
|
Posted on 10/22/2018 5:21:45 PM
|
|
|
In the ECMAscrip{filtering}t 2015 standard, Javascrip{filtering}t adds the concept of modules. Typescrip{filter}t also follows this concept.
1. Import and export of modules
Modules are executed in their own scope, not in the global scope; This means that variables, functions, classes, etc. defined in a module are not visible outside of the module unless you explicitly export them using one of the exports. On the other hand, if you want to use variables, functions, classes, interfaces, etc. exported from other modules, you must import them, using one of the imports.
Modules are self-declaring. In Typescrip{filter}t, the relationship between the two modules is established by using import and export at the file level. Here's a basic example:
animal.ts
app.ts
In the example above, an Animal-like is declared in the animal.ts and exported via export. In the app.ts, specify the relative file path and import it through import to use the Animal class.
Because Javascrip{filter}t has two different module reference methods, when compiling to Javascrip{filter}t, you can specify the compiled module reference method through the Typescrip{filtering}t configuration file tsconfig.json
The following are the contents of the Javascrip{filter}t file compiled in different ways
commonjs
amd
2. Renaming of import and export
The name of the internal object that is used by default when importing and exporting modules. Typescrip{filter}t also supports renaming before and after export. Modify the example above
animal.ts
app.ts
When importing and exporting, modules are renamed using the as keyword.
One thing to note here is that when the exported module is renamed, the module name before the import should be the same as the exported renamed module name, otherwise the compiler will prompt an error message. For example, if the exported module is renamed to ANI, the module name before the as keyword must be ANI when importing this module in another file app.ts.
Alternatively, if you don't know the name of the imported module, you can replace it with an * sign
In the example above, if you rename all modules replaced by the * sign to animal_module, you can access all the content exported from the module through animal_module object.
3. Export and export multiple objects
Normally, multiple types of objects are defined in the module and then exported together. There may also be multiple modules in the import
animal.ts
app.ts
When exporting, you can reassemble the type object you want to export into a JSON object and then export it. Once imported, the contents can be accessed via renamed module objects.
4. Default export
There can only be one default export for a module
animal.ts
app.ts
In the example above, the Animal class is exported using the default keyword. Unlike normal imports, when importing default export modules, you can directly specify the name of the imported module without enclosing it in curly braces with {}.
5. Dynamic loading module
Because in Javascrip{filter}t, there are two ways to load modules: CommonJS and AMD. When using Typescrip{filter}t, you need to write different code depending on the configuration content of the final compilation to generate Javascrip{filter}t.
Module file animal.ts
CommonJS way reference:
app.ts
AMD way quote:
app.ts
|
Previous:BonusCloud Activation Code Grab Tool [with Source Code]Next:Newcomer report, how did MB get it?
|
