Hi everyone! Today I want to talk about fast TS compilation. There are a lot of tips and tricks about TypeScript code style. But not about compiler performance. I will tell you about the five most efficient ways (in my opinion) to improve the compilation speed! 1. Type Annotations Type Annotations, such as parameters, variables and return types help the compiler to work faster. Named types are more compact than anonymous ones. They decrease the amount of work compiler needs to read and write declaration files. Do NOT: import { baz } from "baz";

export function foo() {
    return baz();
} DO: import { baz, BazType } from "baz";

export function foo(): BazType {
    return baz();
} 2. Interfaces Over Intersections Intersections merge all properties and may produce type for some of them. never Interfaces are single flat object types that detects conflicts between properties. Relationships between interfaces are also cached. Every added part of interface is checked against target interface before checking against the result interface. That's why interfaces are faster! Do NOT: type Foo = Bar & Baz & {
    prop: string;
} DO: interface Foo extends Bar, Baz {
    prop: string;
} 3. Base Types Over Unions Every passed argument must be compared to every union value. Especially with big (10+) unions. For elements elimination they need to be compared in pairs, that leads to quadratic complexity. That's why types are better choice. Do NOT: interface Cats {
  colour: "Black" | "White";
}

interface Dogs {
  colour: "Brown" | "White";
  size: number;
}

declare function getAnimal(animal: Cats | Dogs); DO: interface Animals {
  colour: "Brown" | "Black" | "White";
}

interface Cats extends Animals {
  colour: "Black" | "White";
}

interface Dogs extends Animals {
  colour: "Brown" | "White";
  size: number;
}

declare function getAnimal(animal: Animal); 4. Naming Complex Types TypeScript need to recompile conditional type every time when complex type is called. Also any two instances of a type that use them requires recompiling the structure of it. Do NOT: interface Foo<T> {
    foo<U>(x: U):
        U extends Type1<T> ? Type2<U, T> :
        U;
} DO: type FooResult<U, T> =
    U extends Type1<T> ? Type2<U, T> :
    U;

interface Foo<T> {
    foo<U>(x: U): FooResult<U, T>;
} Return type can be extracted to a type alias and can be cached by the compiler 5. tsconfig.json - this flag allows TypeScript to save the state from the last compilation to a file. This is used to recompile only the smallest amount of files since last compilation. This is enabled by default with flag for project references. --incremental .tsbuildinfo composite - this flag give an option to skip type check for files. Without the flag TypeScript will do a full check of all files in your project. But mostly they have been already verified. If you want to increase the performance even more, you can enable to skip all files. --skipDefaultLibCheck/skipLibCheck .d.ts .d.ts skipLibCheck .d.ts - this flag allows to reduce assignability check between types. For example if we know that extends we can skip such checking for and .  This flag is enabled by default with . --strictFunctionTypes Dog Animal List<Dog> List<Animals> --strict You can read more about TS performance here - https://github.com/microsoft/TypeScript/wiki/Performance P.S. Thanks for reading! More articles about frontend development: Top 12 Lesser Known Tips for JavaScript Best Practices Top 9 Tips to Improve React Performance Top 10 CSS Performance Tips Some HTML, CSS Little Secrets In One Article Top Lesser Known HTML 5 & CSS 3 Tips and Best Practices

Microsoft

Target

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Top 5 TypeScript Performance Tips

Too Long; Didn't Read

Companies Mentioned

Nikita Starichenko

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Top 5 TypeScript Performance Tips

Too Long; Didn't Read

Companies Mentioned

Nikita Starichenko

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES