Advertisement
  1. Code
  2. TypeScript
Code

TypeScript para Principiantes, Parte 2: Tipos Básicos de Datos

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called TypeScript for Beginners.
TypeScript for Beginners, Part 1: Getting Started
TypeScript for Beginners, Part 3: Interfaces

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

Después de haber leído el tutorial introductorio de TypeScript, usted ahora debería poder escribir su propio código de TypeScript en un IDE que lo admita y luego compilarlo a JavaScript. En este tutorial, usted aprenderá sobre los diferentes tipos de tipos de datos disponibles en TypeScript.

JavaScript tiene siete tipos de datos diferentes: Null, Indefinido, Booleano, Número, Cadena, Símbolo (introducido en ES6) y Objeto. TypeScript define algunos tipos más, y todos ellos se tratarán en detalle en este tutorial.

El tipo de datos Null

Al igual que en JavaScript, el tipo de datos null en TypeScript solo puede tener un valor válido: null. Una variable null no puede contener otros tipos de datos como número y cadena de texto. Establecer una variable a null borrará su contenido si tuviese alguno.

Recuerde que cuando el indicador strictNullChecks se configura como true en tsconfig.json, solo el valor null se puede asignar a las variables con tipo null. Este indicador está desactivado por defecto, lo que significa que también puede asignar el valor null a variables con otros tipos como number o void.

El Tipo de Datos Indefinido

Cualquier variable cuyo valor no haya especificado se establece en undefined. Sin embargo, usted también puede establecer explícitamente el tipo de una variable como indefinida, como se ve en el siguiente ejemplo.

Tenga en cuenta que una variable con type configurado como undefined solo puede tener undefined como su valor. Si la opción strictNullChecks está configurada como false, también podrá asignar undefined a variables de tipo numérico y cadenas de texto, etc.

El Tipo de Datos Void

El tipo de datos void se usa para indicar la falta de un type para una variable. Establecer variables para que tengan un tipo void puede no ser muy útil, pero usted puede establecer el tipo de retorno de las funciones que no devuelven nada a void. Cuando se usa con variables, el tipo void solo puede tener dos valores válidos: null y undefined.

El Tipo de Datos Boolean

A diferencia de los tipos de datos number y string, boolean solo tiene dos valores válidos. Solo puedes establecer su valor en true o false. Estos valores se usan mucho en las estructuras de control donde una pieza de código se ejecuta si una condición es true y otra parte de código se ejecuta si una condición es false.

Aquí hay un ejemplo muy básico para declarar variables booleanas:

El Tipo de Datos Numérico

El tipo de datos number se usa para representar tanto enteros como valores de punto flotante en JavaScript y en TypeScript. Sin embargo, debe recordar que todos los números están representados internamente como valores de coma flotante. Los números también se pueden especificar como literales Hexadecimales, Octales o Binarios. Tenga en cuenta que las representaciones Octal y Binaria se introdujeron en ES6, y esto puede dar como resultado una salida de código JavaScript diferente en función de la versión a la que eatá apuntando.

Además hay tres valores simbólicos especiales adicionales que se encuentran bajo el tipo de number: +Infinity, -Infinity y NaN. Aquí hay algunos ejemplos del uso del tipo number.

Cuando la versión de destino se establece en ES6, el código anterior se compilará al siguiente JavaScript:

Usted debería tener en cuenta que las variables de JavaScript todavía se declaran con let, que se introdujo en ES6. Tampoco ve ningún mensaje de error relacionado con el type de variables diferentes porque el código JavaScript no tiene conocimiento de los tipos que usamos en el código TypeScript.

Si la versión de destino está configurada como ES5, el código de TypeScript que escribimos anteriormente se compilará en el siguiente JavaScript:

Como puede ver, esta vez todas las ocurrencias de la palabra clave let han sido cambiadas a var. También tenga en cuenta que los números octales y binarios se han cambiado a sus formas decimales.

El Tipo de Datos String

