Modules

Learning objectives#

• Export and import types and values
• Use import type for type-only imports
• Install type definitions from @types
• Understand .d.ts declaration files
• Configure path aliases

Explanation#

TypeScript uses standard ES modules: export interface User, export function, import { User } from "./models/user".

import type { User } imports only the type. It is guaranteed to be removed from the JavaScript output, avoiding accidental runtime imports and circular-dependency problems.

A .d.ts (declaration) file contains only types describing JavaScript code. Libraries ship them so TypeScript knows their APIs.

Libraries without built-in types often have community types: npm i -D @types/express. If none exist, write a small declare module "lib-name" yourself.

Path aliases (paths in tsconfig, also configured in your bundler) replace ../../../models with @/models.

Syntax#

1// models/user.ts
2export interface User { id: number; name: string }
3

4// services/api.ts
5import type { User } from '../models/user';

Code example: Typed modules across a project#

1// ── src/models/product.ts ───────────────
2export interface Product {
3  id: number;
4  name: string;
5  price: number;
6}
7export const CURRENCY = 'INR';
8

9// ── src/services/products.ts ────────────
10import type { Product } from '@/models/product';   // type-only import
11import { CURRENCY } from '@/models/product';       // value import
12

13export async function getProducts(): Promise<Product[]> {
14  const res = await fetch('/api/products');
15  return res.json();
16}
17export const label = (p: Product) => `${p.name} — ${p.price} ${CURRENCY}`;
18

19// ── src/types/confetti.d.ts ─────────────
20declare module 'tiny-confetti' {
21  export default function confetti(options?: { particles?: number }): void;
22}
23

24// ── tsconfig.json (excerpt) ─────────────
25// "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } }
26

27// ── terminal ────────────────────────────
28// npm i express && npm i -D @types/express

Types flow between files, the Product import disappears from the compiled JavaScript, the untyped tiny-confetti library gets a hand-written declaration, and @/ imports resolve to src/.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. product.ts exports an interface (type) and a constant (value).
2. import type brings in Product only for type checking.
3. The value CURRENCY is imported normally because it is needed at runtime.
4. confetti.d.ts declares the shape of an untyped JavaScript library.
5. The paths setting maps @/ to src/ so imports stay short.
6. @types/express adds types for a library written in JavaScript.

Real-world use case#

Common mistakes#

Best practices#

• Use import type for type-only imports
• Keep shared types in a dedicated folder or package
• Prefer libraries that ship their own types
• Mirror path aliases in your bundler config

Remember this#

Practice exercise#

1// src/types/slugify-lite.d.ts
2declare module 'slugify-lite' {
3  export default function slugify(text: string): string;
4}

Mini quiz#

Want more? Practise all TypeScript MCQs · TypeScript interview questions

Related topics#

My notes#

Saved in this browser.