TypeScript
traceAnalyzer
Learn performance tracing with tsc --generateTrace.
What is tsc --generateTrace?
tsc --generateTrace <dir> writes the events during type checking as JSON files into a directory. Each event holds a type resolution step and its duration, so you can see the most expensive types.
tsc --generateTrace ./trace
// produces ./trace/trace.json
The output is inspected with @typescript/analyze-trace.
Trace analysis
The trace.json in the trace directory holds type, duration, and args fields for each event. The @typescript/analyze-trace package lists the most expensive types and longest events. The most frequent checkType events usually point to the bottleneck.
{
"type": "checkType",
"duration": 12,
"args": { "type": "Deep" }
}
Durations are in milliseconds.
Exercise Extract a trace summary
Write a parseTraceSummary function that counts events of type checkType in an event array and sums their durations. Return a { count, total } object. For events checkType(5), checkType(10), other(2), print count and total separated by a comma.
Show example solution
function parseTraceSummary(events: { type: string; duration: number }[]): { count: number; total: number } {
let count = 0;
let total = 0;
for (const e of events) {
if (e.type === "checkType") {
count++;
total += e.duration;
}
}
return { count, total };
}
const events = [
{ type: "checkType", duration: 5 },
{ type: "checkType", duration: 10 },
{ type: "other", duration: 2 }
];
const result = parseTraceSummary(events);
console.log(result.count + ", " + result.total);
Test yourself
-
What does --generateTrace produce?
- A declaration file
- A compiled JavaScript file
- A source map file
- A directory with event JSON files
Show answer
A directory with event JSON files — generateTrace writes type checking events as JSON into a directory; JavaScript, source maps, and declarations are outputs of different options.
-
Trace flag
tsc ____ ./trace
Show answer
tsc --generateTrace ./trace
-
Trace parts
- --generateTrace
- produces a trace directory
- trace.json
- event records
- checkType
- type checking event
- duration
- event duration
Next lesson: Project structure
