Module Resolution Techniques & Strategies in TypeScript

TypeScript, a typed superset of JavaScript, provides enhanced tooling and type safety for modern JavaScript development. A critical aspect of TypeScript is its module resolution mechanism, which determines how to locate and import modules. Understanding TypeScript's module resolution techniques and strategies is essential for managing dependencies and structuring code in large applications effectively.

Syntax:

import { MyModule } from "./myModule";
import * as MyModule from "./myModule";
import MyDefaultModule from "./myDefaultModule";

Classic

The Classic module resolution strategy mimics the behavior of the original TypeScript compiler. This approach is simplistic and mainly intended for backwards compatibility with older TypeScript projects. It follows these steps:

• Check for a file with the specified module name.
• Check for a .ts or .d.ts file with the specified module name.

Syntax:

import { MyClass } from "./MyClass"; // Looks for MyClass.ts or MyClass.d.ts

Example: This example demonstrates the Classic module resolution strategy. We import a class from a file located in the same directory.

// index.ts
import { MyClass } from "./MyClass";

const myClass = new MyClass();
console.log(myClass.sayHello());

// MyClass.ts
export class MyClass {
  sayHello() {
    return "Hello from MyClass!";
  }
}

Output:

"Hello from MyClass!"

Node

The Node module resolution strategy is based on the Node.js resolution algorithm. This approach is more sophisticated and is the default in TypeScript. It follows these steps:

• Check if the module is a core module.
• Check for a file or directory with the specified module name.
• Resolve index files within directories (index.ts, index.d.ts).

Syntax

import { MyClass } from "./MyClass"; // Looks for MyClass.ts, MyClass.d.ts, MyClass/index.ts, or MyClass/index.d.ts

Example: This example demonstrates the Node module resolution strategy. We import a class from a file located in the same directory, but it also works for directory imports.

// index.ts

import { MyClass } from "./MyClass";

const myClass = new MyClass();
console.log(myClass.sayHello());

// MyClass.ts

export class MyClass {
  sayHello() {
    return "Hello from MyClass!";
  }
}

Output:

"Hello from MyClass!"

Steps to Create Application

Step 1: Initialize a TypeScript Project.

npm init -y
npm install typescript --save-dev
npm install tsconfig-paths --save-dev
npx tsc --init

Step 2: Install Required Modules:

npm install @types/node --save-dev

Step 3: Install Additional Tools (if necessary):

npm install ts-node --save-dev
npm install nodemon --save-dev

Updated Dependencies

{
  "name": "gfg-nikunj",
  "version": "1.0.0",
  "scripts": {
    "start": "ts-node src/index.ts",
    "dev": "nodemon src/index.ts"
  },
  "devDependencies": {
    "@types/node": "^20.4.1",
    "typescript": "^4.5.4",
    "ts-node": "^10.4.0",
    "nodemon": "^2.0.15"
  }
}

Project Structure:

Example: To demonstrate the implementation of the module resolution techniques and strategies in TypeScript.

//tsconfig.json file

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "baseUrl": "./",
    "paths": {
      "@app/*": ["src/app/*"]
    },
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true
  }
}

// src/app/MyClass.ts

export class MyClass {
  sayHello() {
    return "Hello, TypeScript!";
  }
}

// src/index.ts

import { MyClass } from "@app/MyClass";

const myClass = new MyClass();
console.log(myClass.sayHello());

Command to run the Application:

npx ts-node -r tsconfig-paths/register src/index.ts

Output:

"Hello, TypeScript!"

nikunj_sonigara

Follow

Improve

Article Tags :

• Web Technologies
• TypeScript