Do you think IIT Guwahati certified course can help you in your career?
Introduction
Have you ever wondered how TypeScript understands where to locate the files you're importing? When you bring in a module in TypeScript, it has a way to figure out which file or code bit you mean. This way of finding the correct module is its "module resolution."
This article will teach us about Module Resolution and Module Resolution Strategies in TypeScript.
TypeScript
TypeScript is a better version of JavaScript made by Microsoft. It offers additional tools to make coding neat and reduce mistakes. In TypeScript, you can set if a variable is a number or text, which allows you to find problems earlier. It streamlines how we make objects and handle large tasks. It also supplies tools for more accessible coding. While it has new stuff, it can still run regular JavaScript. It's an improved JavaScript that helps developers make stable apps with fewer errors.
Developers like TypeScript for a few reasons:
It offers excellent tools for big projects.
Its documentation is evident because of "type definitions."
It helps spot problems in code early before they get big.
It makes coding more straightforward and more reliable.
Modules in TypeScript
Modules help split your code into smaller parts, making it easier to handle and use. Over time, there were many ways to use modules in JavaScript. TypeScript, like an improved version of JavaScript, came up with a common way to use these modules. It combined ideas from the official rules for JavaScript (ECMAScript) to make one system. TypeScript lets you create and use modules straightforwardly, much like the ES Module. It enables coders to decide how the final code should work best with tools like Node.js, require.js, or others like ES6.
Module Resolution
Module resolution is how compilers or interpreters determine where to find the referenced modules in your code. When coding, particularly in today's JavaScript and TypeScript, you typically split your work into smaller modules.
Module resolution is how the compiler figures out what a specific import means. For example, when you come across the line: import { a } from "moduleA," the compiler looks into "moduleA" to figure out what 'a' actually means.
Imagine having puzzle pieces scattered across different boxes. Choosing the exact piece from the correct box might be challenging. TypeScript uses specific guidelines to locate and join these pieces smoothly. These guidelines are called "Module Resolution Strategies."
Relative and Non-relative module imports
Relative Module imports
Relative imports specify a module's path based on its location relative to the current file. They often start with ./ or ../, indicating the current directory or one directory up, respectively.
For example, using import { myFunction } from './utils' means you're getting from the "utils" file located in the same folder as the file you're adding it to. We use these imports mainly for modules within our project or application.
Non-relative Module imports
Non-relative imports don't rely on the current file's location. Instead, they point to a fixed path, often referring to modules in the node_modules directory or other predefined base paths.
An example would be 'import React from 'react' which retrieves the React module from the node_modules directory. These imports are standard for external libraries or when using predefined path shortcuts in a project's configuration.
Module Resolution Strategies
There are two methods of module resolution strategies: Node and Classic. You can choose the method you need using the "moduleResolution" setting.
Classic
The Classic method for finding modules in TypeScript works like this: It looks precisely where you tell it for direct or "relative" paths. For more general or "non-relative" names, it starts looking in the current folder and then keeps checking the folders one level until it finds the module.
Relative Import: This means you give a specific nearby path. For instance, if you have a file named Library.ts in the /root/src/folder/ directory and you include the line "import { book } from './Collection' " the system will search for:
Non-Relative Import: This means you mention the module's name. So, in the same Library.ts file, if you put "import { book } from 'Collection' " the system will look in:
/root/src/folder/Collection.ts
Then, /root/src/Collection.ts
Next, /root/Collection.ts ... will keep moving up the directories until it finds the 'Collection' module.
The classic method checks the specific location you provide. If you don't specify one, it begins at your current spot and searches until it locates the module.
Node
The "Node" method tries to imitate how Node.js identifies its modules. In Node.js, you usually bring modules with a function called "require." If you point to a specific location with "require," like in /root/src/Library.js with the line var book = require('./Collection'), Node.js looks in a sequence of places:
It first checks if /root/src/Collection.js exists.
Next, it looks in /root/src/Collection for a "package.json" that directs to a main module. For example, if a "package.json" states the main module is “lib/MainCollection.js," it will turn to that.
If not, it checks if /root/src/Collection has an "index.js," automatically treated as the chief module for that directory.
Node.js sifts through "node_modules" folders for module names without a set location. It starts at the current file's location and ascends, folder by folder, inspecting each "node_modules" until it locates the desired module.
How TypeScript resolves modules
When TypeScript searches for a module, it acts a lot like Node.js. But instead of only searching for JavaScript files, TypeScript also searches for its particular file types, such as .ts and .tsx. The package.json file has a "types" section pointing to the main file it should use.
For instance, if you import { x } from "./exampleModule,"TypeScript will search several places within your project, trying different file types and paths, including looking inside the node_modules folder.
Remember, Node.js does something similar but looks mainly for .js files and other details. In essence, TypeScript has an organized way to look for modules. And even if it seems like many steps, it's simple enough to do what Node.js does. It checks a few places and then moves up to check broader locations only a few times.
Frequently Asked Questions
How does TypeScript define module resolution?
The method by which the TypeScript compiler chooses where to locate an import statement and how to load a module file is known as module resolution in TypeScript. Using import statements in your code helps TypeScript in finding the appropriate module.
What are TypeScript's two primary module-resolving techniques?
TypeScript supports ECMAScript (ES6) and Node.js (CommonJS) module resolution as its two main module resolution methods. The target environment and the employed module system determine which tactics should be adopted.
What is the procedure for Node.js (CommonJS) module resolution?
The CommonJS module system is the foundation for Node.js module resolution. When employing this technique, TypeScript searches for modules in files and folders similar to Node.js, such as node_modules and.js or.ts files.
How and when is ECMAScript (ES6) module resolution used?
It is used when you want to find relative file paths and file extensions (such as.js ,.ts, or.tsx) and TypeScript searches for modules. Node_modules directory searching is not required.
Can TypeScript be used to configure the module resolution strategy?
The module and module resolution parameters in your tsconfig.json file allow you to customize TypeScript's module resolution strategy. While the module resolution option controls how modules are resolved (e.g., the node for Node.js or classic for classic TypeScript resolution), the module option allows you to select the module system (e.g., CommonJS, ES6).
Conclusion
In this article, we learn about Module Resolution Strategies in TypeScript. We also explore TypeScript and its features. We also discuss Modules in TypeScript. Further, we discuss Module resolution in detail. We learn about Relative and Non-relative module import through examples for better understanding. We also discuss Module Resolution Strategies in TypeScript, like Classic and Node.
To learn more about this topic, check out the link below
You can find more informative articles or blogs on our platform. You can also practice more coding problems and prepare for interview questions from well-known companies on your platform, Coding Ninjas Studio.
134+ registered 
