How can you handle module resolution in TypeScript?

In TypeScript, module resolution is the process of determining the location of a module’s corresponding file at runtime. There are two strategies for module resolution in TypeScript: Classic and Node. The Node strategy is the default and recommended method for most use cases.

Before diving into module resolution strategies, it’s essential to understand the difference between relative and non-relative imports.

Relative import paths (starting with ‘./‘, ‘../‘, or ‘/‘) explicitly indicate the location of the imported module relative to the importing module.

For example:

import { myFunction } from './myModule'; // Located in the same directory.
import { myFunction } from '../myModule'; // Located in the parent directory.

Non-relative import paths do not start with ‘./‘, ‘../‘, or ‘/‘. They are typically resolved against the ‘node_modules‘ directory, making them suitable for external library modules.

For example:

import { library } from 'someLibrary';

Now, let us discuss the two module resolution strategies:

1. **Classic Resolution Strategy:** This strategy mimics the behavior of the TypeScript compiler (version 1.0). For non-relative module imports, the compiler looks for a matching file (with a ‘.ts‘, ‘.tsx‘, ‘.d.ts‘, ‘.js‘, or ‘.jsx‘ extension) in the same directory as the importing module. If no match is found, the search moves up the directory tree until a file is found or the root is reached.

For relative module imports, the process is the same. However, instead of starting in the same directory as the importing module, the search starts at the relative path.

Classic resolution strategy could be set with ‘tsconfig.json‘ file:

{
  "compilerOptions": {
    "moduleResolution": "classic"
  }
}

2. **Node Resolution Strategy:** This strategy mimics the module resolution behavior of the Node.js runtime. For non-relative module imports, the compiler first looks for a matching file in ‘node_modules‘ directory, starting in the same directory as the importing module. If no match is found, the search moves up the directory tree until a match is found or the root is reached. For relative imports, the search starts at the relative path, just like in the Classic strategy.

Node resolution strategy could be set with ‘tsconfig.json‘ file:

{
  "compilerOptions": {
    "moduleResolution": "node"
  }
}

It’s important to note that when using Node resolution with the "module" option set to "ES2015" or higher, TypeScript follows the "Module Resolution" recommendation from the ECMAScript standard. Therefore, it will resolve imports according to the import map specified in the "imports" field of the ‘package.json‘ file.

In conclusion, handling module resolution in TypeScript involves understanding the nature of your imports (relative or non-relative) and selecting the appropriate resolution strategy according to your project’s requirements. The Node resolution strategy is generally preferred, as it aligns with the module resolution behavior of the Node.js runtime and is more familiar to developers coming from JavaScript.