¿Cómo importar otros archivos TypeScript?

Algunas veces queremos alguna facilidad que hemos utilizado en nuestros proyectos anteriores, en esa situación no podemos volver a escribir ese script, simplemente podemos importarlo haciendo que ese archivo sea exportable. Para importar otros archivos TypeScript en un archivo TypeScript existente, debemos conocer el concepto de módulos . A partir de ECMAScript 2015 , JavaScript tiene un concepto de módulos y TypeScript comparte este concepto.

Los módulos son pequeñas unidades de código independiente y reutilizable que se desea utilizar como bloques de construcción. Los módulos permiten al desarrollador definir miembros privados y públicos por separado, lo que lo convierte en uno de los patrones de diseño más deseados en el paradigma de secuencias de comandos. Puede ver los módulos como Clases como en cualquier otro lenguaje de programación orientado a objetos. Exportado desde un módulo diferente, debe importarse utilizando uno de los formularios de importación .

Ejemplo 1: Importar una clase de un archivo a otro archivo.

Código 1: este archivo de código se importará y guardará el nombre del archivo como exportedFile.ts en un directorio.

// Exporting the class which will be
// used in another file
// Export keyword or form should be
// used to use the class 
export class exportedFile {
  
    // Class method which prints the
    // user called in another file
    sayHello(user){
        return "Hello " + user+ "!";
    }
}

Código 2: este archivo de código importará el código anterior y guardará este archivo con el nombre mainFile.ts en el mismo directorio.

// Importing the class from the location of the file
import { exportedFile } from "./exportedFile";
  
// Creating an object of the class which is imported
let user = new exportedFile();
  
// Calling the imported class function
console.log(user.sayHello("Geek"));

Producción:
```
Hello Geek!
```

Nota: debe compilar mainFile.ts que generará mainFile.js que ejecuta el archivo js.

En el archivo TypeScript que se va a importar debe incluir un formulario de exportación y el archivo principal donde se importa la clase debe contener un formulario de importación , mediante el cual TypeScript pueda identificar el archivo que se utiliza. Mediante el uso de este tipo de formularios de exportación e importación , podemos importar clases, interfaces, funciones, variables, todo lo que queramos.

Ejemplo 2: También podemos importarlos renombrándolos según nuestras necesidades. Importación de una función desde otro archivo cambiando el nombre de la función.

Código 1: guarde este archivo como exportedFile.ts

// Exporting the function which will be

// used in another file

export function sayHello(user:string) {

return "Hello " + user + "!";

}

Código 2: guarde este archivo como mainFile.ts

// Importing the function sayHello and renaming it 
// from the location of the file
import { sayHello as hello } from "./exportedFile";
  
let user = "Jake";
  
// Calling the imported function
console.log(hello(user));

Producción:
```
Hello Jake!
```

Ejemplo 3: podemos importar todo el contenido de un archivo utilizando el formulario de importación como se muestra a continuación. Importar todo se indica como ‘importar *’ .

Código 1: guarde este archivo como exportedFile.ts

// Here we have to export all the
// class, interface, function 
export class sayGoodByeTo {
    goodbye(user: string) {
        return "Good bye " + user + "!";
    }
}
export interface howareYou {
    howareyou(user: string) : string;
}
export function sayHello(user:string) {
    return "Hello " + user + "!";
}

Código 2: guarde este archivo como mainFile.ts

// Importing everything from the exportedFile.ts module
// Import all is indicated using 'import *' 
// and here 'as' keyword 
import * as importAll from "./exportedFile";
let user = "Geeks";
  
// Calling the imported function
console.log(importAll.sayHello(user));
  
// Implementing the imported interface
class hru implements importAll.howareYou {
    howareyou(user: string){
        return "How are you "+user+"!";
    }
}
  
// Calling the implemented function in the 
// Interface which is imported
let jd = new hru();
console.log(jd.howareyou(user));
  
// Creating the object of the imported class
// and calling it's function
let bye = new importAll.sayGoodByeTo();
console.log(bye.goodbye(user));

Producción:

Hello Geeks!
How are you Geeks!
Good bye Geeks!

Nota: Para importar todo, es necesario renombrar el módulo. Básicamente, está envolviendo toda la clase, función e interfaz en un solo módulo cuando usamos la palabra clave as . También podemos importar varios archivos simplemente escribiendo varios formularios de importación y la ubicación del módulo.

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta