Los separadores numéricos de TypeScript harán tu código más legible

Cuando escribimos grandes números, como or ejemplo 999999, es difícil saber qué número es a golpe de vista. Y tendremos que pararnos a contar las unidades para saber realmente qué número es.
Afortunadamente Typescript nos permite separar los números de una forma más parecida a la humana. 999_999 en vez de usar . usaremos _.

Y no te preocupes, el código generado en javascript seguirá como siempre, es decir sin el separador.

¿Quieres aprender TypeScript?

Danos unos aplausos 👏

y 💌 suscríbete para recibir más recursos gratis.

Contenido

Imagínate que estamos trabajando con las poblaciones del mundo. Estarás de acuerdo conmigo que será difícil saber cuan grande será ese número.

index.ts

// población de España: 46441049
const spanishPopulation = 46441049

Para descubrir qué número es, estaremos obligados a contar unidades.

Cotidianamente representaríamos el número separado por puntos.
O si usamos la notación anglosajona, lo separaríamos por comas.
En cualquier caso conseguimos que el número sea mucho más legible. De esta forma, en un simple vistazo conseguimos ver que la población de España son más de 46 millones.

// población de España: 46.441.049
// población de España: 46,441,049
const spanishPopulation = 46441049

Desde TypeScript 2.7 podemos usar el separador numérico _.

// población de España: 46.441.049
const spanishPopulation = 46_441_049

Con esto conseguimos un código más legible, sin embargo estos separadores son eliminados en el código javascript generado.

index.js

// población de España: 46.441.049
const spanishPopulation = 46441049

TypeScript no te obliga a utilizar el underscore _ de forma particular.
Puedes ponerlo después de cada número. Incluso en los propios decimales.
La compilación no fallará, pero tu código será menos legible

index.ts

// población de España: 46.441.049
const spanishPopulation = 4_6_4_4_1_0_4_9.0_0_1

Ejemplo

Ahora veremos cómo utilizar el separador numérico en un ejemplo real.
Aquí creamos la clase ZombieGame. Podrás ver que tiene una propiedad privada y estática con la puntuación máxima. Y una propiedad de tipo number que usaremos para guardar la puntuación actual del jugador.

class ZombieGame {
  private static MAX_SCORE = 9_999_999;
  score: number = 0;
}

A continuación crearemos un par de métodos. updateScoreWithAnimationactualizará el valor de la puntuación con efecto de animación.
getScoreInThousands devolverá la puntuación del jugador en “Miles”.

class ZombieGame {
  private static MAX_SCORE = 9_999_999;
  score: number = 0;
  updateScoreWithAnimation(score) {
    //start animation
    this.score = score
    setTimeout(() => {
      //finish animation
    }, 2_500);
  }
  getScoreInThousands() {
    return this.score / 1_000 + "K";
  }
}

En este ejemplo habrás comprobado que hemos usado el separador numérico _ en los sitios relevantes.
Y estarás de acuerdo conmigo en que la lectura de los números es mucho más sencilla, necesitando mucha menos concentración.

Si quieres mejorar como desarrollador utiliza el separador numérico _, tus compañeros se enamorarán de tu código.

Sígueme para recibir más artículos y tutoriales:

* Twitter @antoniosejas — @jsschool_es — 🙌

* Facebook https://www.facebook.com/jsschool.es/