5 лучших советов по повышению производительности TypeScript

Привет всем! Сегодня я хочу поговорить о быстрой компиляции TS. Есть много советов и рекомендаций по стилю кода TypeScript. Но не о производительности компилятора. Расскажу о пяти самых эффективных (на мой взгляд) способах повысить скорость компиляции!

1. Типовые аннотации

Аннотации типов, такие как параметры, переменные и возвращаемые типы, помогают компилятору работать быстрее. Именованные типы более компактны, чем анонимные. Они уменьшают объем работы, который требуется компилятору для чтения и записи файлов объявлений.

НЕ делайте:

import { baz } from "baz";

export function foo() {
    return baz();
}

СДЕЛАТЬ:

import { baz, BazType } from "baz";

export function foo(): BazType {
    return baz();
}

2. Интерфейсы вместо пересечений

Пересечения объединяют все свойства и могут привести к типу никогда для некоторых из них.

Интерфейсы – это одиночные плоские типы объектов, обнаруживающие конфликты между свойствами. Отношения между интерфейсами также кэшируются. Каждая добавленная часть интерфейса проверяется на соответствие целевому интерфейсу перед проверкой на соответствие результирующему интерфейсу. Вот почему интерфейсы быстрее!

НЕ делайте:

type Foo = Bar & Baz & {
    prop: string;
}

СДЕЛАТЬ:

interface Foo extends Bar, Baz {
    prop: string;
}

3. Базовые типы над союзами

Каждый переданный аргумент должен сравниваться с каждым значением объединения. Особенно с большими (10+) союзами. Для исключения элементов их нужно сравнивать попарно, что приводит к квадратичной сложности. Вот почему лучше выбирать типы.

НЕ делайте:

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

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

declare function getAnimal(animal: Cats | Dogs);

СДЕЛАТЬ:

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. Именование сложных типов

TypeScript необходимо перекомпилировать условный тип каждый раз, когда вызывается сложный тип. Также любые два экземпляра типа, которые их используют, требуют перекомпиляции его структуры.

НЕ делайте:

interface Foo<T> {
    foo<U>(x: U):
        U extends Type1<T> ? Type2<U, T> :
        U;
}

СДЕЛАТЬ:

type FooResult<U, T> =
    U extends Type1<T> ? Type2<U, T> :
    U;

interface Foo<T> {
    foo<U>(x: U): FooResult<U, T>;
}

Тип возвращаемого значения может быть извлечен в псевдоним типа и кэширован компилятором

5. tsconfig.json

1. --incremental — этот флаг позволяет TypeScript сохранять состояние последней компиляции в файл .tsbuildinfo. Это используется для перекомпиляции только наименьшего количества файлов с момента последней компиляции. Это включено по умолчанию с флагом composite для ссылок на проекты.
2. --skipDefaultLibCheck/skipLibCheck — этот флаг дает возможность пропустить проверку типа для файлов .d.ts. Без флага TypeScript выполнит полную проверку всех файлов .d.ts в вашем проекте. Но в основном они уже проверены. Если вы хотите еще больше повысить производительность, вы можете включить skipLibCheck, чтобы пропускать все файлы .d.ts.
3. --strictFunctionTypes - этот флаг позволяет уменьшить проверку присваиваемости между типами. Например, если мы знаем, что Dog расширяет Animal, мы можем пропустить такую ​​проверку для List<Dog> и List<Animals>. Этот флаг включен по умолчанию с помощью --strict.

Подробнее о производительности TS можно прочитать здесь — https://github.com/microsoft/TypeScript/wiki/Performance.

P.S. Спасибо за прочтение!

Еще статьи о разработке интерфейса:

1. 12 малоизвестных советов по JavaScript Рекомендации
2. 9 лучших советов по улучшению производительности React
3. 10 лучших советов по повышению производительности CSS
4. Некоторые маленькие секреты HTML и CSS в одной статье
5. Вверх Менее известный HTML 5 & Советы и рекомендации по CSS 3