Lesson 29 +10 XP

TypeScript Modules & Type Imports

TypeScript Modules & Type-Only Imports

TypeScript follows ECMAScript module syntax (import and export). It also introduces type-only imports and exports.

Standard ES Modules

// mathUtils.ts
export interface MathConfig {
  precision: number;
}

export function add(a: number, b: number): number {
  return a + b;
}

Importing Modules

// app.ts
import { add, MathConfig } from "./mathUtils";

const config: MathConfig = { precision: 2 };
console.log(add(5, 10));

Type-Only Imports (import type)

Use import type to explicitly state that an import is used purely for type checking. Type imports are completely erased during compilation, optimizing bundle sizes.

import type { MathConfig } from "./mathUtils";
import { add } from "./mathUtils";

// Inline type import shorthand:
import { add, type MathConfig } from "./mathUtils";

TL;DR

  • Files containing top-level import or export are treated as modules.
  • Use import type to import type definitions without including JS runtime code.
  • Type-only imports reduce bundle sizes and resolve circular dependency issues.