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.

  1. 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

  1. 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 y undefined: 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;

  1. 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'

  1. Tipos Personalizados

TypeScript permite definir tipos personalizados utilizando type y interface.

type

type se utiliza para definir alias de tipos.

Ejemplo:

type ID = number | string;
let usuarioID: ID = 123;
usuarioID = "ABC123";

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.

let nombre: string = "TuNombre";
let edad: number = 25;

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.

let esEstudiante: boolean = true;
let calificaciones: number[] = [90, 85, 88];

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

let nombre: string = "TuNombre";
let edad: number = 25;

Solución Ejercicio 2

let esEstudiante: boolean = true;
let calificaciones: number[] = [90, 85, 88];

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

Módulo 2: Conceptos Básicos de TypeScript

Módulo 3: Componentes y Plantillas

Módulo 4: Directivas y Pipes

Módulo 5: Servicios e Inyección de Dependencias

Módulo 6: Enrutamiento y Navegación

Módulo 7: Formularios en Angular

Módulo 8: Cliente HTTP y Observables

Módulo 9: Gestión de Estado

Módulo 10: Pruebas en Angular

Módulo 11: Temas Avanzados

Módulo 12: Despliegue y Mejores Prácticas

© Copyright 2024. Todos los derechos reservados