Declaration emit
- TypeScript course
- Expert
- Lesson 20/35
- 4 min
Learn declaration and declarationMap.
What is declaration emit?
declaration: true produces a .d.ts declaration file for each TypeScript file. These files contain type signatures and let consuming projects use the library with TypeScript. It is a standard setting for library packages.
{
"compilerOptions": {
"declaration": true,
"outDir": "dist"
}
}The produced .d.ts files provide type information to consumers.
What is declarationMap?
declarationMap: true produces a .d.ts.map for each .d.ts; this links declaration files back to the source TypeScript files. Consuming projects can jump to source code when navigating library types.
{
"compilerOptions": {
"declaration": true,
"declarationMap": true
}
}declarationMap requires declaration to be enabled too.
Practice Compute the declaration file name
Write a declarationFileName function that takes a source TypeScript path and changes the .ts extension to .d.ts. If the emitDeclarationOnly parameter is false, return a note that .js is also produced. Print the result of declarationFileName("src/index.ts", true).
Starter code
// declarationFileName: kaynak yoldan bildirim adını üretir
// sadece bildirim modunda bildirim adını döndür
// değilse bildirim ve js adını birlikte döndür
// "src/index.ts", true için sonucu yazdırSample solution
function declarationFileName(sourcePath: string, emitDeclarationOnly: boolean): string {
const dts = sourcePath.replace(/\.ts$/, ".d.ts");
if (emitDeclarationOnly) return dts;
return dts + " + .js";
}
console.log(declarationFileName("src/index.ts", true));Expected output
src/index.d.ts
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does `declaration: true` produce?
- Source map files
- .d.ts declaration files Correct answer
- Decorator metadata
- Inline JavaScript
Explanation: declaration: true produces a .d.ts declaration file for each TypeScript file; sourceMap generates maps, emitDecoratorMetadata adds decorator info, and inline JavaScript is a different concept.
2 Enable declaration map
{
"compilerOptions": {
"declaration": true,
"____": true
}
}{
"compilerOptions": {
"declaration": true,
"declarationMap": true
}
}Explanation: To produce maps for declaration files use declarationMap; sourceMap is the JavaScript map, inlineSourceMap is the embedded map, and declaration only produces declarations.
3 Declaration parts
| Term | Meaning |
|---|---|
declaration: true |
produces .d.ts |
declarationMap: true |
produces .d.ts.map |
.d.ts |
type declaration file |
emitDeclarationOnly |
produces only declarations |