Variable global en TypeScript

1. Crear un nuevo proyecto en TypeScript
2. ¿Qué es un objeto global?
3. Declarar variables globales en TypeScript
4. Acceder a variables globales en TypeScript
5. Conclusión

La documentación de TypeScript define una biblioteca global como módulos a los que se accede desde el ámbito global y, por lo general, sabemos que estamos utilizando el ámbito global si no utilizamos la palabra clave importar para acceder a sus miembros.

Las bibliotecas globales contienen variables, interfaces, espacios de nombres globales y otras declaraciones a las que otros módulos pueden acceder en la aplicación. Este tutorial nos enseñará cómo crear variables globales en TypeScript y acceder a ellas desde otros archivos.

Crear un nuevo proyecto en TypeScript

Abra WebStorm IDEA y seleccione Archivo > Nuevo > Proyecto. En la ventana que se abre, seleccione Node.js en el lado izquierdo y cambie el nombre del proyecto de sin título a alcance global en la sección Ubicación o use el nombre que prefiera.

Asegúrese de que el entorno de tiempo de ejecución nodo esté instalado antes de crear este proyecto para asegurarse de que las secciones Node interpreter y Package manager se agreguen automáticamente desde el sistema de archivos.

Finalmente, presione el botón Crear para generar el proyecto. Una vez que se haya generado el proyecto, abra una nueva ventana de terminal usando el atajo de teclado Alt+F12 y use el siguiente comando para crear un archivo tsconfig.json.

~/WebstormProjects/global-scope$ tsc --init

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noEmitOnError": true,
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  }
}

La mayoría de las configuraciones en este archivo se generan automáticamente y hemos agregado la propiedad noEmitOnError: true para garantizar que los archivos JavaScript no se generen si hay un error de transpilación.

¿Qué es un objeto global?

Antes de crear variables globales, debemos comprender qué es un objeto global, ya que desempeña un papel clave en este contexto. En un entorno de JavaScript, cuando las variables globales se crean utilizando la palabra clave var, se agregan al objeto global.

En un entorno Node.js, las variables se agregan al objeto global según el contexto de ejecución. Los diferentes contextos de ejecución disponibles incluyen el navegador, el código que se ejecuta en un trabajador o el código que ejecuta Node.js.

El objeto para cada uno de estos contextos incluye Ventana, Trabajador y global.

Para acceder al objeto global sin considerar el contexto de ejecución, utilizaremos una propiedad denominada globalThis. La propiedad globalThis nos ayudará a acceder a las propiedades añadidas al ámbito global.

Tenga en cuenta que cualquier variable declarada usando let o const no se agrega al alcance global, y cualquier variable declarada usando la palabra clave var se agrega al alcance global.

Declarar variables globales en TypeScript

Cree un archivo llamado module.d.ts en el paquete global-scope y copie y pegue el siguiente código en el archivo.

declare var userName: string

declare var age: number

Cuando queramos crear un módulo para las variables globales, debemos hacerlo dentro de un archivo con extensión .d.ts como hemos hecho en este ejemplo.

En este código, hemos creado dos variables globales llamadas userName y age. Tenga en cuenta que hemos prefijado las declaraciones de variables con la palabra clave declare.

Debemos asegurarnos de que las variables globales declaradas en el nivel superior tengan como prefijo la palabra clave declare, ya que es una convención para cualquier variable declarada en este archivo.

Acceder a variables globales en TypeScript

Cree un archivo llamado main.ts en el paquete global-scope y copie y pegue el siguiente código en el archivo.

globalThis.userName = "john doe"
globalThis.age = 34

function main(){
    console.log(userName);
    console.log(age);
}
main();

En este código, hemos utilizado la propiedad globalThis para acceder a las variables globales userName y age del objeto global e inicializamos cada variable global con valores para su tipo.

La función main() registra los valores de cada variable global en la consola. Ejecute este código usando el siguiente comando para verificar que nuestro código funcione como se esperaba.

~/WebstormProjects/global-scope$ tsc && node main.js

El comando tsc transpila el código TypeScript a código JavaScript, y el comando node ejecuta el archivo llamado main.js. Asegúrese de que la salida sea como se muestra a continuación.

john doe
34

Conclusión

Este tutorial nos enseñó cómo crear variables globales en TypeScript. Los temas tratados en este tutorial incluyen qué es un objeto global, cómo declarar variables globales y cómo acceder a las variables globales.

Tenga en cuenta que no solo se pueden declarar variables en el archivo .d.ts. Podemos declarar interfaz, clase, función y otros.

Si queremos todos estos detalles encerrados en una variable, podemos usar un espacio de nombres que también funcionará como se esperaba.