Artículo original: How Types Work in TypeScript – Explained with JavaScript + TypeScript Code

TypeScript es un superconjunto de JavaScript que introduce el tipado estático en JavaScript. La seguridad de tipos mejorada y la capacidad de mantenimiento del código de TypeScript permiten a los desarrolladores escribir código con más confianza.

Un aspecto fundamental del sistema de escritura estática de TypeScript es su soporte para tipos básicos. Estos proporcionan una base para definir la forma y el comportamiento de los datos dentro de las aplicaciones TypeScript.

En esta guía completa, exploraremos los tipos básicos de TypeScript comparándolos con sus homólogos de JavaScript. También aclararé las diferencias y ventajas que ofrecen las funciones de escritura estática de TypeScript.

Puede obtener todo el código JavaScript y TypeScript desde aquí.

Entendiendo el tipado

El tipado en TypeScript implica especificar explícitamente el tipo de datos de las variables, los parámetros de función y los valores de retorno. Esta anotación mejora la claridad del código y permite que la verificación de tipos estáticos de TypeScript detecte errores durante la compilación. Esto mejora la calidad y el mantenimiento del código.

En TypeScript, las anotaciones de tipo se escriben utilizando dos puntos (:) seguidos del tipo deseado. Exploremos cómo se aplican las anotaciones de tipo en los tipos básicos de TypeScript:

Tipos Básicos: JavaScript vs TypeScript

Boolean

Así es como escribirías un valor booleano en JavaScript:

let estaHecho = false;
console.log("estaHecho:", estaHecho); // Salida: estaHecho = false
if (!estaHecho) {
    console.log("La tarea no ha finalizado");
}

En JavaScript, una variable booleana estaHecho se declara e inicializa con el valor false. La condición !estaHecho comprueba si estaHecho es false y, si es verdadero, registra un mensaje que indica que la tarea aún no ha finalizado.

Y así es como declararías un booleano en TypeScript:

let estaHecho: boolean = false;
console.log("estaHecho :", estaHecho ); // Salida: estaHecho = false
if (!estaHecho ) {
    console.log("La tarea no ha finalizado");
}

En TypeScript, la misma variable booleana estaHecho se declara con una anotación de tipo explícita: boolean que indica que solo puede contener valores booleanos. El comportamiento y el resultado siguen siendo los mismos que los de JavaScript.

Números

Así es como se declara un número en JavaScript:

let contador = 42;
let precioTotal = 24.99;
let cantidad = 10;
console.log("contador:", contador); // Salida: contador: 42
console.log("precioTotal:", precioTotal); // Salida: precioTotal: 24.99
console.log("cantidad:", cantidad); // Salida: cantidad: 10

En JavaScript, las variables numéricas contador, precioTotal y cantidad se declaran e inicializan con valores numéricos. Cada valor representa un tipo numérico diferente (entero, punto flotante, entero respectivamente).

Y en TypeScript:

let contador: number = 42;
let precioTotal: number = 24.99;
let quantity: number = 10;
console.log("contador:", contador); // Salida: contador: 42
console.log("precioTotal:", precioTotal); // Salida: precioTotal: 24.99
console.log("cantidad:", cantidad); // Salida: cantidad: 10

En TypeScript, el tipado: number se agregan a cada declaración de variable, especificando explícitamente que solo pueden contener valores numéricos. Esto proporciona claridad y seguridad de escritura similar a JavaScript.

Cadenas

Así es como se escribe una cadena en JavaScript:

let mensaje = "Hola, JavaScript!";
let primerNombre = "John";
let apellido = "Doe";
console.log("mensaje:", mensaje); // Salida: mensaje: Hola, JavaScript!
console.log("primerNombre:", primerNombre); // Salida: primerNombre: John
console.log("apellido:", apellido); // Salida: apellido: Doe

En JavaScript, las variables de cadena mensaje, PrimerNombre y apellido se declaran e inicializan con valores de cadena.

Y así es como se hace en TypeScript:

let mensaje: string = "Hola, TypeScript!";
let primerNombre: string = "John";
let apellido: string = "Doe";
console.log("mensaje:", mensaje); // Salida: mensaje: Hola, TypeScript!
console.log("primerNombre:", primerNombre); // Salida: primerNombre: John
console.log("apellido:", apellido); // Salida: apellido: Doe

