¿Cómo permitir que las clases definidas en un módulo sean accesibles fuera de un módulo?

En TypeScript mediante el uso de una declaración de importación, un módulo se puede utilizar en otro módulo. las variables, clases, métodos u otros objetos declarados en un módulo no son accesibles fuera de él. La palabra clave «exportar» se puede usar para construir un módulo, y el término «importar» se puede usar para importarlo a otro módulo. Vamos a demostrar cómo hacer esto.

Exportar: se puede usar un archivo .ts separado para crear un módulo, que puede tener variables, métodos y clases. Con todas las definiciones que pretenda incluir en un módulo y acceder desde otros módulos, se debe utilizar el prefijo export antes de ellas

El siguiente código se guarda en un archivo TypeScript llamado student.ts. Este módulo tiene dos variables y una clase llamada estudiante. La sección de variables se puede usar en otro módulo, ya que tiene el prefijo «exportar» como palabra clave, pero no se puede acceder a la variable student_name en otro módulo ya que no tiene el prefijo «exportar».

Javascript

export let section: number = 9;
export class Student {
    student_id: number;
    name: string;
    constructor(name: string, id: number) {
        this.name = name;
        this.student_id = id;
    }
    displayStudentDetails() {
        console.log(
            "student_id: " + `${this.student_id}` + ", 
                Student Name: " + this.name
        );
    }
}
  
let student_name: string = "aditi";

Importar: el módulo actual puede acceder a las variables, clases, etc. desde la otra clase usando la palabra clave «importar».

Sintaxis:

Import { name_of_the_class_or_variable_being_exported } from "file_path"
file_path : file path should be specified without any extension.

podemos importar solo aquellos métodos, variables o clases que tienen el prefijo «exportar» como palabra clave.

Ejemplo 1:

  • Importación de la exportación única de un módulo: en este ejemplo, la clase Student se importa desde el módulo student.ts. no se importan otras variables que sean de student.ts. Este archivo puede llamarse studentImport.ts. 

Javascript

import { Student } from "./student";
  
let Object = new Student("richa", 61);
console.log(Object.displayStudentDetails());

Producción:

student_id: 61, Student Name: richa
  • Importación de todo el módulo: en este ejemplo, importamos todas las exportaciones del módulo. La sintaxis * se utiliza para importar todas las exportaciones del módulo anterior. 

Javascript

import * as stu from "./student";
  
let Object = new stu.Student("richa", 61);
console.log(Object.displayStudentDetails());
  
let variable = stu.section;
console.log(variable);

Producción:

student_id: 61, Student Name: richa
undefined
9

¿Qué sucede si intentamos importar el nombre del estudiante que no tiene el prefijo de exportación de palabras clave? El compilador TypeScript genera un error. 

Javascript

import * as stu from "./student";
  
// let Object = new stu.Student("richa", 61);
// console.log(Object.displayStudentDetails());
  
let variable = stu.student_name;
console.log(variable);

Producción:

error TS2339: Property 'student_name' does not exist on type 'typeof import("/Users/...")'.
6 let variable = stu.student_name;

Cambiar el nombre de la exportación de un módulo: Aquí, la palabra clave ‘ as’ se usa para cambiar el nombre de la exportación. A veces nos gustaría cambiar el nombre de nuestras exportaciones a nombres mucho más simples, en tales casos podemos cambiar el nombre de las exportaciones como se indica en el siguiente ejemplo. Este código está en studentImport.ts. 

Javascript

import { Student as S } from "./three";
  
let Object = new S("richa", 61);
console.log(Object.displayStudentDetails());

Producción:

student_id: 61, Student Name: richa
undefined

Nota sobre la compilación: primero se debe compilar en el terminal el archivo TypeScript que contiene las declaraciones de importación.

tsc studentImport.ts

Luego, el archivo javascript creado debe compilarse con el siguiente comando:

node studentImport.js

Publicación traducida automáticamente

Artículo escrito por lizzywizzy366 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *