Intro To TypeScript Performance

Matt PocockMatt is a well-regarded TypeScript expert known for his ability to demystify complex TypeScript concepts.

You'll often find folks talking about "TypeScript Performance". They might say "my codebase feels slow" and that "TypeScript is making my editor slow".

What do they mean?

What is TypeScript Performance?

TypeScript performance is a measure of how fast TypeScript can type-check your codebase. It's a measure of how quickly your editor can provide feedback on your code.

It's NOT a measure of how fast your code runs. TypeScript is a compile-time tool, not a runtime tool. Simply using TypeScript will not change the speed at which the emitted JavaScript runs - TypeScript doesn't do anything at runtime.

What Does Bad TypeScript Performance Look Like?

When TypeScript performance is poor, you will notice:

Your editor is slow to provide feedback on your code.
Your editor is slow to autocomplete.
Your builds take a long time to complete.

In other words, the things you do every day become slower and more painful.

What Causes Bad TypeScript Performance?

TypeScript performance can be affected by several factors.

The first is scale. Simply put, the more code TypeScript needs to check at once, the slower it will run. However, scale is often less of a factor than you might think.

The second factor is the way you write your code. Using intersections instead of interfaces, utilizing project references, and employing return types judiciously are all useful ways to address TypeScript performance issues.

The TypeScript Performance Wiki provides a great list of strategies you can use to improve your TypeScript performance.

How Do You Measure TypeScript Performance?

You can use some tsc flags to measure your TypeScript performance.

Using tsc --diagnostics or tsc --extendedDiagnostics will provide you with information about how long it takes TypeScript to type-check your codebase.

By running tsc --generateTrace ./outDir, you can generate a trace file that can be opened in Chrome's Trace Viewer to see where TypeScript is spending its time.

Aleksandra Sikora's excellent talk at BeJS is a great resource to begin exploring this topic.

Intro To TypeScript Performance

Cursor Rules for Better AI Development

Finding existing community .cursor/rules for TypeScript lacking, I'm sharing my own set to hopefully kickstart a discussion on what makes effective AI coding guidance. These rules focus purely on TypeScript language features, documentation, structure (like Result types), teaching the AI specific nuances (like noUncheckedIndexedAccess), and practical habits, rather than specific frameworks. I also distinguish between shareable, project-specific Workspace Rules (versioned in Git) and personalized Global Rules (living in your IDE) to tailor the AI to your individual style and workflow. You can download my current ruleset using the link in the original post.

Matt Pocock

Should You Declare Return Types?

Here's a quick .cursor/rules addition you can make for handling return types in TypeScript.

# Return Types

When declaring functions on the top-level of a module,
declare their return types. This will help future AI
assistants understand the function's purpose.

```ts
const myFunc = (): string => {
  return "hello";
};
```

One exception to this is components which return JSX.
No need to

Matt Pocock

Intro To TypeScript Performance

What is TypeScript Performance?

What Does Bad TypeScript Performance Look Like?

What Causes Bad TypeScript Performance?

How Do You Measure TypeScript Performance?

Cursor Rules for Better AI Development

Should You Declare Return Types?

TypeScript Announces Go Rewrite, Achieves 10x Speedup

TypeScript 5.8 Ships --erasableSyntaxOnly To Disable Enums

Node.js Now Supports TypeScript By Default

This Crazy Syntax Lets You Get An Array Element's Type