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

Sejas
Sejas
Jan 14, 2019 · 3 min read

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

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

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/

JS School

Vídeos, Tutoriales, Noticias y experiencias de JavaScript.

JS School

Vídeos, Tutoriales, Noticias y experiencias de JavaScript. El lenguaje más popular para el desarrollo web. Frontend y FullStack. React, Vue, Angular, NodeJS, ES6 …

Sejas

Written by

Sejas

Remote Software Engineer & Machine Learning Scientist — Mobile Lead Developer (React Native) @ Woonivers. Writer @ JS School - https://jsschool.es

JS School

Vídeos, Tutoriales, Noticias y experiencias de JavaScript. El lenguaje más popular para el desarrollo web. Frontend y FullStack. React, Vue, Angular, NodeJS, ES6 …

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store