Stop 07 · TypeScriptTopics · 10/12

Modules

In short

Real projects are split across many files. Modules let you share types and code between files with import and export, and TypeScript checks them across files too.

How TypeScript organizes and type-checks code split across multiple files, extending JavaScript's `import`/`export` with type-only imports and declaration files.

The jaadu mascot carries shopping bags past a row of small shop counters in a mall.

Think of it like this

Shops in a mall

Each shop keeps its own stock. You can only buy what a shop puts on its counter. A module is a shop: export puts things on the counter, import buys them. Anything not exported stays in the back room.

Watch it happen

Sharing a type and a value

types/user.ts

lib/api.ts

tsc

JS output

export User, MAX_NAME

1/5The file puts two things on its counter: a type and a real number constant.

The big ideas

What you need to know

Same import/export as JS

Any file with import or export is a module. Types can be exported just like functions.

import type

import type { User } imports only the type. It's removed completely from the JavaScript output.

.d.ts files

Declaration files describe types for JavaScript code. Many packages ship them, others use @types packages.

tsconfig decides resolution

For apps built with Vite or Next.js, "moduleResolution": "bundler" matches how those tools find files.

See it in code

Walk through the code

1// types/user.ts2export interface User { id: number; name: string }3export const MAX_NAME = 40;4 5// lib/api.ts6import type { User } from "../types/user";7import { MAX_NAME } from "../types/user";8 9export async function getUser(id: number): Promise<User> {10  const res = await fetch(`/api/users/${id}`);11  const user: User = await res.json();12  return { ...user, name: user.name.slice(0, MAX_NAME) };13}

1/3One file exports a type and a constant for other files to use.

User is used only as a type, so import type is enough. MAX_NAME is a real value used at runtime, so it needs a normal import.

Save yourself the pain

Common mistakes

Oops

Installing a JS library and getting 'Could not find a declaration file'.

Do this instead

Check if it ships types. If not, install @types/library-name as a dev dependency.

Oops

Importing types the normal way everywhere and pulling in code you don't need.

Do this instead

Use import type for type-only imports. The verbatimModuleSyntax option enforces this.

Your mission

Split a file into modules

~25 min

Quick check

What happens to import type { User } from "./types" when TypeScript compiles to JavaScript?

Go deeper

1Practice `import type` for importing only type information.
2Learn what a `.d.ts` declaration file is and when you'd write one.
3Explore how `tsconfig.json`'s `module` setting affects compiled output.