En este tema, aprenderemos sobre las variables y los tipos de datos en TypeScript. TypeScript es un superconjunto de JavaScript que añade tipado estático, lo que nos permite definir tipos de datos para nuestras variables y funciones, mejorando así la robustez y mantenibilidad del código.
- Declaración de Variables
En TypeScript, podemos declarar variables utilizando let
, const
y var
. Sin embargo, se recomienda usar let
y const
debido a su alcance de bloque y características de inmutabilidad.
let
y const
let
: Permite declarar variables que pueden ser reasignadas.const
: Permite declarar variables cuyo valor no puede ser reasignado.
Ejemplo:
let nombre: string = "Juan"; const edad: number = 30; nombre = "Pedro"; // Válido // edad = 31; // Error: No se puede reasignar una variable const
- Tipos de Datos Básicos
TypeScript soporta varios tipos de datos básicos, incluyendo:
number
: Para números, tanto enteros como de punto flotante.string
: Para cadenas de texto.boolean
: Para valores booleanos (true/false).any
: Para valores de cualquier tipo.void
: Para funciones que no retornan un valor.null
yundefined
: Para valores nulos y no definidos.array
: Para listas de valores.tuple
: Para listas de valores con tipos específicos.enum
: Para definir un conjunto de constantes con nombre.
Ejemplo:
let numero: number = 42; let texto: string = "Hola, TypeScript"; let esVerdadero: boolean = true; let cualquierCosa: any = "Puede ser cualquier cosa"; let sinValor: void = undefined; let nulo: null = null; let indefinido: undefined = undefined; let lista: number[] = [1, 2, 3]; let tupla: [string, number] = ["Hola", 42]; enum Color { Rojo, Verde, Azul } let colorFavorito: Color = Color.Verde;
- Inferencia de Tipos
TypeScript puede inferir el tipo de una variable basado en el valor inicial asignado. Esto significa que no siempre es necesario especificar el tipo explícitamente.
Ejemplo:
let mensaje = "Hola, Mundo"; // TypeScript infiere que 'mensaje' es de tipo 'string' let numeroInferido = 100; // TypeScript infiere que 'numeroInferido' es de tipo 'number'
- Tipos Personalizados
TypeScript permite definir tipos personalizados utilizando type
y interface
.
type
type
se utiliza para definir alias de tipos.
Ejemplo:
interface
interface
se utiliza para definir la estructura de un objeto.
Ejemplo:
interface Persona { nombre: string; edad: number; } let persona: Persona = { nombre: "Juan", edad: 30 };
Ejercicios Prácticos
Ejercicio 1: Declaración de Variables
Declara una variable nombre
de tipo string
y asígnale tu nombre. Luego, declara una variable edad
de tipo number
y asígnale tu edad.
Ejercicio 2: Tipos de Datos
Declara una variable esEstudiante
de tipo boolean
y asígnale true
. Luego, declara una variable calificaciones
de tipo array
de números y asígnale una lista de calificaciones.
Ejercicio 3: Tipos Personalizados
Define un tipo personalizado Direccion
que tenga las propiedades calle
(string) y ciudad
(string). Luego, declara una variable miDireccion
de tipo Direccion
y asígnale un valor.
type Direccion = { calle: string; ciudad: string; }; let miDireccion: Direccion = { calle: "Calle Falsa 123", ciudad: "Springfield" };
Soluciones
Solución Ejercicio 1
Solución Ejercicio 2
Solución Ejercicio 3
type Direccion = { calle: string; ciudad: string; }; let miDireccion: Direccion = { calle: "Calle Falsa 123", ciudad: "Springfield" };
Conclusión
En esta sección, hemos aprendido sobre la declaración de variables y los tipos de datos en TypeScript. Hemos visto cómo usar let
y const
, los tipos de datos básicos, la inferencia de tipos y cómo definir tipos personalizados. Estos conceptos son fundamentales para escribir código TypeScript robusto y mantenible. En la próxima sección, exploraremos las funciones y las funciones flecha en TypeScript.
Curso de Angular 2+
Módulo 1: Introducción a Angular
- ¿Qué es Angular?
- Configuración del Entorno de Desarrollo
- Tu Primera Aplicación Angular
- Arquitectura de Angular
Módulo 2: Conceptos Básicos de TypeScript
- Introducción a TypeScript
- Variables y Tipos de Datos en TypeScript
- Funciones y Funciones Flecha
- Clases e Interfaces
Módulo 3: Componentes y Plantillas
- Creación de Componentes
- Plantillas de Componentes
- Estilos de Componentes
- Interacción entre Componentes
Módulo 4: Directivas y Pipes
Módulo 5: Servicios e Inyección de Dependencias
- Introducción a los Servicios
- Creación y Uso de Servicios
- Inyección de Dependencias
- Inyectores Jerárquicos
Módulo 6: Enrutamiento y Navegación
Módulo 7: Formularios en Angular
- Formularios Basados en Plantillas
- Formularios Reactivos
- Validación de Formularios
- Formularios Dinámicos
Módulo 8: Cliente HTTP y Observables
- Introducción al Cliente HTTP
- Realizando Solicitudes HTTP
- Manejo de Respuestas HTTP
- Uso de Observables
Módulo 9: Gestión de Estado
- Introducción a la Gestión de Estado
- Uso de Servicios para la Gestión de Estado
- NgRx Store
- NgRx Effects