Aprenda los tipos de datos de TypeScript: de cero a héroe

Está de moda en estos días en el mundo del desarrollo web: TypeScript. Apuesto a que a estas alturas ya se habrá enterado, incluso de pasada. Pero, si no lo has hecho o si solo tienes curiosidad, ¡has venido al lugar correcto, amigo mío!

Actualmente estoy aprendiendo TypeScript junto con Angular (un artículo sobre esto está en proceso, ¡así que estad atentos!) Porque es lo que nuestra aplicación web está integrada en el trabajo. Decidí escribir algo fácil y simple de seguir para que pueda comenzar a usar los tipos de datos de TypeScript.

Dividiré este artículo en dos publicaciones para simplificar: la primera será una breve descripción general de lo que es TypeScript, los tipos de datos y algunos ejemplos de apoyo. El segundo artículo se centrará en instalar TypeScript y ejecutarlo localmente en su máquina.

¿Qué es?

Antes de comenzar, aquí hay una descripción súper condensada de TypeScript en mis propias palabras. Es un superconjunto de JavaScript, lo que esencialmente significa que es una forma de JavaScript que le brinda ciertos beneficios junto con toda la grandeza incluida en JavaScript 'vanilla'. Es un lenguaje de código abierto escrito y mantenido por Microsoft.

TypeScript se transpila a JavaScript y se ejecutará en cualquier entorno que ejecute JavaScript nativo. Puede utilizar TypeScript para aplicaciones tanto de front-end como de back-end.

Está escrito como JavaScript, con algunas excepciones que repasaremos pronto. Aquí hay un ejemplo de algo de TypeScript:

Trate de no concentrarse en todos los dos puntos y cosas adicionales que ve arriba, profundizaremos en eso a continuación. En su lugar, concéntrese en las cosas que se destacan: solo estamos declarando variables con valores, que son cadenas, matrices y objetos como en JavaScript.

Otra gran cosa que he aprendido sobre TypeScript es que puedes mezclar JavaScript con el código y no tienes problemas para hacerlo. Verifique la captura de pantalla a continuación (esto está dentro de una aplicación Angular):

Tipos de datos

Comencemos con las cosas divertidas: ¡tipos de datos! (Hay algunos tipos de datos que no cubriremos: nunca, nulo, indefinido. Esto se debe simplemente a que no hay mucho para ellos. Quiero que sepa que existen y si desea profundizar más en esos tipos, aquí hay un enlace a la documentación oficial de TypeScript para su referencia).

TypeScript inferirá el tipo de datos asignados a una variable sin que usted establezca explícitamente el tipo, pero por simplicidad y buena medida, me gusta declarar el tipo de datos al declarar mis variables.

Asignamos tipos de datos simplemente colocando dos puntos después del nombre de la variable pero antes del signo igual:

const {nombre de variable}: {tipo de variable} = {valor de variable }

Esta es la convención de que la mayoría de los tipos de datos de TypeScript se declaran con la excepción de funciones y objetos.

Algunos tipos de datos vienen con un poco más de complejidad que eso, pero te haces una idea general. A continuación, se ofrecen breves explicaciones de los tipos de datos y ejemplos de cómo declararlos.

Booleano

Los valores booleanos en TypeScript funcionan de la misma manera que en JavaScript. Las variables de tipo de datos booleanos se declaran así:

const myBool: boolean = false;

Cuerda

Las cadenas en TypeScript funcionan de la misma manera que en JavaScript. Las variables de tipo cadena de datos se declaran así:

let myString: string = 'bacon'

Número

Los números en TypeScript funcionan de la misma manera que en JavaScript. Las variables de número de tipo de datos se declaran así:

const myNum: number = 1207;

Formación

Las matrices en TypeScript son, como otros tipos de datos, como las matrices en JavaScript. Las variables de la matriz de tipos de datos se declaran de dos formas distintas:

const myArr: number[] = [12, 90, 71];

La forma anterior es cómo declararía una matriz si todos los elementos dentro de esa matriz son números.

const myArr: Array = [12, 90, 71];

Esta forma de declarar una matriz utiliza el tipo de matriz genérico establecido en número. Funcionalmente, no hay diferencia en cómo estas formas producen el resultado final de declarar una variable con tipo de matriz.

Si los tipos de datos dentro de la matriz son desconocidos o una mezcla de tipos de datos, la matriz se puede declarar usando el type (este es un tipo por sí solo que se analiza a continuación):

const myArr: Array = [12, 'thirteen', false];

De esta forma, podrá mezclar tipos de datos en la matriz.

Tuplas

