TypeScript is a natural extension of JavaScript that’s used in many projects in place of JavaScript.
However, not everyone knows how it actually works.
In this article, we’ll look at how to define and use modules.
Using Modules
Almost all apps can’t be contained in a single file.
Therefore, we need to put our code in modules so that we can organize the code.
This way, we can break our code into manageable chunks.
JavaScript modules can be used with TypeScript projects.
And they should be used since they’re now standard in JavaScript.
Node.js also has support for JavaScript modules since version 12, so we can use them without adding any transpilation in Node projects as well.
Creating a JavaScript Module
To create a module, we just have to create a JavaScript file.
Then if we want to make a member be importable, then we put the member at the top level and use the export keyword to expose it to the outside.
For instance, we can write:
export const name = "joe";
This will make our name variable be importable from another module.
This kind of export is called a named export since we’ve to specify the name of the member explicitly when we import it.
We can also do a default export.
To do that, we can use the default keyword:
export default {
name: "james"
};
We can only have default export in any module.
We can name it anything when we import this in another module.
Using a JavaScript Module
To use an export member of a module, we’ve to import it.
For instance, if we want to use the following exported member:
export const name = "joe";
We can write:
import { name } from "./module";
console.log(name);
We used the import keyword with the member of the module in curly braces to import it.
Then we can reference it anywhere inside the module.
To import a default export, we skip the curly braces.
For instance, if we have:
export default {
name: "james"
};
Then we can import the object by writing:
import obj from "./module";
console.log(obj.name);
We skipped the curly braces in the import statement and log the value after the import.
The ./ tells us that we’re searching for a path relative to the current module.
So we should include it for relative imports.
If we skip the ./ , then we indicate that we’re importing from a dependency rather than a module in the local project.
The most common location for module dependencies would be in the node_modules folder.
Defining Multiple Named Members in a Module
We can define multiple named members in a module.
For instance, we can write:
export const name = "joe";
export const age = 20;
We exported the members name and age from the module.
Then we import then by writing:
import { name, age } from "./module";
console.log(name, age);
We then import them by separating them with a comma.
With named members, we can selectively import the members that we want.
This way, we don’t have to import things that we don’t use.
Conclusion
In a TypeScript project, we’ve to use modules to make them organized into small, manageable chunks.
We can just import and export members as we wish.
And we don’t have to expose everything to the outside or import everything.
