Declaration Files — Animate | AI Wisdom

← Back to topic
🎞 ANIMATE · Mode 3 of 5 · +100 XP— Declaration Files (.d.ts)
📋declare module
⚙️Augmentation
🔄declare global
✅Assets
🎯 Next: Test →
Step 1 / 4
Speed
declare module
declare module adds types for untyped JS packages💡 Analogy
Like writing a translated instruction manual for a tool that only came with one in another language.
declare module "my-lib" adds TypeScript types for a JavaScript package that doesn't ship its own types. TypeScript will use these declarations when you import from my-lib.
Console Output
> import { init } from "my-lib" → fully typed
> No TypeScript source needed — only .d.ts
> File: node_modules/@types/my-lib/index.d.ts
●declarations.d.ts
declare moduleL3–11
1// Declaring types for a plain JS module (no TypeScript source)
2// my-lib.d.ts — ships with or alongside my-lib.js
3 
4declare module 'my-lib' {
5  export interface Config {
6    apiKey: string;
7    timeout?: number;
8  }
9  export function init(config: Config): void;
10  export function request(url: string): Promise<unknown>;
11}
12 
13// Augmenting an existing module (module augmentation)
14import 'express';
15declare module 'express' {
16  interface Request {
17    user?: { id: string; role: string };
18  }
19}
20// Now req.user is typed in all Express route handlers!
21 
22// Declaring global variables
23declare global {
24  interface Window {
25    analytics: { track(event: string, props?: object): void };
26  }
27  const __ENV__: 'development' | 'production';
28}
29 
30// Ambient declarations for imported assets
31declare module '*.svg' {
32  const content: string;
33  export default content;
34}
35declare module '*.css' {
36  const styles: Record<string, string>;
37  export default styles;
38}
38 lines
Timeline — 4 Steps
declare module
declare module adds types for untyped JS packages💡 Analogy
Like writing a translated instruction manual for a tool that only came with one in another language.
declare module "my-lib" adds TypeScript types for a JavaScript package that doesn't ship its own types. TypeScript will use these declarations when you import from my-lib.
Console Output
> import { init } from "my-lib" → fully typed
> No TypeScript source needed — only .d.ts
> File: node_modules/@types/my-lib/index.d.ts

Was this page helpful?

Discussion

declare module adds types for untyped JS packages

💡 Analogy

Like writing a translated instruction manual for a tool that only came with one in another language.

declare module "my-lib" adds TypeScript types for a JavaScript package that doesn't ship its own types. TypeScript will use these declarations when you import from my-lib.

Console Output

> import { init } from "my-lib" → fully typed
> No TypeScript source needed — only .d.ts
> File: node_modules/@types/my-lib/index.d.ts

declare module adds types for untyped JS packages

💡 Analogy

Like writing a translated instruction manual for a tool that only came with one in another language.

declare module "my-lib" adds TypeScript types for a JavaScript package that doesn't ship its own types. TypeScript will use these declarations when you import from my-lib.

Console Output

> import { init } from "my-lib" → fully typed
> No TypeScript source needed — only .d.ts
> File: node_modules/@types/my-lib/index.d.ts