8. TypeScript Modules Export Import Best Practices – समझे आसान भाषा में 2026

// old-style.ts
namespace Validation {
  export interface StringValidator {
    isValid(s: string): boolean;
  }
  
  export class EmailValidator implements StringValidator {
    isValid(s: string): boolean {
      return s.includes("@");
    }
  }
}

// math.ts (Module 1)
export function add(a: number, b: number): number {
  return a + b;
}

export const PI = 3.14159;

// app.ts (Module 2)
import { add, PI } from "./math.js";
console.log(add(5, 3)); // 8
console.log(PI);        // 3.14159

// utils.ts
export function capitalize(str: string): string {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

export const MAX_SIZE = 1024;

export interface User {
  id: number;
  name: string;
}

export class Logger {
  log(message: string): void {
    console.log(`[LOG]: ${message}`);
  }
}

// shapes.ts
function circleArea(r: number): number {
  return Math.PI * r ** 2;
}

function rectangleArea(l: number, b: number): number {
  return l * b;
}

const VERSION = "1.0.0";

export { circleArea, rectangleArea, VERSION };

// api.ts
function fetchUsers() { }
function fetchProducts() { }

export { 
  fetchUsers as getUsers, 
  fetchProducts as getProducts 
};

// calculator.ts
export default class Calculator {
  add(a: number, b: number): number {
    return a + b;
  }
  
  subtract(a: number, b: number): number {
    return a - b;
  }
}

// Normal export bhi saath mein kar sakte ho
export const VERSION = "2.0.0";

// components/index.ts
export { Button } from "./Button.js";
export { Card } from "./Card.js";
export { Modal } from "./Modal.js";

// Ya ek saath
export * from "./Button.js";
export * from "./Card.js";

// app.ts
import { capitalize, MAX_SIZE, User, Logger } from "./utils.js";

const name = capitalize("rahul"); // "Rahul"
console.log(MAX_SIZE); // 1024

import { capitalize as toTitleCase, MAX_SIZE as LIMIT } from "./utils.js";

console.log(toTitleCase("hello")); // "Hello"
console.log(LIMIT); // 1024

import * as Utils from "./utils.js";

console.log(Utils.capitalize("rahul"));
console.log(Utils.MAX_SIZE);
const logger = new Utils.Logger();

import Calculator, { VERSION } from "./calculator.js";

const calc = new Calculator();
console.log(calc.add(5, 3)); // 8
console.log(VERSION);        // "2.0.0"

// Kuch export nahi hai, sirf code run karna hai
import "./init.js";
import "some-library/polyfill";

// ✅ Recommended – Named exports for most cases
// math.ts
export function add(a: number, b: number) { return a + b; }
export function subtract(a: number, b: number) { return a - b; }
export const PI = 3.14;

// ✅ Default export – sirf jab ek hi main cheez ho
// logger.ts
export default class Logger { }
export const LOG_LEVEL = "info"; // Extra exports bhi ho sakte hain

// geometry.ts
namespace Geometry {
  export interface Point {
    x: number;
    y: number;
  }
  
  export function distance(a: Point, b: Point): number {
    return Math.hypot(a.x - b.x, a.y - b.y);
  }
  
  // Without export – private hai
  function helper() { }
}

// Use karna
const p1: Geometry.Point = { x: 0, y: 0 };
const p2: Geometry.Point = { x: 3, y: 4 };
console.log(Geometry.distance(p1, p2)); // 5

// ❌ Old way – Namespace
namespace Utils {
  export function helper() { }
}

// ✅ New way – ES Module (export/import)
// utils.ts
export function helper() { }

// app.ts  
import { helper } from "./utils.js";

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "node",
    "baseUrl": "./src",
    "paths": {
      "@utils/*": ["utils/*"],
      "@components/*": ["components/*"]
    }
  }
}

// Without path mapping – ugly
import { helper } from "../../../utils/helper.js";

// With path mapping – clean
import { helper } from "@utils/helper.js";

// 1. Named exports prefer करो (default se zyada)
// user.service.ts
export function getUser() { }
export function createUser() { }
export interface User { }

// 2. Barrel files (index.ts) use करो
// features/user/index.ts
export * from "./user.service.js";
export * from "./user.types.js";
export * from "./user.utils.js";

// 3. Import at top of file
import { something } from "./module.js";
// then code...

// 4. Type imports ke liye 'import type' use करो
import type { User } from "./types.js";
import { getUser } from "./api.js"; // Value import

// 5. Relative imports only for same package
import { helper } from "./utils/helper.js"; // ✅
import { something } from "../other.js";     // ✅

// 6. Absolute imports for external packages
import React from "react";        // ✅
import lodash from "lodash";      // ✅

// 1. Namespaces mat use karo new projects mein
namespace Utils { } // ❌

// 2. Default export with any random name – confusion
import MyComponent from "./Component"; // ❌ (Kya hai ye?)

// 3. Deep relative imports (../../../..)
import { x } from "../../../../../../utils/x.js"; // ❌

// 4. Importing everything unnecessarily
import * as Everything from "./huge-module.js"; // ❌

// 5. Circular dependencies
// fileA.ts imports from fileB.ts
// fileB.ts imports from fileA.ts – ❌

src/
├── index.ts                 # Main entry
├── features/
│   ├── auth/
│   │   ├── index.ts        # Barrel export
│   │   ├── auth.service.ts
│   │   ├── auth.types.ts
│   │   └── auth.utils.ts
│   └── user/
│       ├── index.ts
│       ├── user.service.ts
│       └── user.types.ts
├── shared/
│   ├── index.ts
│   ├── utils/
│   └── constants/
└── types/
    └── global.d.ts

// src/types/common.types.ts
export interface ApiResponse<T> {
  success: boolean;
  data?: T;
  error?: string;
}

export type ID = string | number;

// src/features/product/product.types.ts
import type { ID, ApiResponse } from "../../types/common.types.js";

export interface Product {
  id: ID;
  name: string;
  price: number;
}

export type ProductResponse = ApiResponse<Product>;

// src/features/product/product.service.ts
import type { Product, ProductResponse } from "./product.types.js";
import { apiClient } from "../../shared/api/client.js";

export async function getProduct(id: ID): Promise<ProductResponse> {
  return apiClient.get(`/products/${id}`);
}

export function calculateDiscount(price: number, percent: number): number {
  return price - (price * percent / 100);
}

// src/features/product/index.ts (Barrel file)
export * from "./product.types.js";
export * from "./product.service.js";

// src/app.ts (Main file)
import { getProduct, calculateDiscount, type Product } from "./features/product/index.js";

async function main() {
  const response = await getProduct(101);
  if (response.success && response.data) {
    const discounted = calculateDiscount(response.data.price, 10);
    console.log(`Discounted price: ${discounted}`);
  }
}

// ❌ Wrong
import { x } from "./file.ts";

// ✅ Correct – JavaScript extension use करो (compiled output)
import { x } from "./file.js";

// a.ts
import { b } from "./b.js";
export const a = "A";

// b.ts
import { a } from "./a.js"; // ❌ Circular!
export const b = "B";

// shared.ts
export const shared = "shared";

// a.ts
import { shared } from "./shared.js";

// b.ts
import { shared } from "./shared.js";

// component.tsx
export default function Button() { }

// app.tsx
import MyButton from "./component.js"; // Works but confusing

// ✅ Better – same name use करो
import Button from "./component.js";

// ❌ Type import as value – runtime error nahi but waste
import { User, getUsers } from "./user.js";

// ✅ Separate type and value imports
import type { User } from "./user.js";
import { getUsers } from "./user.js";