En TypeScript, el tipado: string se agregan a cada declaración de variable, especificando explícitamente que solo pueden contener valores de cadena. Esto mejora la legibilidad y el mantenimiento del código.

Arreglos

Así es como puedes declarar un arreglo en JavaScript:

let numeros = [1, 2, 3, 4, 5];
let frutas = ["manzana", "banana", "naranja"];
console.log("numeros:", numeros); // Salida: numeros: [1, 2, 3, 4, 5]
console.log("frutas:", frutas); // Salida: frutas: ["manzana", "banana", "naranja"]

En JavaScript, los arreglos de numeros y frutas se declaran e inicializan con valores numéricos y de cadena respectivamente.

Así es como se hace en TypeScript:

let numeros: number[] = [1, 2, 3, 4, 5];
let frutas: string[] = ["manzana", "banana", "naranja"];
console.log("numeros:", numeros); // Salida: numeros: [1, 2, 3, 4, 5]
console.log("frutas:", frutas); // Salida: frutas: ["manzana", "banana", "naranja"]

En TypeScript, se agregan tipados para declarar arreglos con tipos de elementos específicos (: number[] y : string[]), asegurando que solo se puedan almacenar valores numéricos o de cadena en arreglos de números y frutas, respectivamente.

Tupla

Así es como escribirías una tupla en TypeScript:

let persona: [string, number] = ["John", 30];
console.log("persona:", persona); // Salida: persona: ["John", 30]

En TypeScript, una tupla persona se declara con una anotación de tipo explícita [string, number], lo que indica que debe contener una cadena seguida de un número. Almacena el nombre y la edad de una persona.

Y aquí está la simulación de JavaScript:

// JavaScript no tiene soporte nativo para tuplas, pero podemos usar arreglos
let persona = ["John", 30];
console.log("persona:", persona); // Salida: persona: ["John", 30]

En JavaScript, dado que las tuplas no son compatibles, los arreglos se utilizan a menudo como solución alternativa para simular un comportamiento similar a una tupla. El arreglo persona almacena el nombre y la edad de una persona, similar al ejemplo de TypeScript.

Enum

Así es como declararías una enumeración en TypeScript:

enum Direccion {
    Arriba,
    Abajo,
    Izquierda,
    Derecha
}
let direccion: Direccion = Direccion.Arriba;
console.log("direccion:", direccion); // Salida: direccion: 0

En TypeScript, una direccion de enumeración se declara con constantes nombradas Arriba, Abajo, Izquierda y Derecha, a las que se les asignan valores numéricos a partir de 0 de forma predeterminada. A la variable de direccion se le asigna el valor Direccion.Arriba.

Y aquí está la simulación de JavaScript:

// JavaScript no soporta de manera nativa los enums, pero podemos usar objetos o constantes
const Direccion = {
    Arriba: 0,
    Abajo: 1,
    Izquierda: 2,
    Derecha: 3
};
let direccion = Direccion.Up;
console.log("direccion:", direccion); // Salida: direccion: 0

En JavaScript, las enumeraciones no son compatibles de forma nativa, por lo que a menudo se utilizan objetos o constantes para simular un comportamiento similar a una enumeración. Aquí, el objeto Direccion contiene constantes con nombre asignadas a valores numéricos, y a la variable de direccion se le asigna el valor de Direccion.Arriba similar al ejemplo de TypeScript.

Conclusión

Los tipos básicos de TypeScript brindan ventajas significativas sobre JavaScript tradicional en términos de seguridad, claridad y mantenibilidad de tipos.

Al introducir tipado explicito y estructuras, como tuplas y enumeraciones, TypeScript permite a los desarrolladores escribir código más sólido y sin errores.

Comprender las diferencias entre los tipos básicos de JavaScript y TypeScript es esencial para aprovechar todo el potencial de las capacidades de escritura estática de TypeScript en el desarrollo web moderno.

Si tiene algún comentario, puede enviarme un mensaje de texto en Twitter o LinkedIn.