Introducción a TypeScript: el lenguaje de alto nivel para Desarrolladores Web

TypeScript es un lenguaje de programación que se ha vuelto cada vez más popular entre los desarrolladores web. Creado por Microsoft, es una extensión de JavaScript que ofrece poderosas características de tipado estático, mejorando la productividad del desarrollador y aumentando la calidad y robustez del código.

En este texto, vamos a explorar los conceptos básicos de TypeScript y ejemplos prácticos para aquellos que desean aprender y comenzar a utilizar este lenguaje.

¡Vamos allá!

1. ¿Qué es TypeScript?

TypeScript es un lenguaje de código abierto desarrollado por Microsoft y lanzado en 2012. Está basado en JavaScript, pero agrega la opción de tipos estáticos, lo que permite a los desarrolladores especificar el tipo de cada variable y parámetro en sus programas. Estos tipos se verifican en tiempo de compilación, proporcionando retroalimentación inmediata sobre posibles errores y permitiendo que los desarrolladores encuentren y corrijan problemas antes de ejecutar el código.

2. Configurando el ambiente

Primero, instalemos nuestro editor de código. Hay varias razones por las cuales Visual Studio Code (VSCode) es ampliamente recomendado como un editor de código, especialmente para desarrolladores web y otras áreas de programación. Algunas de estas razones incluyen:

Gratuito y de código abierto: VSCode es totalmente gratuito y de código abierto, lo que significa que puedes usarlo sin costo y la comunidad de desarrolladores puede contribuir con mejoras y correcciones de errores.

Multiplataforma: VSCode es compatible con Windows, macOS y Linux, asegurando que puedas utilizarlo en cualquier sistema operativo de tu preferencia.

Ligero y rápido: El editor es conocido por su rapidez y eficiencia. Inicia rápidamente, consume pocos recursos del sistema y ofrece un excelente rendimiento, incluso en computadoras más antiguas.

Interfaz de usuario amigable: VSCode posee una interfaz de usuario limpia e intuitiva, con menús, barras de herramientas y atajos de teclado bien organizados, facilitando la navegación y la edición de código.

Soporte para diversas lenguas: Aunque es conocido como un excelente editor para JavaScript y TypeScript, VSCode ofrece soporte para muchas otras lenguas de programación, incluyendo Python, Java, C++, PHP, Go y muchas otras. Además, gracias a su arquitectura extensible, puedes instalar extensiones para ampliar la compatibilidad con lenguas adicionales.

Integración con Git: VSCode tiene integración nativa con el sistema de control de versiones Git, lo que facilita mucho la gestión de repositorios Git directamente desde el editor.

Abundancia de extensiones: La extensa biblioteca de extensiones disponibles para VSCode permite que personalices el editor de acuerdo a tus necesidades y preferencias. Hay extensiones para depuración, formateo de código, snippets, temas y mucho más.

Depuración y pruebas: VSCode posee poderosas herramientas de depuración, permitiendo que depures tu código paso a paso y monitorees variables y expresiones. Además, soporta la ejecución de pruebas unitarias, convirtiéndose en una elección popular entre los desarrolladores de pruebas.

Soporte a la comunidad: VSCode es respaldado por una comunidad activa de desarrolladores, lo que significa que hay muchos recursos en línea, tutoriales, documentación y foros disponibles para ayudarte a aprovechar al máximo el editor.

Integración con el ecosistema de Microsoft: Si estás desarrollando aplicaciones usando tecnologías Microsoft, VSCode ofrece una excelente integración con el ecosistema Microsoft, facilitando el desarrollo en plataformas como .NET y Azure.

Para instalar Visual Studio Code (VSCode) en tu computadora, sigue los pasos a continuación dependiendo del sistema operativo que estés usando:

Windows:

1. Accede al sitio oficial de VSCode en https://code.visualstudio.com/.

2. Haz clic en el botón "Download for Windows".

3. La descarga del instalador (.exe) comenzará automáticamente. Espera a que termine la descarga.

4. Después de la descarga, haz doble clic en el archivo descargado (`VSCodeSetup.exe`) para iniciar la instalación.

5. Sigue las instrucciones del asistente de instalación. Puedes dejar las configuraciones predeterminadas o personalizarlas según tus preferencias.

6. Una vez completada la instalación, Visual Studio Code estará listo para ser usado. Puedes encontrarlo en el menú Inicio o en tu escritorio.

macOS:

1. Accede al sitio oficial de VSCode en https://code.visualstudio.com/.

2. Haz clic en el botón "Download for macOS".

3. La descarga del archivo `.zip` comenzará automáticamente. Espera a que termine la descarga.

4. Después de la descarga, localiza el archivo descargado (generalmente en la carpeta "Downloads") y haz doble clic para extraer el contenido.

5. Arrastra la aplicación "Visual Studio Code" a la carpeta "Applications" (Aplicaciones) para completar la instalación.

6. Ahora, puedes encontrar Visual Studio Code en tu carpeta de aplicaciones y abrirlo desde ahí.

Linux:

Las instrucciones de instalación para Linux pueden variar según la distribución específica que estés usando. A continuación, se muestran las instrucciones para instalar VSCode en las distribuciones más populares:

Ubuntu/Debian:

1. Accede al sitio oficial de VSCode en https://code.visualstudio.com/

2. Haz clic en el botón "Download for Linux".

3. Elige la opción `.deb` para sistemas basados en Debian.

4. La descarga del paquete `.deb` comenzará automáticamente. Espera a que termine la descarga.

5. Después de la descarga, abre la terminal y navega hasta el directorio donde se descargó el archivo.

6. Instala el paquete `.deb` usando el comando:

sudo dpkg -i nome_do_arquivo.deb

Fedora/RHEL:

1. Accede al sitio oficial de VSCode en https://code.visualstudio.com/

2. Haz clic en el botón "Download for Linux".

3. Elige la opción `.rpm` para sistemas basados en Fedora.

4. La descarga del paquete `.rpm` comenzará automáticamente. Espera a que termine la descarga.

5. Después de la descarga, abre la terminal y navega hasta el directorio donde se descargó el archivo.

6. Instala el paquete `.rpm` usando el comando:

sudo dnf install nome_do_arquivo.rpm

Otras distribuciones Linux:

Para otras distribuciones Linux, puedes encontrar paquetes para VSCode en sus repositorios oficiales o seguir las instrucciones de instalación en el sitio de VSCode.

Una vez completada la instalación, puede abrir Visual Studio Code y comenzar a usarlo para el desarrollo de código. VSCode es un editor muy versátil, con una variedad de extensiones disponibles para personalización, soporte para múltiples lenguajes de programación y una interfaz fácil de usar que lo convierte en una excelente opción para muchos desarrolladores.

Antes de comenzar a escribir código TypeScript, necesitamos instalarlo en nuestro ambiente de desarrollo. TypeScript puede ser instalado a través del gestor de paquetes npm, que generalmente se instala junto con Node.js. Para instalar TypeScript globalmente en tu máquina, simplemente ejecuta el siguiente comando:

npm install -g typescript

Para instalar Node.js en tu máquina, sigue los pasos a continuación:

1. Accede al sitio oficial de Node.js:

2. Visita el sitio oficial de Node.js en https://nodejs.org.

3. Descarga el instalador:

En la página principal del sitio, verás dos versiones de Node.js: la versión LTS (Long-Term Support) y la versión actual (Current). La versión LTS es recomendada para la mayoría de los usuarios, ya que ofrece estabilidad y soporte a largo plazo.

4. Elige la versión que deseas instalar y haz clic en el botón de descarga correspondiente.

5. Ejecuta el instalador:

Después de descargar el instalador, ejecútalo haciendo doble clic en el archivo descargado. El instalador te guiará por el proceso de instalación.

6. Acepta los términos de licencia:

Durante la instalación, se te pedirá que aceptes los términos de licencia de Node.js. Léelos y haz clic en "Next" o "Concordo" para continuar.