El tipo de datos string se utiliza para almacenar información textual. Tanto JavaScript como TypeScript usan comillas dobles ("), así como comillas simples (') para rodear su información textual como una cadena. Una cadena puede contener cero o más caracteres entre comillas.

TypeScript también admite plantillas de cadenas de texto o plantillas de literales. Estas plantillas de literales le permiten incrustar expresiones en una cadena de texto. Las plantillas de literales están encerrados por el carácter de retroceso (`) en lugar de comillas dobles y comillas simples que encierran cadenas de texto regulares. Fueron presentados en ES6. Esto significa que usted obtendrá diferentes resultados de JavaScript en función de la versión a la que esté apuntando. Aquí hay un ejemplo de uso de plantillas de literales en TypeScript:

En la compilación, obtendrá el siguiente JavaScript:

Como puede ver, la plantilla de literal se cambió a una cadena de texto regular en ES5. Este ejemplo muestra cómo TypeScript hace posible que use todas las funciones de JavaScript más recientes sin preocuparse por la compatibilidad.

Los tipos de datos Array y Tuple

Puede definir tipos de array de dos maneras diferentes en JavaScript. En el primer método, usted especifica el tipo de elementos de array seguidos por [] lo cual que denota un array de ese tipo. Otro método es utilizar el tipo de array genérico Array<elemType> . El siguiente ejemplo muestra cómo crear arrays con ambos métodos. Especificar null o undefined como uno de los elementos producirá errores cuando el indicador strictNullChecks sea true.

El tipo de datos de tupla le permite crear un array donde el tipo de un número fijo de elementos se conoce de antemano. El tipo del resto de los elementos solo puede ser uno de los tipos que ya ha especificado para la tupla. Aquí hay un ejemplo que lo hará más claro:

Para todas las tuplas en nuestro ejemplo, hemos establecido el type del primer elemento como number y el type del segundo elemento como string. Como solo hemos especificado un type para los dos primeros elementos, el resto de ellos puede ser una cadena de texto o un número. La creación de tuplas b y c da como resultado un error porque tratamos de usar una cadena de texto como un valor para el primer elemento cuando mencionamos que el primer elemento sería un número.

Del mismo modo, no podemos establecer el valor de un elemento de tupla como false después de especificar que solo contendrá cadenas de texto y números.  Es por eso que la última línea resulta en un error.

El Tipo de Datos Enum

El tipo de datos enum está presente en muchos lenguajes de programación como C y Java. Ha faltado en JavaScript, pero TypeScript le permite crear y trabajar con enums. Si no sabe qué son enums, le permiten crear una colección de valores relacionados con nombres memorables.

Por defecto, la numeración de enums comienza en 0, pero también puede establecer un valor diferente para el primero u otros miembros de forma manual. Esto cambiará el valor de todos los miembros que los siguen aumentando su valor en 1. También puede establecer todos los valores manualmente en un enum.

A diferencia del ejemplo anterior, el valor de Animals[3] es undefined esta vez. Esto se debe a que el valor 3 se le habría asignado a dog, pero establecemos explícitamente su valor en 11. El valor para cow permanece en 12 y no en 3 porque se supone que el valor es uno mayor que el valor del último miembro.

Los tipos Any y Never

Digamos que usted está escribiendo un programa donde el valor de una variable lo determinan los usuarios o el código escrito en una biblioteca de terceros. En este caso, no podrá establecer el tipo de esa variable correctamente. La variable podría ser de cualquier tipo, como una cadena de texto, número o booleano. Este problema se puede resolver usando el tipo any. Esto también es útil cuando está creando arrays con elementos de tipos mixtos.

En el código anterior, pudimos asignar un número a b y cambiar su valor a una cadena de texto sin obtener ningún error porque el tipo any puede aceptar todos los tipos de valores.

El tipo never se usa para representar valores que nunca se supone que ocurran. Por ejemplo, puede asignar never como el tipo de devolución de una función que nunca regresa. Esto puede suceder cuando una función siempre arroja un error o cuando está atrapada en un ciclo infinito.

Pensamientos Finales

Este tutorial le presentó todos los tipos que están disponibles en TypeScript. Aprendimos cómo la asignación de un tipo diferente de valor a una variable mostrará errores en TypeScript. Esta comprobación puede ayudarlo a evitar muchos errores al escribir programas grandes. También aprendimos cómo orientarnos a diferentes versiones de JavaScript.

Si está buscando recursos adicionales para estudiar o usar en su trabajo, consulte lo que tenemos disponible en el mercado de Envato.

En el siguiente tutorial, aprenderá sobre las interfaces en TypeScript. Si tiene alguna pregunta relacionada con este tutorial, hágamelo saber en los comentarios.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.