traceAnalyzer
- TypeScript course
- Expert
- Lesson 24/35
- 4 min
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.jsonThe 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.
Practice 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.
Starter code
// iz olaylarını özetle
// tür denetimi olaylarını say
// sürelerini topla
// sayı ve toplamı yazdırSample 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);Expected output
2, 15
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does --generateTrace produce?
- A declaration file
- A compiled JavaScript file
- A source map file
- A directory with event JSON files Correct answer
Explanation: generateTrace writes type checking events as JSON into a directory; JavaScript, source maps, and declarations are outputs of different options.
2 Trace flag
tsc ____ ./tracetsc --generateTrace ./traceExplanation: To generate a trace use --generateTrace; --trace, --profile, and --perf are not valid tsc flags.
3 Trace parts
| Term | Meaning |
|---|---|
--generateTrace |
produces a trace directory |
trace.json |
event records |
checkType |
type checking event |
duration |
event duration |