TypeScript: The TypeScript Module System

// utils.ts —— Name Export
export function add(a: number, b: number): number {
  return a + b;
}

export function multiply(a: number, b: number): number {
  return a * b;
}

export const PI = 3.14159;

// main.ts —— Import by Name
import { add, multiply, PI } from "./utils";

console.log(add(1, 2));        // 3
console.log(multiply(3, 4));   // 12
console.log(PI);               // 3.14159

// logger.ts —— Default Export
export default class Logger {
  constructor(private prefix: string) {}

  log(message: string): void {
    console.log(`[${this.prefix}] ${message}`);
  }
}

// main.ts —— Default Import（No curly braces needed，Custom Name）
import Logger from "./logger";
// That's fine, too.：import MyLogger from "./logger";

let logger = new Logger("APP");
logger.log("App Launch");  // [APP] App Launch

// api.ts
export default class ApiClient {
  constructor(private baseUrl: string) {}

  async get(path: string): Promise<any> {
    // ...
  }
}

export enum HttpMethod {
  GET = "GET",
  POST = "POST",
  PUT = "PUT",
  DELETE = "DELETE"
}

// main.ts
import ApiClient, { HttpMethod } from "./api";

let client = new ApiClient("https://api.example.com");
let method: HttpMethod = HttpMethod.GET;

// calculator/operations.ts
export function add(a: number, b: number): number { return a + b; }
export function subtract(a: number, b: number): number { return a - b; }
export function multiply(a: number, b: number): number { return a * b; }
export function divide(a: number, b: number): number {
  if (b === 0) throw new Error("The divisor cannot be zero.");
  return a / b;
}

// calculator/index.ts
export { add, subtract, multiply, divide } from "./operations";
export type { Operation } from "./types";

// Default Export——Calculator Category
import * as ops from "./operations";

export default class Calculator {
  compute(op: string, a: number, b: number): number {
    switch (op) {
      case "+": return ops.add(a, b);
      case "-": return ops.subtract(a, b);
      case "*": return ops.multiply(a, b);
      case "/": return ops.divide(a, b);
      default: throw new Error(`Unknown Operation：${op}`);
    }
  }
}

// types.ts
export interface User {
  id: number;
  name: string;
  email: string;
}

export type UserId = number;

export type UserRole = "admin" | "editor" | "viewer";

// Use export type to explicitly mark"Export Types Only"
export type { User as UserType };

// main.ts
import { type User, type UserRole, createUser } from "./types";
//        ↑ type Modifier Notation"Import Types Only"——It will be erased after compilation.

// Equivalent Old Syntax
// import { User, UserRole } from "./types";  // May result in runtime imports

// Recommended New Syntax——Clearly Distinguish Between Type Import and Value Import
import type { User, UserRole } from "./types";
import { createUser } from "./types";

// Mixed Import——Values and Types
import { createUser, type User, type UserRole } from "./types";

// createUser is the value——Requirements for runtime
// User and UserRole is a type——Compile-Time Erasure

// Re-exporting members of one module from another module
export { User, UserId } from "./user-types";
export { Product, ProductId } from "./product-types";
export { Order, OrderId } from "./order-types";

// models/index.ts —— Bucket files
export { User, UserId } from "./user";
export { Product, ProductId } from "./product";
export { Order, OrderId } from "./order";
export type { CreateUser, UpdateUser } from "./user";
export type { CreateProduct, UpdateProduct } from "./product";

// Import directly from the directory when using it
import { User, Product, type CreateUser } from "./models";
// without needing to know which specific file it is in

import { X } from "./utils"

import _ from "mylib"

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@utils/*": ["src/utils/*"],
      "@models/*": ["src/models/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

// No aliases——Relative paths are prone to errors
import { User } from "../../../models/user";
import { formatDate } from "../../utils/date";

// Has an alias——Clear and concise
import { User } from "@models/user";
import { formatDate } from "@utils/date";

// Use CommonJS style export
// math.cjs
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
module.exports = { add, multiply };

// esModuleInterop: false（Default）
import * as math from "./math.cjs";
math.add(1, 2);

// esModuleInterop: true（Recommendations）
import math from "./math.cjs";   // ✅ A More Natural Way to Introduce It
math.add(1, 2);

// Use export = syntax to export CommonJS Style
class Calculator {
  add(a: number, b: number): number { return a + b; }
}
export = Calculator;

// Use the following when importing: import = require
import Calculator = require("./calculator");
let calc = new Calculator();

// config.ts — named and default exports together
export const APP_NAME = "MyApp";
export const VERSION = "1.0.0";

export default class AppConfig {
  constructor(public port: number = 3000) {}
  toString(): string { return `${APP_NAME} v${VERSION} on :${this.port}`; }
}

// main.ts — importing both styles
import AppConfig, { APP_NAME, VERSION } from "./config";

let config = new AppConfig(8080);
console.log(config.toString());  // MyApp v1.0.0 on :8080
console.log(APP_NAME);           // MyApp

MyApp v1.0.0 on :8080
MyApp

// shapes.ts
export interface Circle { kind: "circle"; radius: number; }
export interface Square { kind: "square"; side: number; }
export type Shape = Circle | Square;

export function area(shape: Shape): number {
  return shape.kind === "circle"
    ? Math.PI * shape.radius ** 2
    : shape.side ** 2;
}

// main.ts — import type for types, regular import for values
import type { Circle, Square, Shape } from "./shapes";
import { area } from "./shapes";

let c: Circle = { kind: "circle", radius: 5 };
let s: Shape = { kind: "square", side: 4 };

console.log(area(c)); // 78.5398...
console.log(area(s)); // 16

78.53981633974483
16