Using Export-Import in Typescript?2 min read

Let’s dive in

Following the previously published article, i’ll be writing about Export-Import modules in Typescript.

Since majority of the apps are done in component way, we need a way to reuse bunch of stuff. So we don’t repeat ourselves.

Basically, that means exporting stuff which we’ll need and importing those stuff into components where we need them!

That said Export – Import is pretty straightforward.

EXPORTING

First you need to create a file which will be used for exporting functions or variables, called i.e. “exportFile”.

//exportFile.ts

We write functions or variables which are going to be exported:

let stringVariableName = ‘some string here’;

let function1 = () => {
console.log(‘Function 1 logged’);
}

let function2 = () => {
console.log(‘Function 2 logged’);
}

Lastly, we prepare them for export like this:

module.exports.stringVariableName = stringVariableName;
module.exports.function1 = function1;
module.exports.function2 = function2;

Shorter way of writing above module.exports:

module.exports = {
stringVariableName = stringVariableName,
function1 = function1,
function2 = function2
};

OR

export let stringVariableName = “some random string text”;
export let function1 = () => { console.log(‘Function 1 logged’) };
export let function2 = () => { console.log(‘Function 2 logged’); };

IMPORTING

First create a file in which we will import all functions or variables exported in “exportFile”, call it “importFile”.

//importFile.ts

Import functions or variables from exportFile.ts

let exportedFunctions = require(‘./exportFile’); // older, ES5, type of writing
import { stringVariableName, function1, function2 } from ‘./exportFile’ // newer ES6 – named exports

After importing, use them:

[syntax_prettify linenums=”linenums”]
console.log(‘String from exported variable is: ${exportedFunctions.stringVariableName}’);
exportedFunctions.function1();
exportedFunctions.function2();

Shorter way of the same functionality:

console.log(‘String from exported variable is: ${stringVariableName}’);
function1();
function2();

It’s also important to clarify two types of export:

DEFAULT EXPORT VS NAMED EXPORT

DEFAULT EXPORT

Has only one default export per file, i.e.:

export default class ExportClass { /* … */ } //exportFile.ts
import ExportClassWannabe from "./exportFile"; //importFile.ts

DRAWBACK:

Can be a randomly assigned identifier.

Meaning, when importing we could name it anyhow and it doesn’t have to match our ExportClass name.

NAMED EXPORT

Can have multiple exports per file.
Plus throws an error when attempting to import something that doesn’t exist in the module.
Each import needs exports to be surrounded with braces:

export class ExportClass {/*…*/} //exportFile.ts
export class ExportAnotherClass { /*… */ } //exportFile.ts

import { ExportClass, ExportAnotherClass } from “./exportFile”;

TIP:
Use named export.

HINT:
Default export is just a named export with the name default.

I hope this was clear and beneficial. Stay sharp until next week and more posts!