TypeScript
Summary: Basic Concepts - Part One
1. Basic Variables and Compilation
2. Advanced Variable Types: any, unknown, never, void
3. Data Collections: Arrays, Tuples, and Enums
4. Creation of Functions and Methods
5. Functions and Parameters: Optional, Multiple, and
Default
GitHub: [Link]
¿Qué es TypeScript y por qué es importante?
TypeScript funciona como un auditor de tipos para aplicaciones JavaScript,
ejecutándose antes de que el código se ponga en marcha. Esta característica
fundamental permite identificar problemas potenciales en la etapa de
desarrollo, evitando errores que podrían manifestarse durante la ejecución.
Por ejemplo, mientras que en JavaScript puedes realizar operaciones como
sumar una variable de tipo string (nombre) con una variable numérica (edad)
sin recibir advertencias previas, TypeScript te alertará sobre esta
incompatibilidad de tipos:
// En JavaScript (sin advertencias)
let nombre = "Juan";
let edad = 20;
let resultado = nombre + edad; // Concatenación: "Juan20"
// En TypeScript
let nombre: string = "Juan";
let edad: number = 20;
let resultado: string = nombre + edad; // Error: Type 'number' is not
assignable to type 'string'
Esta capacidad de TypeScript para detectar inconsistencias en los tipos de
datos previene errores comunes que podrían pasar desapercibidos en
JavaScript puro, mejorando significativamente la calidad y mantenibilidad del
código.
¿Cuándo deberías aprender TypeScript?
TypeScript no es recomendable como primer lenguaje de programación. Lo
ideal es contar con experiencia previa en JavaScript antes de adentrarse en
TypeScript, ya que este último se construye sobre los fundamentos del primero.
Si ya tienes experiencia con JavaScript, aprender TypeScript puede ser una
experiencia gratificante que:
• Mejora la detección temprana de errores
• Facilita el mantenimiento de código en proyectos grandes
• Proporciona mejor documentación implícita a través de los tipos
• Mejora la experiencia de desarrollo con autocompletado más preciso
El propósito de TypeScript en el desarrollo moderno
TypeScript fue diseñado específicamente para crear aplicaciones más robustas
y escalables, abordando las limitaciones que JavaScript presentaba en estos
aspectos. Al proporcionar un sistema de tipos estático, TypeScript permite a los
desarrolladores:
• Definir estructuras de datos claras
• Documentar interfaces y contratos entre componentes
• Detectar inconsistencias antes de la ejecución
• Facilitar refactorizaciones seguras
TypeScript representa una evolución natural para desarrolladores JavaScript
que buscan llevar sus habilidades al siguiente nivel, especialmente cuando
trabajan en proyectos de gran escala o en equipos numerosos donde la claridad
del código es crucial.
Introducción a TypeScript: Variables y Compilaciones Básicas
¿Qué son las variables tipadas en TypeScript?
La principal característica de TypeScript es el sistema de tipos. A diferencia de
JavaScript, donde las variables pueden cambiar de tipo durante la ejecución,
TypeScript nos permite definir explícitamente qué tipo de datos contendrá
cada variable.
Veamos algunos ejemplos básicos:
// Variable de tipo string (cadena)
let nombre: string = "min";
// Variable de tipo number (número)
let edad: number = 39;
// Variable de tipo boolean (booleano)
let desarrollador: boolean = true;
// Variable que puede ser undefined o string
let mes: undefined | string;
[Link](`Hola ${nombre}`);
[Link](mes); // Resultado: undefined
mes = "enero";
[Link]("mes actualizado:", mes); // Resultado: enero
En el ejemplo anterior, podemos observar cómo declaramos variables con
diferentes tipos:
• nombre solo puede contener texto
• edad solo puede contener números
• desarrollador solo puede ser verdadero o falso
• mes puede ser una cadena de texto o estar indefinido
¿Cómo trabajar con cadenas de texto en TypeScript?
TypeScript ofrece diferentes formas de trabajar con cadenas de texto, similar a
JavaScript. Podemos concatenar variables usando el operador + o utilizar
template literals (plantillas de cadena) con backticks (``).
let nombre: string = "min";
// Opción 1: Concatenación tradicional
[Link]("Hola " + nombre);
// Opción 2: Template literals (recomendado)
[Link](`Hola ${nombre}`);
Ambas opciones producen el mismo resultado, pero los template literals son
más legibles cuando trabajamos con cadenas largas o necesitamos insertar
múltiples variables.
¿Cómo funcionan los tipos de datos en TypeScript?
TypeScript incluye varios tipos de datos básicos que nos ayudan a definir
claramente la estructura de nuestro código:
• string: Para textos
• number: Para números (enteros y decimales)
• boolean: Para valores verdadero/falso
• undefined: Para variables sin valor asignado
• null: Para valores nulos explícitos
También podemos crear tipos unión combinando varios tipos con el
operador |:
// Esta variable puede ser undefined o string
let mes: undefined | string;
[Link]("mes inicial", mes); // undefined
mes = "enero";
[Link]("mes actualizado", mes); // enero
En este ejemplo, mes puede contener un texto o ser undefined. Esto es útil
cuando una variable puede tener diferentes tipos de valores dependiendo del
contexto.
¿Cómo experimentar con TypeScript?
La mejor manera de aprender TypeScript es experimentando con diferentes
tipos de variables y observando cómo se comportan. Te recomendamos:
1. Crear variables con diferentes tipos
2. Intentar asignar valores incorrectos para ver los errores de compilación
3. Usar [Link]() para visualizar los valores
4. Compilar y ejecutar el código para ver los resultados
Tipos de Variables Avanzado: any, unknown, never, void
Cuáles son los tipos de variables avanzados en TypeScript?
Después de familiarizarnos con los tipos básicos de TypeScript como string,
number y boolean, es momento de explorar tipos más avanzados que nos
ofrecen funcionalidades adicionales. Estos tipos especiales nos permiten
manejar situaciones particulares en nuestro código y son herramientas
poderosas cuando se utilizan correctamente.
¿Cómo funciona el tipo any?
El tipo any es probablemente el más flexible en TypeScript, ya que permite
asignar cualquier tipo de valor a una variable. Para declarar una variable de
tipo any, utilizamos la siguiente sintaxis:
let variableAny: any;
Una vez declarada, podemos asignarle diferentes tipos de valores sin
restricciones:
variableAny = "hello"; // Cadena de texto
variableAny = 42; // Número
variableAny = true; // Booleano
Es importante destacar que usar any elimina las ventajas del sistema de tipos
de TypeScript, ya que básicamente estamos diciéndole al compilador que
ignore el tipo de esta variable. Por esta razón, se recomienda limitar su uso a
situaciones donde realmente sea necesario.
¿Para qué sirve el tipo unknown?
El tipo unknown es similar a any, pero con una diferencia crucial: es más
seguro. Una variable de tipo unknown puede recibir cualquier valor, pero no
podemos realizar operaciones con ella sin antes verificar su tipo:
let variableDesconocida: unknown;
variableDesconocida = "hello";
// variableDesconocida = 42;
// variableDesconocida = true;
if (typeof variableDesconocida === "string") {
[Link]("Variable unknown es una cadena:", variableDesconocida);
}
La principal ventaja de unknown sobre any es que nos obliga a realizar
comprobaciones de tipo antes de utilizar la variable, lo que reduce la
posibilidad de errores en tiempo de ejecución.
¿Cuándo utilizar el tipo never en funciones?
El tipo never se utiliza para funciones que nunca retornan un valor,
generalmente porque:
• Lanzan una excepción
• Tienen un bucle infinito
• Terminan el programa
Un caso común es para funciones que lanzan errores:
function arrojarError(mensaje: string): never {
throw new Error(mensaje);
}
// arrojarError("Esto es un error");
El tipo never es particularmente útil para manejar casos de error en
aplicaciones complejas y para asegurar que ciertas partes del código nunca se
ejecuten normalmente.
¿Qué representa el tipo void?
El tipo void se utiliza principalmente para funciones que no retornan ningún
valor, pero que sí terminan su ejecución normalmente (a diferencia de never):
function logMessage(message: string): void {
[Link](message);
// No hay return
}
logMessage("Este es un mensaje de log");
La función con tipo void puede ejecutar código y terminar normalmente, pero
no devuelve ningún valor utilizable. Es común en funciones que realizan alguna
acción pero no necesitan retornar información.
¿Cómo elegir el tipo adecuado para cada situación?
La elección del tipo correcto depende del contexto y las necesidades
específicas:
• Usa any cuando realmente no puedas predecir el tipo (aunque es mejor
evitarlo cuando sea posible).
• Prefiere unknown sobre any cuando necesites flexibilidad pero quieras
mantener la seguridad de tipos.
• Utiliza never para funciones que lanzan excepciones o nunca terminan.
• Aplica void para funciones que realizan acciones pero no retornan valores.
Colecciones de Datos en TypeScript: Arreglos, Tuplas y Enumerados
Las colecciones de datos en TypeScript son fundamentales para manejar
múltiples valores de manera estructurada y eficiente. Cuando trabajamos con
aplicaciones reales, necesitamos organizar información relacionada, y
TypeScript nos ofrece herramientas poderosas para hacerlo con seguridad de
tipos, lo que reduce errores y mejora la mantenibilidad del código.
¿Cómo trabajar con colecciones de datos en TypeScript?
Cuando tenemos múltiples variables del mismo tipo, podemos agruparlas en
colecciones. TypeScript ofrece varias formas de trabajar con estas colecciones,
cada una con características específicas que se adaptan a diferentes
necesidades.
¿Qué son los arrays y cómo se implementan?
Los arrays son la forma más común de colección en TypeScript. Permiten
almacenar múltiples valores del mismo tipo en una sola variable.
Para declarar un array de strings:
let nombres: string[] = ["Ana", "Juan", "María"];
[Link](nombres);
También podemos crear arrays de números:
let edades: number[] = [39, 25, 30];
[Link](edades);
Una característica importante de los arrays es que pueden ser modificados en
tiempo de ejecución, añadiendo o eliminando elementos según sea necesario.
¿Cómo trabajar con arrays de tipo any?
Si necesitamos flexibilidad en los tipos de datos que almacenamos, podemos
usar arrays de tipo any:
let mixto: any[] = ["Hola", 42, true];
[Link](mixto);
Este tipo de array puede contener cualquier tipo de dato, lo que es útil en ciertos
escenarios, pero sacrifica la seguridad de tipos que TypeScript ofrece.
¿Qué son los arrays de interfaces?
Cuando necesitamos estructuras de datos más complejas, podemos crear
arrays basados en interfaces:
interface Persona {
nombre: string;
edad: number;
desarrollador: boolean;
}
let personas: Persona[] = [
{
nombre: "Avin",
edad: 30,
desarrollador: true
}
];
// Podemos añadir elementos que cumplan con la interfaz
[Link]({
nombre: "Miranda",
edad: 28,
desarrollador: true
});
[Link](personas);
Estos arrays garantizan que todos los elementos tengan la misma estructura, lo
que hace el código más predecible y fácil de mantener.
¿Qué son las tuplas y en qué se diferencian de los arrays?
Las tuplas son colecciones con un número fijo de elementos, donde cada
posición puede tener un tipo específico:
let personaTupla: [string, number, boolean] = ["Avin", 30, true];
[Link](personaTupla);
La diferencia crucial entre tuplas y arrays es que las tuplas no pueden ser
modificadas después de su creación. Una vez definidas, su estructura
permanece inmutable, lo que proporciona mayor seguridad en ciertos
escenarios.
Para recorrer los elementos de una tupla, podemos usar un bucle forEach:
let [nombre, edad, desarrollador] = personaTupla;
[Link](nombre);
[Link](edad);
[Link](desarrollador);
¿Cómo utilizar enumeradores para limitar valores?
Los enumeradores (enums) son una característica poderosa que permite
definir un conjunto de constantes con nombre:
enum DiaSemana {
Lunes,
Martes,
Miercoles,
Jueves,
Viernes,
Sabado,
Domingo
}
let dia: DiaSemana = [Link];
[Link](dia); // Muestra: 6 (índice numérico)
[Link](DiaSemana[dia]); // Muestra: "Domingo" (nombre)
Los enumeradores son especialmente útiles para limitar las opciones
disponibles y hacer el código más legible. Si intentamos asignar un valor que no
está en el enumerador, TypeScript mostrará un error:
// Esto generaría un error
// let diaInvalido: DiaSemana = [Link];
¿Por qué son importantes las colecciones tipadas en TypeScript?
El uso de colecciones tipadas en TypeScript ofrece múltiples ventajas:
• Prevención de errores: El sistema de tipos detecta inconsistencias antes de
ejecutar el código.
• Mejor documentación: El tipo de una colección comunica claramente qué
datos contiene.
• Autocompletado mejorado: Los editores pueden ofrecer sugerencias más
precisas.
• Refactorización más segura: Los cambios en la estructura de datos se
propagan a todo el código.
Creación de Funciones y Métodos.
La programación en TypeScript se vuelve más poderosa cuando dominas sus
funciones y métodos, elementos fundamentales que permiten organizar y
reutilizar código de manera eficiente. Estas estructuras son la columna
vertebral de cualquier aplicación bien diseñada, permitiéndote crear
soluciones elegantes y mantenibles. Veamos cómo implementar y aprovechar
estas herramientas esenciales en tus proyectos.
¿Cómo crear funciones básicas en TypeScript?
Las funciones en TypeScript siguen una estructura clara que permite definir su
comportamiento y los datos que manejan. Para crear una función básica,
necesitamos utilizar la palabra reservada function, seguida del nombre que
queremos asignarle y los parámetros que recibirá.
Una función simple que no devuelve ningún valor (tipo void) se puede
implementar así:
function imprimeMensaje(mensaje: string): void {
[Link](mensaje);
}
imprimeMensaje("Hola, soy un mensaje");
En este ejemplo:
• Definimos una función llamada imprimeMensaje
• Recibe un parámetro de tipo string llamado mensaje
• No devuelve ningún valor (tipo void)
• Dentro de la función, utilizamos [Link] para mostrar el mensaje
recibido
• Finalmente, invocamos la función pasándole una cadena de texto
Para ejecutar este código, primero debemos compilarlo con el comando tsc y
luego ejecutarlo con node:
tsc [Link]
node [Link]
El resultado será la impresión del mensaje "Hola, soy un mensaje" en la consola.
¿Cómo crear funciones que devuelven valores?
Una de las ventajas principales de las funciones es su capacidad para procesar
datos y devolver resultados. En TypeScript, podemos especificar claramente el
tipo de dato que devolverá nuestra función.
Veamos un ejemplo de una función que suma dos números:
function sumar(numero1: number, numero2: number): number {
return numero1 + numero2;
}
let resultado: number;
resultado = sumar(5, 10);
[Link]("Tu resultado es", resultado);
En este caso:
• La función sumar recibe dos parámetros de tipo number
• Especificamos que devolverá un valor de tipo number
• Creamos una variable resultado para almacenar el valor devuelto
• Invocamos la función con los valores 5 y 10
• Mostramos el resultado en la consola
El tipado estricto de TypeScript nos ayuda a prevenir errores al asegurarse de
que los valores que pasamos y recibimos son del tipo correcto.
Alternativas para utilizar el resultado de una función
Existen diferentes formas de utilizar el valor devuelto por una función:
1. Asignándolo a una variable:
let resultado: number = sumar(5, 10);
[Link]("Tu resultado es", resultado);
2. Utilizándolo directamente:
[Link]("Tu resultado es", sumar(5, 10));
La primera opción suele hacer que el código sea más legible, especialmente
cuando necesitamos utilizar el resultado en múltiples lugares o cuando la
llamada a la función es compleja.
¿Por qué son importantes los métodos en TypeScript?
Los métodos y funciones en TypeScript ofrecen ventajas significativas sobre
JavaScript tradicional gracias al sistema de tipos:
1. Mayor claridad: El tipado explícito hace que sea más fácil entender qué
espera recibir una función y qué devolverá.
2. Detección temprana de errores: El compilador de TypeScript puede
identificar problemas antes de ejecutar el código.
3. Mejor documentación: Los tipos actúan como una forma de
documentación integrada en el código.
4. Mejor autocompletado: Los editores como Visual Studio Code pueden
ofrecer sugerencias más precisas.
5. Refactorización más segura: Al cambiar una función, el compilador te
ayudará a identificar todos los lugares que necesitan actualizarse.
Funciones y Parámetros: Opcionales, Multiples y por defecto.
Los parámetros en funciones de TypeScript ofrecen una flexibilidad
extraordinaria que permite optimizar nuestro código y hacerlo más eficiente.
Al dominar los diferentes tipos de parámetros, podemos crear métodos
versátiles que se adapten a múltiples escenarios sin necesidad de duplicar
código. Esta capacidad no solo mejora la legibilidad sino que también reduce
significativamente el tiempo de desarrollo.
¿Cómo hacer que nuestras funciones sean más flexibles con parámetros
especiales?
Cuando trabajamos con TypeScript, podemos hacer que nuestras funciones
sean mucho más adaptables utilizando diferentes tipos de parámetros. Esto nos
permite escribir menos código que realice más tareas, lo que resulta en
aplicaciones más mantenibles y eficientes.
Parámetros opcionales: ¿Cómo implementarlos correctamente?
Los parámetros opcionales nos permiten definir argumentos que pueden o no
ser proporcionados al llamar a una función. Para indicar que un parámetro es
opcional, simplemente agregamos un signo de interrogación (?) después del
nombre del parámetro.
Veamos un ejemplo práctico:
function saludar(nombre: string, saludo?: string): string {
if (saludo) {
return `${saludo}, ${nombre}!`;
} else {
return `Hola, ${nombre}`;
}
}
[Link](saludar("Joe"));
[Link](saludar(“Joe", "Buenos días"));
Al ejecutar este código, obtendremos:
• "Hola, Joe" (cuando no proporcionamos el saludo)
• "Buenos días, Joe!" (cuando sí proporcionamos el saludo)
La ventaja principal de los parámetros opcionales es que nos evitan tener que
crear múltiples versiones de la misma función para manejar diferentes casos.
Una sola función puede adaptarse a distintas situaciones dependiendo de los
argumentos que reciba.
Parámetros múltiples: ¿Cómo manejar un número variable de argumentos?
Los parámetros múltiples (o rest parameters) nos permiten pasar un número
indefinido de argumentos a una función. Se indican con tres puntos (...) antes
del nombre del parámetro.
function sumarTodos(...numeros: number[]): number {
return [Link]((acumulador, valor) => acumulador + valor, 0);
}
[Link](`El resultado de sumar todos es ${sumarTodos(1, 2, 3, 4,
5)}`);
Este código sumará todos los números proporcionados (1+2+3+4+5) y
mostrará "El resultado de sumar todos es 15".
El método reduce utilizado en este ejemplo es una forma elegante de procesar
todos los elementos de un array sin necesidad de utilizar un ciclo foreach. Este
método va acumulando los valores a medida que recorre el array.
Los parámetros múltiples pueden resultar complicados al principio, pero con
práctica se convierten en una herramienta muy poderosa para crear funciones
flexibles que puedan manejar diferentes cantidades de datos.
Valores por defecto: ¿Cómo establecer valores predeterminados?
Los valores por defecto nos permiten asignar un valor predeterminado a un
parámetro en caso de que no se proporcione ninguno al llamar a la función.
function despedir(nombre: string, despedida: string = "Adiós"): string {
return `${despedida}, ${nombre}`;
}
[Link](despedir("Joe"));
[Link](despedir("Joe", "Hasta luego"));
Al ejecutar este código, obtendremos:
• "Adiós, Joe" (utilizando el valor por defecto)
• "Hasta luego, Joe" (sobrescribiendo el valor por defecto)
La diferencia clave entre los parámetros opcionales y los valores por defecto es
que los primeros pueden no estar presentes, mientras que los segundos
siempre tendrán un valor, ya sea el proporcionado o el predeterminado.
¿Por qué optimizar nuestras funciones con estos parámetros?
La implementación de estos tipos de parámetros en nuestras funciones nos
permite:
• Simplificar nuestro código: en lugar de escribir múltiples funciones para
diferentes casos, podemos crear una sola función más versátil.
• Optimizar el tiempo de desarrollo: menos código significa menos tiempo
escribiendo y depurando.
• Mejorar la legibilidad: un código más conciso es generalmente más fácil de
entender y mantener.