This is the 16th day of my participation in the August More Text Challenge. For details, see:August is more challenging

The module

JavaScript is inherently missing one feature: modules. So there’s the concept of a Module in ES6, and of course there’s the CommonJS specification in nodeJs.

intypescriptThe main module concept inModuleThe module

Modules execute in their own scope, not in the global scope; This means that variables, functions, classes, etc., defined in a module are not visible outside the module unless you explicitly export them using one of the forms export.

Conversely, if you want to use variables, functions, classes, interfaces, etc. exported by other modules, you must import them, using either of the import forms.

Modules are self-declared; The relationship between two modules is established by using imports and exports at the file level.

Modules use module loaders to import other modules. At run time, the function of the module loader is to find and execute all dependencies of a module before executing the module code.

Any file that contains a top-level import or export is treated as a module. Conversely, if a file does not have a top-level import or export declaration, its contents are treated as globally visible (and therefore visible to the module).

In large projects, you definitely need modularity, otherwise typescript naming conflicts alone are enough to cause a bunch of errors

Of course, there is a problem here if you use import or export in a file. Using TSC converted JS is not directly available in the browser because it is not supported. So you can use a WebPack conversion here

  1. Webpack typescript
  2. Webpack5 Hot Update Pack TS


Export exports

Any declaration (such as a variable, function, class, type alias, or interface) can be exported by adding the export keyword.

Method:

  • export var a:number = 10;
  • export { a };
  • export default a;

Note: Export Default can only be used once in a module, and import cannot use {}. You can write the name directly after import

example

A.t s:

function add(a:number, b:number) {
    console.log( a + b );    
}
export { add }
Copy the code

T’s: When importing files using import, you can omit the suffix of the files to be imported

import { add } from "./a";
add(4.5)  / / 9
Copy the code

In this case, running the TSC b.ts command generates two JavaScript files: A. js and B. js. To run this, use node b.js, print 9;

Optional module loading

The compiler checks to see if each module is used in the generated JavaScript. If a module identifier is used only in the type annotation section and not at all in the expression, no code is generated for require this module. Omitting unused references is good for performance and also provides the ability to selectively load modules.

The core of this pattern is import id = require(“…”) The) statement gives us access to the exported type of the module. The module loader is invoked dynamically (via require). It takes advantage of the optimization of omitting references, so modules are only loaded when they are needed.


The namespace

In the case of a large amount of code, in order to avoid various variable names conflict, you can put similar functions, interfaces, classes, etc., into the namespace

TypeScript namespaces can wrap code around objects that need to be accessed externally. Objects in the namespace are thrown via export. (This is similar to the module above, so TypeScript’s pre-1.5 name is “internal modules.”)

Namespaces in TypeScript are defined using a namespace

The difference between a namespace and a module:

  • Namespaces mainly prevent name conflicts
  • Module is short for TS external module and focuses on code reuse
  • There may be multiple namespaces in a module

The namespace

Let’s write an example:

namespace First {
    export class Animal {
        name: string = 'Joe'}}Copy the code

This is a simple namespace, outside of the space for the use of the Animal class in the space

let firstname = new First.Animal();
console.log(firstname);
Copy the code

When compiled by TSC, the namespace becomes an anonymous function like the following

var First;
(function (First) {
    var Animal = / * *@class * / (function () {
        function Animal() {
            this.name = 'Joe';
        }
        returnAnimal; } ()); First.Animal = Animal; })(First || (First = {}));Copy the code

Namespace alias

When using namespaces, you may want to simplify the name of the space by using the import alias = namespace method to get an alias

Note: The import that aliases the namespace is not the same as the import of the imported module

Give the First namespace an alias in the example above:

import f = First;

let firstname = new f.Animal();
Copy the code