Числовые разделители TypeScript

При просмотре больших чисел в коде (например, 1800000) человеческому глазу трудно быстро увидеть, насколько велико число на самом деле. TypeScript позволяет нам использовать числовые разделители для записи чисел в более читабельном формате (например, 1_800_000), сохраняя при этом сгенерированный JavaScript без изменений.

Если бы у нас было огромное число (например число населения земли) то, было бы трудно с первого взгляда сказать, насколько значительным оно является на самом деле.

// население земли 7725775973

Вне программирования мы обычно используем запятые, чтобы другим людям было проще читать большие числа. В нашем случае, если мы добавим запятые в каждой третьей позиции, мы можем сразу сказать, что это примерно 7,7 миллиарда.

// население земли 7,725,775,973

Теперь, начиная с TypeScript 2.7, мы можем добавлять подчеркивания в качестве числовых разделителей к числам в коде:

// население земли 7725775973

const worldPopulation = 7_725_775_973;

Это не только делает код более читабельным, но и никак не влияет на конечный результат. Если мы посмотрим на результат в JavaScript, то увидим, что все подчеркивания скомпилированы.

// население земли 7725775973
var worldPopulation = 7725775973;

Как локально настроить TypeScript можно почитать здесь или открыть онлайн компилятор.

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

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

Для более реального примера используем class AmountInput. Вверху создаём private static запись, чтобы указать поддерживаемую сумму MAX_ALLOWED и amount типа number для хранения введенной суммы.

class AmountInput {
  private static MAX_ALLOWED = 99_999_999;

  amount: number = 0;
}

Также создаём метод showTooltip, который в свою очередь создаёт всплывающую подсказку, а затем скроет её через несколько секунд. Добавляем метод formatMillion, который берёт текущую сумму и возвращает отформатированную строку в миллионах.

class AmountInput {
  private static MAX_ALLOWED = 99_999_999;

  amount: number = 0;

  showTooltip() {
    setTimeout(() => {
    }, 2_500);
  }

  formatMillion() {
    return this.amount / 1_000_000 + "M";
  }
}

Несмотря на то, что мы добавили всего несколько подчеркиваний к числам в этом классе, мы сделали общее восприятие чтения немного более легким.