7. Elige el lugar de instalación:

8. Selecciona la carpeta donde deseas instalar Node.js o simplemente acepta la carpeta predeterminada sugerida por el instalador. Haz clic en "Next" o "Instalar".

9. Espera a que finalice la instalación:

10. Espera hasta que el proceso de instalación se complete. Esto puede tardar unos minutos, dependiendo de la velocidad de tu computadora.

11. Verifica la instalación:

12. Después de que la instalación se haya completado, puedes verificar si Node.js se instaló correctamente abriendo la terminal o el símbolo del sistema y escribiendo los siguientes comandos:

node -v

npm -v

Si todo está instalado correctamente, verás las versiones de Node.js y npm mostradas en la terminal.

¡Listo! Ahora tienes Node.js instalado en tu máquina y puedes comenzar a desarrollar aplicaciones JavaScript o TypeScript. El npm (Node Package Manager) también se instaló junto con Node.js, permitiéndote instalar y gestionar paquetes y bibliotecas de terceros fácilmente.

3. Primer Ejemplo en TypeScript

Vamos a comenzar con un ejemplo simple para entender la sintaxis básica de TypeScript. Crea un nuevo archivo llamado "hello.ts" y añade el siguiente código:

function sayHello(name: string) {

return `Hello, ${name}!`;

}

const personName: string = "Alice";

console.log(sayHello(personName));

Aquí, declaramos una función llamada `sayHello`, que recibe un parámetro `name` del tipo `string` y retorna un saludo personalizado. Luego, creamos una variable `personName` del tipo `string` y la usamos como argumento para la función `sayHello`. La compilación de este código se realizará sin problemas, ya que las variables y parámetros están debidamente tipados.

4. Tipos Básicos

TypeScript soporta diversos tipos básicos, que pueden ser usados para declarar las variables de acuerdo con sus características. Algunos de los tipos más comunes incluyen:

Tipo `number`:

En TypeScript, el tipo básico `number` es usado para representar valores numéricos, incluyendo números enteros y números de punto flotante (decimales). Este tipo es muy similar al tipo `number` de JavaScript, pero con la adición de la verificación de tipo estático proporcionada por TypeScript.

Vamos explorar algunas características importantes del tipo `number` en TypeScript:

Declaración de variables del tipo number:let age: number;

let pi: number = 3.14;

En este ejemplo, declaramos dos variables: `age` y `pi`. Ambas son del tipo `number`. La primera variable fue declarada sin asignar un valor inicial, mientras que la segunda recibió el valor `3.14`.

Operaciones matemáticas:

El tipo `number` soporta todas las operaciones matemáticas comunes, como adición, sustracción, multiplicación y división:

let a: number = 10;

let b: number = 5;

let sum: number = a + b; // 15

let difference: number = a - b; // 5

let product: number = a * b; // 50

let quotient: number = a / b; // 2

Otras operaciones:

Además de las operaciones matemáticas básicas, el tipo `number` también soporta otras operaciones, como incremento (`++`) y decremento (`--`):

let x: number = 10;

x++; // x ahora es 11

x--; // x ahora es 10 nuevamente

NaN e Infinity:

AAl igual que en JavaScript, TypeScript también soporta valores especiales como `NaN` (Not-a-Number) e `Infinity` (infinito):

let result: number = 0 / 0; // result é NaN

let infinityValue: number = Infinity;

Verificación de tipo:

Una de las principales ventajas de TypeScript es la verificación de tipo estático. Esto significa que, si intentas asignar un valor no numérico a una variable del tipo `number`, TypeScript emitirá un error:

let age: number = "25"; // Erro: Type 'string' is not assignable to type 'number'.

Esta verificación ayuda a evitar errores comunes en tiempo de ejecución y hace que el código sea más seguro y predecible.

Valores literales:

En TypeScript, puedes usar valores literales numéricos para declarar una variable con un valor específico:

let dayOfWeek: 1 | 2 | 3 | 4 | 5 | 6 | 7 = 3; // Solo se permiten valores 1 a 7

