Declaration Maps
In this page:
What Declaration Maps Do
When declarationMap is enabled, TypeScript generates source maps specifically for its .d.ts declaration files, so an editor or debugger can jump from a generated type declaration straight back to the original .ts source.
Example: What Declaration Maps Do
// tsconfig.json
// { "compilerOptions": { "declaration": true, "declarationMap": true } }
console.log("declarationMap lets editors jump from .d.ts back to the original .ts");
Declaration Files
The declaration compiler option generates the .d.ts files that describe a project's public type information — this is what lets other TypeScript projects import and type-check against your compiled JavaScript.
Example: Declaration Files
// tsconfig.json
// { "compilerOptions": { "declaration": true } }
console.log("declaration generates the .d.ts files describing public types");
Declaration Maps for Libraries
Library projects especially benefit from declaration maps, since consumers using "go to definition" on an imported type would otherwise land in an auto-generated .d.ts file instead of the readable original source.
Example: Declaration Maps for Libraries
// Without declarationMap, "go to definition" lands in generated .d.ts.
// With it, it lands in the original readable .ts source instead.
console.log("Library consumers benefit most from declaration maps");
Declaration Maps and Composite Projects
Declaration maps pair naturally with composite projects and project references, where the generated declarations effectively act as the public interface boundary between one project and another that depends on it.
Example: Declaration Maps and Composite Projects
// tsconfig.json
// { "compilerOptions": { "composite": true, "declaration": true, "declarationMap": true } }
console.log("Declarations act as the public interface boundary between projects");
Useful Library Configuration
A well-configured library typically combines declaration output, declaration maps, and regular source maps together, giving consumers a smooth experience navigating and debugging code they didn't write themselves.
Example: Useful Library Configuration
// tsconfig.json
// { "compilerOptions": { "declaration": true, "declarationMap": true, "sourceMap": true } }
console.log("Combining these three gives consumers a smooth debugging experience");
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: