Modules

What this module covers

4 steps · TypeScript

1. Step 1. Modules

   Modules split code into separate files using export and import. export function add(a: number, b: number): number { return a + b; } export const PI: number = 3.14159; export default function multiply(a: number, b: number): number { return a * b; } import { add, PI } from "./math"; import multiply from "./math"; import * as MathUtils from "./math"; Best practices: keep shared interfaces/types in a dedicated types/ folder, use `import type` when importing types only (it is erased at compile time), and prefer named exports for flexibility and tree-shaking.

   Named exports (as opposed to a single default export) let a module expose several independent pieces, each imported individually where needed. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Export a function called square.

2. Step 2. Quiz: Modules

   Answer these questions about modules.

   export makes a declaration available to other files; import brings it in, by name or as a default. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Answer the quiz below.

3. Step 3. Module Exports & Imports

   Export a function greet(name: string) and an interface Person with name and age. Write import statements for both.

   Real modules almost always export a mix of values (functions) and types (interfaces) side by side — this exercise practices both in one file. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Are greet and Person both exported, with a matching import statement present?

4. Step 4. Mini project: Modules

   Export a function greet(name: string) and an interface Person with name and age. Write import statements for both. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   Real modules almost always export a mix of values (functions) and types (interfaces) side by side — this exercise practices both in one file. This project stage asks you to apply the same idea without step-by-step scaffolding. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [TypeScript] Are greet and Person both exported, with a matching import statement present?