Sebastian Gomez

Feb 26, 2022

Fundamentos de Typescript

🔥 Fundamentos de TypeScript: Domina el mundo de Angular y OOP en JavaScript 🚀

Si has empezado a trabajar con Angular, seguro te habrás dado cuenta de que la mayoría de la documentación está hecha en TypeScript. Esto se debe a que el equipo de Angular decidió crear Angular sobre TypeScript. TypeScript es una colaboración oficial entre Google y Microsoft con el fin de orientar completamente JavaScript a Objetos. 🤝

Es decir, con JavaScript podrás usar todo el "Paradigma de programación orientada a objetos", como clases, constructores, métodos, Public, Private, Static, etc. 🧩

🌟 ¿Qué es TypeScript? 🌟

Podemos definir TypeScript como un transcompilador de JavaScript (¿WTF? 😲). Sí, un transcompilador. Básicamente, TypeScript convierte el código TypeScript en código JavaScript. Sin embargo, eso no es todo. Como te he contado en tutoriales pasados, existen estándares de JavaScript como ECMAScript 5 y ECMAScript 6. ECMAScript 5 es el estándar actual de JavaScript que soportan la mayoría de los navegadores actuales. No obstante, ECMAScript 6 mejora el ECMAScript 5 con un montón de nuevas funcionalidades y no es soportado por muchos navegadores. Es por esto que TypeScript es un transcompilador de JavaScript, es decir, puede transformar tu código TypeScript en código JavaScript compatible con ECMAScript 5 o ECMAScript 6. 🔄

🚀 Primeros pasos en con TypeScript 🚀

En este tutorial nos olvidaremos de Angular en sí, y nos dedicaremos solo a TypeScript de manera independiente. Por tanto, nuestro primer paso consistirá en la instalación de TypeScript. Para ello, vamos a ejecutar el siguiente comando (Recuerda tener instalado NodeJS) 👩‍💻:

npm install -g typescript

Hecho esto, ya tenemos TypeScript en nuestro sistema. Veamos ahora algunos ejemplos 🎉:

🔹 Variables y funciones Typadas 🔹

Simplemente puedes usar tipos de datos, es decir:

nombre: string = "Esto es un string";
edad: number = 43;
bandera: boolean = true;

// Recibe un string como parámetro y retorna un string como resultadofunction hola(nombre: string): string {
  return "hola" + nombre;
}

🔸 Arreglos 🔸

empresas: Array<string> = ['IBM', 'Microsoft', 'Google'];
empresas: string[] = ['Apple', 'Dell', 'HP'];

🔹 Any 🔹

Puedes usar el tipo Any para ponerle cualquier tipo a una variable. Es como un comodín 🃏.

🔸 Void 🔸

Puedes declarar métodos que no retornan nada.

function setNombre(nombre: string): void {
  this.nombre = nombre;
}

🔹 Clases y Objetos 🔹

Podemos crear clases con atributos, métodos y constructores.

// Define una clase llamada "persona"
class persona {
  // Declara una propiedad "nombre" de tipo string
  nombre: string;
  // Declara una propiedad "edad" de tipo number
  edad: number;
  // Declara una propiedad "casado" de tipo boolean
  casado: boolean;
  // Define el constructor de la clase, que acepta tres argumentos: nombre, edad y casado
  constructor(nombre: string, edad: number, casado: boolean) {
    // Asigna el valor del argumento "nombre" a la propiedad "nombre" de la instancia
    this.nombre = nombre;
    // Asigna el valor del argumento "edad" a la propiedad "edad" de la instancia
    this.edad = edad;
    // Asigna el valor del argumento "casado" a la propiedad "casado" de la instancia
    this.casado = casado;
  }
  // Define un método llamado "myMetodo" que retorna un string
  myMetodo(): string {
    // Retorna un string
    return "Este metodo simplemente retorna un string";
  }
}

// Crea una nueva instancia de la clase "Persona" llamada "persona" con los argumentos "juan", 12 y false
persona = new Persona("juan", 12, false);

Herencia

Si! Aunque no lo creas puedes usar herencia con TypeScript y es ridículamente fácil:

// Define una clase llamada "Estudiante" que hereda de la clase "Persona"
class Estudiante extends Persona {
  // Declara una propiedad "universidad" de tipo string
  universidad: string;
  // Define el constructor de la clase "Estudiante"
  constructor() {
    // Llama al constructor de la clase padre "Persona"
    super();
  }
}

🚀 Cómo usar TypeScript en tus proyectos: Un paso más hacia la maestría de Angular 🌟

Después de haber instalado TypeScript, debes crear tu archivo nombre.ts. Nota que termina en .ts, porque es la notación específica de TypeScript. Una vez que tengas esto, puedes correr el comando:

tsc nombre.ts

Y verás que te creará un archivo llamado nombre.js en la misma carpeta donde esté tu archivo .ts. Es este archivo el que puedes incluir en tus proyectos, independientemente de que estés usando Angular2 o no. Otra característica de TypeScript es que, como te dije, puedes convertir tu código JavaScript en ECMAScript 5 o ECMAScript 6. Para ello, puedes crear un archivo tsconfig.json y jugar con las siguientes opciones:

{"compilerOptions": {"target": "ES5",  // Puedes elegir también ES6 para ECMAScript 6"module": "commonjs", // Por defecto"sourceMap": true, // Que te cree también un archivo.map asociado"emitDecoratorMetadata": true, // Que puedas usar el patrón decorador"experimentalDecorators": true,"removeComments": false, // Que te borre los comentarios"noImplicitAny": false}}

Si usas este archivo, puedes ejecutar simplemente el comando:

tsc;

Así, él transformará todos los archivos con extensión .ts a .js sin necesidad de especificarle uno por uno. Y eso es todo! Recuerda que este post hace parte de una serie de tutoriales sobre Angular. Aunque no vimos mucho sobre Angular en este post, te aseguro que estos principios nos servirán para continuar en el aprendizaje de Angular. 📚

Si tienes alguna duda, no dudes en dejarme un comentario en la parte de abajo. Recuerda que si te gustó, también puedes compartir usando los links a las redes sociales en la parte de abajo. 📣

🏁 Conclusiones 🏁

1. TypeScript permite transformar archivos .ts a .js para su fácil inclusión en proyectos con Angular2 o sin él.
2. A través de un archivo tsconfig.json, puedes configurar opciones específicas para la compilación de tus archivos TypeScript, como la versión de ECMAScript o la eliminación de comentarios.
3. Estos fundamentos te ayudarán a avanzar en el aprendizaje de Angular y a mejorar tus habilidades como desarrollador.

📚 Ejercicios propuestos 📚

1. Crea un proyecto simple utilizando TypeScript y Angular. Configura un archivo tsconfig.json que compile tu código TypeScript a ECMAScript 5.
2. Añade comentarios en tus archivos .ts y modifica el archivo tsconfig.json para que elimine los comentarios al compilar.
3. Crea una función en TypeScript que utilice una clase y herencia, y prueba su funcionamiento en un navegador web.

✅ Resumen de 3 puntos de lo que se aprendió en el post ✅

1. Al utilizar TypeScript, puedes incluir fácilmente el código en tus proyectos, tanto con Angular como sin él.
2. El archivo tsconfig.json te permite configurar cómo se compilan tus archivos TypeScript y qué opciones se aplican en el proceso.
3. Conocer cómo

utilizar TypeScript en tus proyectos te ayudará a mejorar tus habilidades en el desarrollo con Angular y a crear aplicaciones más eficientes y bien estructuradas.