En este ejemplo, la variable `dayOfWeek` solo puede tener los valores del 1 al 7, ya que especificamos un tipo de unión literal usando `|`

Tipo `string`:

En TypeScript, el tipo básico `string` es usado para representar valores de texto, es decir, secuencias de caracteres. Este tipo es usado para manipular datos como palabras, frases, oraciones y cualquier otro contenido textual.

Declaración de variables del tipo string:

Puedes declarar variables del tipo `string` de la siguiente manera:

let nombre: string;

let mensaje: string = "Hola, mundo!";

En la primera declaración, la variable `nome` es declarada, pero no se le asigna un valor inicial. En ese caso, la variable tiene el valor inicial `undefined`. En la segunda declaración, la variable `mensagem` es inicializada con la cadena `"Hola, mundo!"`.

Concatenación de strings:

TypeScript permite la concatenación de cadenas usando el operador `+`:

let saludo: string = "Hola";

let nombre: string = "João";

let mensaje: string = saludo + " " + nombre; // "Hola João"

Template Strings:

TypeScript también soporta el uso de template strings (o template literals) con la sintaxis de `${}`. Esto permite insertar expresiones dentro de una cadena delimitada por acentos graves (\`...\`), facilitando la interpolación de variables y expresiones en una cadena:

let nombre: string = "Alice";

let edad: number = 30;

let presentación: string = `Mi nombre es ${nombre} y tengo ${edad} años.`;

// "Mi nombre es Alice y tengo 30 años."

Longitud de una cadena:

Para obtener la longitud de una cadena, puedes usar la propiedad `length`:

let texto: string = "Hello, world!";

let longitud: number = texto.length; // 13

Verificación de tipo:

La verificación de tipo estático de TypeScript también se aplica al tipo `string`. Si intentas asignar un valor de tipo no cadena a una variable del tipo `string`, TypeScript emitirá un error:

let nombre: string = 25; // Erro: Type 'number' is not assignable to type 'string'

Tipo `boolean`:

En TypeScript, el tipo básico `boolean` es usado para representar valores verdaderos (`true`) o falsos (`false`). Este tipo es fundamental cuando necesitas trabajar con lógica condicional y control de flujo en tus programas.

Declaración de variables del tipo boolean:

Puedes declarar variables del tipo `boolean` de la siguiente manera:

let isAtivo: boolean;

let hasPermission: boolean = true;

En la primera declaración, la variable `isActive` es declarada, pero no se le asigna un valor inicial. En ese caso, la variable tiene el valor inicial `undefined`. En la segunda declaración, la variable `hasPermission` es inicializada con el valor `true`.

Operaciones lógicas:

El tipo `boolean` soporta operaciones lógicas como `&&` (e), `||` (ou) e `!` (negación).

let hasMinimumAge: boolean = true;

let hasStudentCard: boolean = false;

let canEnter: boolean = hasMinimumAge && hasStudentCard; // false

let canHaveDiscount: boolean = hasMinimumAge || hasStudentCard; // true

let doesNotHaveStudentCard: boolean = !hasStudentCard; // true

Verificación de tipo:

La verificación de tipo estático de TypeScript también se aplica al tipo `boolean`. Si intentas asignar un valor no booleano a una variable del tipo `boolean`, TypeScript emitirá un error:

let isActive: boolean = "sim"; // Erro: Type 'string' is not assignable to type 'boolean'.

Valores truthy y falsy:

En JavaScript y, por lo tanto, en TypeScript, existen valores "truthy" y "falsy". Valores truthy son aquellos que son evaluados como verdaderos en contextos booleanos, mientras que valores falsy son evaluados como falsos.

Los siguientes valores son considerados "falsy" en JavaScript y son tratados como `false` en contextos booleanos:

- `false`

- `0`

- `""` (string vazia)

- `null`

- `undefined`

- `NaN`

Todos los demás valores son considerados "truthy" y son tratados como true en contextos booleanos.

let valorFalsy: boolean = false; // false

let valorTruthy: boolean = 10; // true

Tipo `array`:

En TypeScript, el tipo básico `Array` (ou `[]`) es usado para representar una lista o colección de elementos del mismo tipo. Esto permite que trabajes con conjuntos de datos y realices operaciones en múltiples entradas a la vez.

Declaración de variables del tipo Array:

Puedes declarar variables del tipo `Array` de varias maneras diferentes:

let numeros: number[]; // Declaración con tipo de elemento

let nombres: Array<string>; // Otra forma de declaración, usando la sintaxis genérica

let frutas: Array<string> = ["manzana", "plátano", "naranja"]; // Inicialización con elementos

En la primera declaración, la variable `numeros` es declarada como una lista vacía de números. En la segunda declaración, la variable `nomes` también es una lista vacía, pero con elementos del tipo `string`. En la tercera declaración, la variable `frutas` es inicializada con una lista de tres cadenas representando diferentes tipos de frutas.

Acceso a elementos del Array:

Puedes acceder a los elementos de un Array usando el índice entre corchetes:

let frutas: string[] = ["manzana", "plátano", "naranja"];

let primeiraFruta: string = frutas[0]; // "manzana"

let segundaFruta: string = frutas[1]; // "plátano"

Adición y eliminación de elementos del Array:

Puedes agregar o eliminar elementos de un Array usando métodos específicos, como `push()`, `pop()`, `shift()` e `unshift()`:

let frutas: string[] = ["manzana", "plátano"];

frutas.push("naranja"); // Adiciona "naranja" al final del Array

frutas.pop(); // Elimina el último elemento del Array ("laranja")

frutas.unshift("piña"); // Añade "piña" al inicio del Array

frutas.shift(); // Elimina el primer elemento del Array ("piña")

Verificación de tipo:

TypeScript también proporciona verificación de tipo para Arrays. Por ejemplo, si intentas asignar un valor que no es del tipo del Array, TypeScript emitirá un error:

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

numeros.push("cuatro"); // Erro: Argument of type 'string' is not assignable to parameter of type 'number'.

Operaciones con Arrays:

TypeScript soporta varias operaciones útiles en Arrays, como `map()`, `filter()`, `reduce()` y muchas otras, que permiten manipular y transformar los elementos de un Array de forma fácil y expresiva:

let numeros: number[] = [1, 2, 3, 4, 5];

let cuadrados: number[] = numeros.map((num) => num * num); // [1, 4, 9, 16, 25]

let pares: number[] = numeros.filter((num) => num % 2 === 0); // [2, 4]

let soma: number = numeros.reduce((acc, num) => acc + num, 0); // 15

Tipo `tuple`:

En TypeScript, el tipo básico `tuple` es usado para representar una estructura de datos que consiste en una secuencia fija de elementos de diferentes tipos. A diferencia de los arrays, donde todos los elementos tienen el mismo tipo, las tuplas permiten definir el tipo de cada elemento individualmente.

Declaración de tuplas:

Puedes declarar una tupla utilizando corchetes `[]` con los tipos de los elementos entre paréntesis:

let tupla: [string, number, boolean];

tupla = ["texto", 10, true];

En este ejemplo, la variable `tupla` es una tupla que puede contener un valor `string`, un valor `number` y un valor `boolean`, en este orden específico.

Acceso a elementos de la tupla:

Puedes acceder a los elementos de la tupla utilizando índices numéricos, al igual que en un array:

let tupla: [string, number];

tupla = ["texto", 10];

let primerElemento: string = tupla[0]; // "texto"

let segundoElemento: number = tupla[1]; // 10

Modificación de elementos de la tupla:

Las tuplas permiten la modificación de elementos individuales, siempre que sean del mismo tipo definido en la declaración original:

let tupla: [string, number];

tupla = ["texto", 10];

tupla[0] = "texto";

tupla[1] = 20;

Restricciones de longitud:

Las tuplas tienen una longitud fija, determinada por la cantidad de tipos proporcionados en la declaración. Esto significa que no puedes añadir o eliminar elementos de la tupla como harías con arrays:

let tupla: [string, number] = ["texto", 10];

tupla.push("nuevoElemento"); // Erro: Property 'push' does not exist on type '[string, number]'.

tupla.pop(); // Erro: Property 'pop' does not exist on type '[string, number]'.

Conversión de array a tupla:

Puedes convertir un array en una tupla usando type assertion (conversión de tipo):

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

let tuplaNumeros: [number, number, number] = arrayNumeros as [number, number, number];

Tipo `enum`:

En TypeScript, el tipo básico `enum` (enumeración) es usado para crear un conjunto de valores nombrados con valores asociados. Permite definir un conjunto de constantes con nombres más descriptivos, haciendo que el código sea más legible y fácil de entender.

Declaración de enums:

Para crear un enum, puedes usar la palabra clave `enum` seguida de los nombres de los valores entre llaves:

enum DiaDeLaSemana {

Domingo,

Lunes,

Martes,

Miércoles,

Jueves,

Viernes,

Sábado,

}

En este ejemplo, definimos un enum llamado `DiaDeLaSemana` con siete valores: `Domingo`, `Lunes`, `Martes`, `Miércoles`, `Jueves`, `Viernes` e `Sábado`. Los valores del enum son números enteros, comenzando desde 0 por defecto, pero puedes definir valores específicos para cada elemento, como mostraré a continuación.

Asignación de valores específicos a los elementos del enum:

Puedes asignar valores específicos a cada elemento del enum. Por defecto, serán incrementados a partir del valor inicial de 0, pero puedes definir valores personalizados para cada elemento:

enum DiaDeLaSemana {

Domingo = 1,

Lunes = 2,

Martes = 3,

Miércoles = 4,

Jueves = 5,

Viernes = 6,

Sábado = 7,

}

En este ejemplo, asignamos explícitamente los valores del 1 al 7 a los elementos del enum `DiaDaSemana`.

Acceso a los elementos del enum:

Puedes acceder a los elementos del enum por su nombre o por el valor numérico asociado:

enum DiaDeLaSemana {

Domingo,

Lunes,

Martes,

Miércoles,

Jueves,

Viernes,

Sábado,

}

let dia: DiaDeLaSemana = DiaDeLaSemana.Lunes;

console.log(dia); // 1

let valor: number = DiaDeLaSemana.Martes;

console.log(valor); // 2

Uso de enums en condicionales:

Los enums pueden ser útiles en condicionales, haciendo que el código sea más legible:

enum DiaDeLaSemana {

Domingo,

Lunes,

Martes,

Miércoles,

Jueves,

Viernes,

Sábado,

}

let dia: DiaDeLaSemana = DiaDeLaSemana.Jueves;

if (dia === DiaDeLaSemana.Sábado || dia === DiaDaSemana.Domingo) {

console.log("Fin de semana!");

} else {

console.log("Dia laborable.");

}

Tipo `any`:

En TypeScript, el tipo básico `any` es un tipo especial que representa un valor que puede ser de cualquier tipo. Cuando una variable es del tipo `any`, puedes asignarle cualquier valor sin la verificación de tipo estático de TypeScript.

Uso del tipo `any`:

El tipo `any` es generalmente usado cuando no conoces el tipo de dato que será almacenado en la variable o cuando estás trabajando con código legado que no tiene tipado adecuado. También puede ser útil en situaciones donde estás migrando gradualmente un código JavaScript a TypeScript y aún no has definido los tipos completos:

let valorCualquiera: any;

valorCualquiera = 10; // number

valorCualquiera = "Olá"; // string

valorCualquiera = true; // boolean

En este ejemplo, la variable `valorQualquer` es del tipo `any`, permitiendo que le asignes valores de diferentes tipos en diferentes momentos.

Pérdida de checaje de tipo:

Una desventaja del tipo `any` es que desactiva la verificación de tipo estático de TypeScript para la variable en cuestión. Esto significa que, si usas el tipo `any`, perderás los beneficios de la verificación de tipo estático, que es una de las principales ventajas de TypeScript:

let valorCualquiera: any = 10;

console.log(valorCualquiera.toUpperCase()); // No hay error, pero en tiempo de ejecución ocurrirá un error: valorCualquiera.toUpperCase is not a function

En este ejemplo, aunque `toUpperCase()` es un método de cadenas, no ocurre un error en tiempo de compilación debido al uso del tipo `any`, pero en tiempo de ejecución ocurrirá un error porque `toUpperCase()` no es un método de números.

Evitando el uso excesivo del tipo `any`:

Aunque el tipo `any` es útil en algunas situaciones específicas, se recomienda evitarlo siempre que sea posible, ya que puede llevar a la pérdida de seguridad y previsibilidad en tu código TypeScript. En su lugar, es mejor usar tipos más específicos siempre que sea posible para aprovechar las ventajas de la verificación de tipo estático y obtener más seguridad y confiabilidad en el código.

Si necesitas manejar valores que pueden tener tipos diferentes, puedes usar tipos de unión (`|`) o tipos genéricos para asegurar una mejor tipificación:

let valor: number | string;

valor = 10; // OK

valor = "Hola"; // OK

valor = true; // Erro: Type 'boolean' is not assignable to type 'string | number'.

5. Funciones con Tipos

En TypeScript, también es posible definir los tipos de los parámetros y del valor de retorno de las funciones. Vamos a ejemplificar:

function addNumbers(num1: number, num2: number): number {

return num1 + num2;

}

function greet(name: string): void {

console.log(`Hello, ${name}!`);

}

function multiplyByTwo(num: number): number {

return num * 2;

}

En la primera función, `addNumbers`, declaramos que los parámetros `num1` y `num2` son del tipo `number`, y que el valor de retorno de la función también es del tipo `number`. Esto permite que TypeScript haga verificaciones de tipos durante la compilación.

En la segunda función, `greet`, el tipo de retorno se especifica como `void`, lo que significa que la función no retorna ningún valor.

En la tercera función, `multiplyByTwo`, el parámetro `num` y del tipo `number`, y el valor de retorno también es `number`. Con esta información, TypeScript nos ayuda a evitar errores, garantizando que solo números sean pasados como argumentos y que la función retorne un valor numérico.

6. Interfaces y Tipos Personalizados

TypeScript permite crear tipos personalizados a través de interfaces. Las interfaces definen la estructura de un objeto, especificando los nombres de las propiedades y sus tipos. Vamos a ver cómo crear y utilizar interfaces:

interface Person {

name: string;

age: number;

email?: string; // Propiedad opcional

}

function displayPersonInfo(person: Person) {

console.log(`Name: ${person.name}`);

console.log(`Age: ${person.age}`);

if (person.email) {

console.log(`Email: ${person.email}`);

}

}

const person1: Person = {

name: "Alice",

age: 30,

};

const person2: Person = {

name: "Bob",

age: 25,

email: "bob@example.com",

};

Aquí, definimos una interfaz llamada `Person`, con propiedades `name` y `age` de tipos `string` y `number`, respectivamente. La propiedad `email` es opcional, indicada por el símbolo `?`.

A continuación, utilizamos esta interfaz para declarar objetos `person1` y `person2`. TypeScript nos alertaría si olvidáramos incluir alguna de las propiedades obligatorias o si intentáramos agregar una propiedad inexistente.

7. Clases en TypeScript

TypeScript soporta programación orientada a objetos con la definición de clases. Vamos a crear una clase simple para representar una forma geométrica y calcular el área:

class Shape {

private width: number;

private height: number;

constructor(width: number, height: number) {

this.width = width;

this.height = height;

}

getArea(): number {

return this.width * this.height;

}

}

const rectangle = new Shape(5, 10);

console.log("Rectangle Area:", rectangle.getArea());

Con esta guía, ¡espero poder ayudarte en esta jornada con TypeScript!