¿Cómo declarar un módulo en TypeScript?

Un módulo es una pieza de código que se puede llamar o usar en otro código. No hay nada nuevo sobre los módulos en Typescript. El concepto del módulo fue introducido por JavaScript con la versión ECMAScript 2015. Typescript solo está reutilizando esta característica.

¿El código no funcionará sin Módulos?

Por supuesto, lo hará. El código seguirá funcionando. Pero hay inconvenientes importantes con el código que no está modularizado.

Digamos que creamos una aplicación de chat muy básica que puede enviar o recibir mensajes de texto. Inicialmente, agregamos nuestro código completo en solo 2 o 3 archivos y la aplicación funciona muy bien. Más tarde decidimos agregar una función para grabar y enviar mensajes de audio también. Para esto, nuevamente agregamos más código en los mismos archivos y la aplicación sigue funcionando muy bien. Más tarde, decidimos agregar funciones como compartir imágenes o compartir videos o tal vez también algunos documentos grandes y seguimos descargando código en los mismos archivos o tal vez en 1 o 2 archivos adicionales. Ahora hay un problema. Aquí hay algunos problemas que podemos prever:

1. Nuestra aplicación comenzará a volverse lenta (o súper lenta en un punto).
2. Bloqueo frecuente de la aplicación que causa la pérdida potencial de datos
3. El código base se convertirá en espagueti (imposible de mantener)
4. La corrección de errores o la depuración es otro gran problema
5. Pesadilla para el equipo de pruebas

Todos los problemas anteriores (y más) se pueden resolver si simplemente hacemos que nuestro código sea más modular.

Esfuerzos de desarrollo sin usar el módulo: Imitemos un escenario. Queremos comprar algunas frutas. Tal vez manzana, kiwi y fresa. Crearemos 3 clases separadas para los 3. Dado que los 3 son frutas, comparten algunas características comunes como nombre, color y cantidad. Así que crearemos una clase más (como un tipo de datos) con un método. Vamos a crear clases una por una.

1. Creación de una clase de Apple: haga clic con el botón derecho en la carpeta del proyecto y haga clic en ‘Nuevo archivo’. Llámalo apple.ts. Primero definiremos la clase Fruit aquí para ser utilizada como tipo de datos para Apple y en el mismo archivo también definiremos la clase para Apple:

class Fruit {
 
  // Properties that every fruits have
  name: string;
  color: string;
  quantity: number;
 
  // To initialize the values
  constructor(name, color, quantity) {
      // Initialize values using this operator
  }
 
  myCart() {
     // A simple placeholder text
      console.log("I have " + this.quantity +
      " " + this.color + " " + this.name +
      " in my cart");
  }
}
 
class Apple {
  // Initialize Fruits class with values
  fruits: Fruits = new Fruits(..., ..., ...);
 
  constructor() {
  // call method to see everything is correct
      this.fruits.myCart();
  }
}
 
// initialize apple class and call
// its constructor automatically
var obj: Apple = new Apple();

 
Haremos el mismo procedimiento para la clase Kiwi.

2. Creación de la clase Kiwi: haga clic derecho en la carpeta del proyecto y haga clic en ‘Nuevo archivo’. Llámalo kiwi.ts. Primero definiremos la clase Fruit aquí para usarla como tipo de datos para kiwi y en el mismo archivo también definiremos la clase para Kiwi:

class Fruit {
 
  // Properties that every fruits have
  name: string;
  color: string;
  quantity: number;
 
  // Initialize the values
  constructor(name, color, quantity) {
 
      // Initialize values using this operator
  }
 
  myCart() {
 
     // A simple placeholder text
      console.log("I have " + this.quantity +
      " " + this.color + " " + this.name +
      " in my cart");
  }
}
 
class Kiwi {
 
  // Initialize Fruits class with values
  fruits: Fruits = new Fruits(..., ..., ...);
 
  constructor() {
 
  // Call method to see everything is correct
      this.fruits.myCart();
  }
}
 
// Initialize kiwi class and
// call its constructor automatically
var obj: Kiwi = new Kiwi();

 
3. Creando la clase Strawberry: Haga clic derecho en la carpeta del proyecto y haga clic en ‘Nuevo archivo’. Llámalo fresa.ts. Primero definiremos la clase Fruit aquí para ser utilizada como el tipo de datos para fresa y en el mismo archivo también definiremos la clase para Fresa:

class Fruit {
 
  // Properties that every fruits have
  name: string;
  color: string;
  quantity: number;
 
  // Initialize the values
  constructor(name, color, quantity) {
 
      // Initialize values  using this operator
  }
 
  myCart() {
 
     // A simple placeholder text
      console.log("I have " + this.quantity +
      " " + this.color + " " + this.name +
      " in my cart");
  }
}
 
class Strawberry {
 
  // Initialize Fruits class with values
  fruits: Fruits = new Fruits(..., ..., ...);
   
  constructor() {
   
      // Call method to see everything is correct
      this.fruits.myCart();
  }
}
 