Las tuplas son un tipo de datos exclusivo de TypeScript. Piense en ellos como matrices con un número fijo de elementos. Este tipo de datos se utiliza mejor cuando se sabe exactamente cuántas variables debe tener. Es posible reasignar el valor de los índices pero no la cantidad de elementos en la tupla.

Las variables de tupla de tipo de datos se declaran como una matriz:

let mine: [number, string];

Si queremos cambiar los valores de los elementos, podemos hacerlo siempre que coincidan con los tipos que proporcionamos al declarar nuestra variable:

mine[0] = 14  ✔️

mine[0] = 'Steve'

Dado que lo definimos minecomo una tupla, el orden de los valores también importa y no se puede cambiar.Además, asignar un índice fuera del número original definido producirá un error:

mine[0] = ['Dave', 71]  ❌

mine = [121, 'Dave', 'Steve'];

mine = [121, 'bacon'];  ✔️

Función

Las funciones pueden ser tan explícitas como quieras. Lo que quiero decir con eso es que podemos aplicar tipos a los parámetros y valores devueltos. A continuación se muestran dos ejemplos:

Esta función arrojará un error si se devuelve algún valor que no sea un número. Puede devolver una variable solo si esa variable apunta a un número.

Arriba, estamos verificando los parámetros que se pasan a nuestra función. Esta es una excelente manera de evitar errores porque si el número de parámetros está desactivado o si su tipo de datos no coincide con lo que esperamos, TypeScript nos avisará con un error.

Si quiero una función que no devuelva un valor, puedo establecer el tipo como vacío (un tipo de datos que significa la ausencia de datos. Si bien se puede usar al declarar variables, generalmente no lo es porque entonces tendríamos para establecer la variable en nula o indefinida , solo he usado cuando las funciones no deberían tener un valor de retorno) y si la función devuelve algo, TypeScript arrojará un error:

Al establecer el tipo en void , estoy siendo explícito sobre mis devoluciones y estableciendo que, si bien esta función aún puede ejecutarse, no debería devolver un valor. Si devuelve un valor, obtendré un error.

Enum

Las enumeraciones son una adición bienvenida (en mi humilde opinión) a los tipos de datos. Piense en ellos como un enfoque más fácil de usar para dar nombres a valores numéricos. A continuación, se muestra un ejemplo de una enumeración:

enum Foods {'bacon', 'tomato', 'lettuce'};

console.log (Foods [0]) // produce 'tocino' console.log (Foods.bacon) // produce 0 console.log (Foods ['lechuga']) // produce 2

También es posible asignar el formato de índice de numeración con enumeraciones. Muchos lenguajes, incluido C #, tienen enumeraciones y estoy feliz de verlos llegar a JavaScript.

Puedes ser tan creativo como quieras con los nombres. Incluso puede cambiar la representación numérica de los índices. Si desea que su primer índice comience en 18 en lugar de 0, es tan simple como:

enum Foods {'bacon'= 18, 'tomato', 'lettuce'};

console.log(Foods['bacon']); // 18

Digamos que teníamos el valor 18 pero no estábamos seguros de a qué se asignaba en nuestra Foodsenumeración, también podemos verificarlo:

console.log(Foods[18]); // 'bacon'

Un dato digno de mención es ahora que hemos configurado el primer índice para que comience en 18, el siguiente índice será 19, y así sucesivamente siguiendo la convención de numeración que establezca.

Objeto

Los objetos en TypeScript se definen de manera similar a como se definen los objetos en JavaScript. Podemos ser tan implícitos o explícitos con nuestra definición como queramos o como dicta la situación:

let data: = {name: 'Jonathan', age: 30, hobbies: ['running','swimming','coding']};  ✔️

let data: {name: string, age: number, hobbies: string[]} = {name: 'Jonathan', age: 30, hobbies: ['running','swimming','coding']};  ✔️

Al crear objetos, los nombres de las propiedades son inmutables, pero el orden en el que aparecen no importa, incluso si los definimos en un orden específico.

Además, podemos tener objetos simples como los anteriores, o podemos definir objetos complejos que aprovechan múltiples tipos de datos como el siguiente (este objeto es solo para fines de demostración):

Tipo Alias ​​/ Interfaz

Con el ejemplo de un objeto complejo anterior, podría estar pensando que esto es increíble, pero ¿qué sucede la próxima vez que necesite crear un objeto complejo? ¿Necesito escribir todo esto manualmente de nuevo?

No temas, el alias de tipo y los tipos de interfaz están aquí para ayudarte. Un alias de tipo es un tipo de datos que nos permite guardar otros tipos de datos dentro de él y luego hacer referencia a una variable en lugar de reescribir el código una y otra vez.

