Tipos de datos en TypeScript (III). Cadenas y tipos personalizados

Las cadenas literales es un tipo de datos del que disponemos en cualquier lenguaje de programación. En TypeScript, sin embargo, nos ofrecen algunas peculiaridades que debemos conocer.

En este artículo vamos a ver cómo declarar y manejar cadenas de datos. No entraremos en los métodos propios de String de JavaScript, ya que, como ya sabemos, al ser TypeScript un superconjunto de JavaScript, todos los métodos y propiedades de este lenguaje están disponibles también aquí, y funcionan exactamente igual. Sí veremos, sin embargo, construcciones que están disponibles en la versión ES6, pero que resulta interesante destacar.

Este artículo está orientado a conocer los datos de cadena vistos desde el prisma específico de TS, y cómo podemos sacarles partido en nuestro código. Algunas peculiaridades te sonarán familiares de otros lenguajes, aunque aquí tienen su sintaxis específica.

DECLARANDO VARIABLES DE CADENA Y PLANTILLAS

Declarar variables de cadena en TS es tan sencillo como asignarles el tipo string. Por ejemplo, así:

let nombre: string = "Antonio";

Además, podemos crear plantillas literales. Estas son cadenas que, en lugar de acotarse con comillas simples ('valor') o dobles ("valor") del modo tradicional, se acotan con acentos invertidos, también llamados graves (valor). A título meramente anecdótico, este tipo de acotado, poco habitual, se emplea en algunos contextos, como, por ejemplo, los nombres de campos en tablas MySQL.

Las plantillas permiten introducir variables de tipo string, o de otro tipo, acotándolas entre ${ y }, de forma que el valor de estas variables se integre en la plantilla, formando una cadena. Veamos un ejemplo en tipos_de_datos_3_1.ts:

Lo más llamativo es que, cuando transpilas, obtienes (casi) exactamente lo mismo:

Esto se debe a que las plantillas son una construcción que ya ha sido implementada en ES6 (JavaScript 2015). El resultado en la consola del navegador, cuando cargas el script desde un HTML, es el siguiente:

Las plantillas permiten escribir el contenido en varias líneas en el código, lo que es especialmente interesante cuando dicho contenido es especialmente largo. Si tuviéramos que escribirlo en una sólo línea, el código resultaría más complicado de leer y mantener. Observa tipos_de_datos_3_2.ts:

Cuando transpilamos y cargamos el resultado en un navegador vemos como se muestra el HTML final en la página, así:

El nombre de esta persona es Laura
Su salario es de 1342.69 euros/mes.

TIPOS PERSONALIZADOS DE DATOS

Una característica de TypeScript es que se pueden definir tipos personalizados de datos. Esto se sale un poco del contexto de este artículo (vale, se sale mucho), pero me ha parecido interesante incluirlo aquí, porque nos permite jugar de una forma muy particular con los datos, y nos va a servir de introducción al siguiente artículo de esta serie. Además, aunque los tipos de datos personalizados pueden incluir cadenas o números, se suele emplear más con cadenas. Lo que hacemos es usar la palabra reservada type, seguida del nombre que queremos darle a nuestro tipo, y los valores que puede asumir, separados por pipes (|). Por ejemplo, imaginemos un tipo de datos que contenga una colección de nombres de colores, así:

type Colores = "Verde" | "Negro" | "Rojo" | "Azul";

Si ahora declaramos una variable del tipo Colores podrá tener cualquier valor de los que le hemos asignado a ese tipo, pero ningún otro. Mira el código tipos_de_datos_3_3.ts:

Observa la función que declaramos en la línea resaltada. Como argumento recibe una variable, llamada color, del tipo Colores. Esta sintaxis, en la que el tipo de una variable se especifica en el parámetro de la declaración de la función es muy habitual en TS, y debes familiarizarte con ella. Cuando transpilamos, obtenemos tipos_de_datos_3_3.js:

Observa que la declaración del tipo de dato Colores no aparece por ninguna parte. Esto se debe a que los tipos de datos personalizados no es una construcción que acepte JavaScript. Si cargas este código JS en un documento HTML y lo llamas desde tu navegador verás que funciona correctamente. Sin embargo, imagina que ahora, en tu TypeScript intentas añadir la siguiente línea:

mostrarColor("Blanco");

Como Blanco no es un valor que esté incluido en el tipo Colores, al intentar transpilar se producirá un error y no se generará el código JavaScript.

Este concepto es muy interesante, porque nos permite vislumbrar una de las muchas formas en que TypeScript extiende JavaScript, y nos servirá de introducción a las colecciones de datos.

CONCLUYENDO

En este artículo hemos visto como podemos sacarle partido a las cadenas literales, y también hemos aprendido a crear y usar tipos personalizados de datos. Los códigos para que experimentes con ellos están en este enlace.

   

Deja un comentario