// Initialize strawberry class and
// call its constructor automatically
var obj: Strawberry = new Strawberry();

 
Esfuerzos de desarrollo reducidos usando un enfoque modular: Hay una gran falla en el enfoque anterior. Sí, tiene usted razón. Redefinir la misma clase Fruits, una y otra vez, es dolorosamente estúpido. Ahí es donde el módulo entra en escena. ¿Qué pasa si mantenemos la clase Fruits en un archivo y lo llamamos un módulo y luego simplemente llamamos a esa clase/módulo donde sea necesario? Esto ahorrará una cantidad considerable de tiempo y esfuerzo del desarrollador. Hagámoslo rápido.

Paso 1: Crea un nuevo archivo llamado Fruits.ts

Paso 2: elimine la definición de la clase Fruits de las 3 clases

Paso 3: péguelo en una sola ubicación, es decir, archivo Fruits.ts

export class Fruit {
 
  // Properties that every fruits have
  name: string;
  color: string;
  quantity: number;
 
  // Initialize the values
  constructor(name, color, quantity) {
 
      // Initialize values using this operator
  }
 
  myCart() {
 
     // A simple placeholder text
      console.log("I have " + this.quantity +
      " " + this.color + " " + this.name +
      " in my cart");
  }
}
 
console.log("Hello world!");

 
Tenga en cuenta que estamos usando la palabra clave de exportación en primer lugar. Exportar palabra clave en realidad hace posible que nuestra clase (o interfaz) se use en otro lugar del proyecto. Paralelamente, usamos la declaración de importación en el módulo que quiere usar el módulo exportado.

Observe también que hemos agregado una declaración de registro de la consola al final del archivo. No es obligatorio, pero queremos contarte un hecho importante más adelante en este mismo artículo. Por ahora, puedes simplemente ignorarlo y asumir que no está allí.

Ahora cuando tengamos nuestro módulo listo. Podemos simplemente llamarlo en nuestras clases. Técnicamente lo llamamos ‘ importar ‘ y usamos una palabra clave llamada ‘ importar ‘.

Sintaxis:

import {classname} from './location';

Importemos lo mismo rápidamente:

Nombre de archivo: Apple.ts

import { Fruits } from './main';
 
class Apple {
  fruits: Fruits = new Fruits('apples', 'green', 5);
  constructor() {
      this.fruits.myCart();
  }
}
var obj: Apple = new Apple();

 
Nombre de archivo: Kiwi.ts

import { Fruits } from './main';
class Kiwi {
  fruits: Fruits = new Fruits('kiwi', 'golden', 2);
  constructor() {
      this.fruits.myCart();
  }
}
var obj: Kiwi = new Kiwi();

 
Nombre de archivo: Strawberry.ts

import { Fruits } from './main';
class Strawberry {
  fruits: Fruits = new Fruits('strawberries', 'red', 5);
  constructor() {
      this.fruits.myCart();
  }
}
var obj: Strawberry = new Strawberry();

 
Mira lo limpio que se ve. Es fácil de entender y fácil de mantener ahora. Esa es toda la idea detrás del enfoque modular.

Algunos puntos sobrantes: hemos agregado una declaración de consola al final. Hay una razón para eso. Déjame mostrarte primero la salida. 

Producción

Vea que cada vez que ejecutamos los archivos, obtenemos un resultado específico de la clase, pero también obtenemos «¡Hola mundo!»

El motivo es que no pertenece a la clase exportada. Entonces por qué se llamó. La razón es que cada vez que importamos un módulo, el módulo completo se ejecuta una vez como un programa simple y cada línea dentro del archivo se ejecutará sin importar si está dentro de las llaves de la clase de exportación o no. Así que ten cuidado con lo que pones ahí. En opinión de un experto, no debería haber ninguna línea de código perdida. Úselos en algún método o simplemente elimine esas declaraciones si no son necesarias.

Resumen: Entonces, el módulo no es más que un concepto o enfoque en el que un fragmento de código se mantiene separado y se exporta explícitamente para que otros fragmentos de código puedan importarlo. Usamos palabras clave de exportación para hacer que una clase esté disponible públicamente y usamos importar para usar ese módulo exportado.

Cómo ejecutar el código:

Primero ejecutaremos:

tsc apple.ts

Luego ejecutaremos:

node apple.js

Esto es así porque no todos los navegadores entienden Typescript como entienden JavaScript. Entonces, Typescript primero debe compilarse en JavaScript, por eso usamos el comando de Node para eso. También podemos agrupar los dos comandos usando el operador AND:

Para Linux:

tsc apple.ts && node apple.js

Para Windows puedo usar el operador de tubería:

tsc apple.ts | node apple.js

Del mismo modo, puedo ejecutar clases de Kiwi y Strawberry.

resultado final:

Una última nota:

Esta es la forma profesional de escribir el código y se sigue globalmente. Entonces, mañana, si está escribiendo el código o revisando el código de otra persona, preste especial atención a la modularidad del código. Esto hará tu vida más fácil.