Como nota al margen, los alias de tipos y las interfaces funcionan de manera muy similar. Ambos nos permiten diseñar un objeto / plano sobre cómo deben estructurarse nuestros datos. Sin embargo, existen diferencias sutiles que no cubriremos aquí. En cambio, aquí hay una publicación que explica esas diferencias de una manera extremadamente eficiente si desea profundizar más.

Hay detalles entre los dos que debemos tener en cuenta: cuando usamos el alias de tipo, usamos un signo igual (=) para declarar valores, la interfaz no requiere un signo igual.

Ahora que hemos declarado nuestro alias, es hora de hacer uso de ese alias. Cuando queremos "construir" nuestra nueva variable a partir de este alias, simplemente la configuramos como el tipo de datos:

Es importante tener en cuenta que la interfaz es específica de TypeScript. Se usa solo en tiempo de compilación para hacer la verificación de tipos y para detectar cualquier error que pueda haber pasado por alto nuestro ojo atento.  Los datos de nuestra interfaz terminarán en nuestro código final, pero la interfaz en sí está compilada .

Clases

Las clases son, en parte, el verdadero "pan y mantequilla" de TypeScript (al menos en mi humilde opinión). Siguiendo con esta idea de andamiaje de nuevos objetos, las clases nos permiten construir datos de una manera mucho más fácil que simplemente escribirlos manualmente cada vez que surge la necesidad.

Las clases se pueden considerar como modelos de cómo se deben definir nuestros datos y qué acciones, si las hay, deben ser capaces de realizar a través de métodos.

A continuación se muestra un ejemplo de una clase en TypeScript (que es posible gracias a la introducción de clases en ES6):

Ahora, podría preguntarse cuáles son las diferencias entre una clase , un alias de tipo y una interfaz . ¡Gran pregunta! La principal diferencia entre las clases es que se pueden crear instancias (podemos crear nuevas instancias de ellas) pero una interfaz no.

Por supuesto, existen otras diferencias, pero eso no se incluye en el alcance de este artículo. Si desea profundizar más, aquí hay un excelente artículo que leí para ayudarme a comprender esas diferencias. Encontrará casos de uso para todos ellos, como yo, cuando use TypeScript.

Unión

¡Este es, de lejos, mi tipo de datos favorito de TypeScript! El tipo de unión nos permite declarar una variable y luego establecerla en un valor "o bien". Lo que quiero decir con eso es digamos que esperamos que los datos se pasen a una función, pero no estamos seguros de si es una cadena o un número; este es el propósito perfecto (y previsto) del tipo de unión.

Usamos el carácter de tubería única (en Windows es Shift + la tecla justo encima de Enter) al definir el tipo. Así es como se vería al definir una variable con un tipo de datos de unión:

const numOfDoors: string | string[ ];

Esto le dice a TypeScript que numOfDoors es una variable que puede contener una cadena o una matriz de cadenas.

Aquí hay un ejemplo de esa función que mencioné anteriormente usando el tipo de unión:

Ninguna

Cualquiera es el tipo que establecemos cuando no estamos seguros de los tipos de datos que obtendremos. Tal vez obtenemos algo de un tercero o algunos datos dinámicos y no estamos 100% seguros de si obtenemos una cadena, un número o tal vez una matriz de información. Este es el caso de uso perfecto para cualquier tipo .

Te advertiré sobre el uso de type any a menos que sea absolutamente necesario porque cuando se usa estamos excluyendo una de las características principales de TypeScript: la verificación de tipos.

Sin embargo, este tipo de datos tiene sus casos de uso al igual que todos los tipos de datos mencionados.

¡Eso es un envoltorio!

Te dije que esto no tomaría mucho tiempo: D

Espero que haya disfrutado de este artículo sobre TypeScript y esté emocionado de cómo puede resultar útil para su código base. En el próximo artículo, profundizaremos en el lado práctico de TypeScript. ¡Repasaremos su instalación, compilación y uso en su proyecto (no solo proyectos de Angular)!

Esto se publicó originalmente en mi blog.

Mientras esté allí, no olvide suscribirse a mi Newsletter ; puede hacerlo en la parte superior derecha de la página. Prometo que nunca enviaré spam a su bandeja de entrada y su información no se compartirá con nadie / sitio. Me gusta enviar ocasionalmente recursos interesantes que encuentro, artículos sobre desarrollo web y una lista de mis publicaciones más recientes.

Si aún no lo has hecho, ¡también puedes conectarte conmigo en las redes sociales! Todos mis enlaces también se encuentran en la parte superior derecha de esta página. Me encanta conectarme con los demás y conocer gente nueva, así que no temas saludar :)

¡Que tengas un buen día amigo y una codificación feliz!