Importing and Exporting with Static Types

Export

The export keyword is used to export variables, functions, classes, and interfaces from a module. By using the export options available in TypeScript, we can ensure the modularity of code and compatibility with a greater JavaScript environment. A module can be declared by using the export keyword. The syntax for the declaration of the module is given as:

Exporting a Declaration

Any kind of declaration like variable, function, interface, or type alias can be exported by adding the export keyword.

File Name: stringValidate.ts

File Name: zipCodeValidate.ts

Export Statements

Export statements are handy statements when exports are required to be renamed for consumers. So, we can write the above example as:

Re-exports

In TypeScript, modules extend other modules and partly reveal some of their features. A re-export will neither introduce a local variable nor import locally. In that case, some features can be re-exported either using their original name or we can rename the original name to re-export.

Example

Module creation: Module.ts

Create a re-exports module: re-export.ts

Explanation

In the below snippet, the name of the Multiply export class will be changed to plus using {Multiply as plus}. The re-exporting is useful in assigning a more meaningful name to an export that increases the readability of the program.

We will access the module in another file by using the import keyword: app.ts

Explanation

To compile and execute the above module, we will open the terminal and go to the location where you stored the project. Now, we will type the following command in the terminal window.

Output

Default Exports

In this section, we will make use of default exports to export a value from a module that sets a specific export to the assumed import from a module. This will simplify the code when we import the files.

Every file can have at most a single default export. To change your export to a default export, add the following default:

Now, we can do the same in the src/Vector2.ts file:

To import the default exports, save the files and open the src/Vectors.ts file and change its contents to the following:

Explanation

For both imports, we are just giving a name to our import, instead of destructuring to import a specific value. This will automatically import the default export of each of the modules. Each module that has a default export also has a special export known as default that can be used to access the default exported value. We can also use the named export to use the export ... from shorthand syntax.

Now, we are re-exporting the default export of each module under a specific name.

Import

The import keyword allows us to import a piece of code that has been exported by another module. Importing a module in TypeScript is just about as easy as exporting from a module. By default, all the modules that we import statically get added to the initial bundle. The file/module name will be specified without an extension. can write the above example as:

Import a Single Export From a Module

We can import a single export from a module by using the following example:

Imports can also be renamed as given in the following example:

Explanation

In the above code snippet, we have imported a single export zipCodeValidate from zipCodeValidate module using the import keyword.

Import the Module Into a Single Variable, and Use It to Access the Module Exports

We can import a module into a single variable, and use it to access the module exports by using the following example:

Import a Module for Side-effects Only

Some modules set up some global state that can be used by other modules. These modules cannot have any exports, or the consumer is not interested in any of the exports. To import this kind of module, we can use:

Importing Types

With the older version of TypeScript 3.8, we can import a type using import only. With TypeScript 3.8, we can import a type using the import statement or using the import type.

Key Takeaway

Any explicitly marked type import has to be removed from JavaScript, and tools like Babel can make better assumptions about our code via the isolatedModules compiler flag.