En esta sección, exploraremos los fundamentos de la sintaxis de TypeScript, un lenguaje de programación que extiende JavaScript al agregar tipos estáticos. Esto nos permite detectar errores en tiempo de compilación y mejorar la calidad del código. A continuación, desglosaremos los conceptos clave de la sintaxis básica de TypeScript.

TypeScript soporta varios tipos de datos básicos que son similares a los de JavaScript, pero con la adición de tipos estáticos.

• number: Representa tanto números enteros como de punto flotante.

  let age: number = 25;
  let price: number = 19.99;
  

• string: Representa cadenas de texto.

  let firstName: string = "John";
  let greeting: string = `Hello, ${firstName}`;
  

• boolean: Representa valores de verdad.

  let isActive: boolean = true;
  

• any: Permite que una variable contenga cualquier tipo de dato. Útil para migrar código JavaScript a TypeScript.

  let randomValue: any = 10;
  randomValue = "Hello";
  randomValue = true;
  

• void: Usado principalmente en funciones que no retornan un valor.

  function logMessage(message: string): void {
    console.log(message);
  }
  

• null y undefined: Representan la ausencia de valor.

  let u: undefined = undefined;
  let n: null = null;
  

TypeScript utiliza let, const y var para declarar variables, similar a JavaScript, pero con la adición de tipos.

• let: Permite declarar variables que pueden cambiar de valor.

  let count: number = 10;
  count = 20;
  

• const: Declara variables cuyo valor no puede cambiar.

  const pi: number = 3.14;
  

Los arreglos en TypeScript pueden ser de un solo tipo o de múltiples tipos.

• Arreglo de un solo tipo:

  let list: number[] = [1, 2, 3];
  

• Arreglo de múltiples tipos:

  let mixedList: (number | string)[] = [1, "two", 3];
  

Las tuplas permiten definir un arreglo con un número fijo de elementos de tipos específicos.

Las funciones en TypeScript pueden tener tipos de parámetros y de retorno.

• Función con tipos de parámetros y retorno:

  function add(x: number, y: number): number {
    return x + y;
  }
  

• Parámetros opcionales y valores predeterminados:

  function buildName(firstName: string, lastName?: string): string {
    return lastName ? `${firstName} ${lastName}` : firstName;
  }
  

Las interfaces definen la estructura de un objeto, especificando qué propiedades y métodos debe tener.

Ejercicio 1:

Crea una función multiply que tome dos números como parámetros y retorne su producto. Asegúrate de definir los tipos de los parámetros y el tipo de retorno.

Solución:

Ejercicio 2:

Define una interfaz Car con las propiedades make (string), model (string) y year (number). Luego, crea una función describeCar que tome un objeto de tipo Car y retorne una descripción del coche.

Solución:

En esta sección, hemos cubierto los conceptos básicos de la sintaxis de TypeScript, incluyendo tipos de datos, declaración de variables, arreglos, tuplas, funciones e interfaces. Estos fundamentos son esenciales para escribir código TypeScript robusto y eficiente. En el próximo módulo, comenzaremos a aplicar estos conceptos al trabajar con Playwright.