Búsqueda de sitios web

javascript - Cómo importar un archivo typescript en una etiqueta script

Lo que estoy intentando hacer es importar un objeto de mi archivo de TypeScript en una etiqueta de script

Esto es lo que estoy tratando de hacer

<div id="app-root"></div>
<script>
import {config} from '../config.ts';

let script = document.createElement('script');
script.src = `https://maps.googleapis.com/maps/api/js?key=${config.GOOGLE_MAPS_KEY}`;

document.getElementsByTagName('script')[0].parentNode.appendChild(script);

</script>

No estoy seguro de si esto es posible, pero mi aplicación de React se está renderizando en #app-root y estoy intentando manejar mi clave de API desde mi configuración. Cuando ejecuto esto, no pasa nada, pero si agrego el valor estático en su lugar, parece funcionar.

Lo que espero que suceda es que al pasar la variable al src del script, el script se ejecute con éxito.

Respuesta #1

Los archivos de TypeScript necesitan ser compilados/convertidos a JS (a un archivo .js) para poder ser usados desde el navegador.

Puedes compilar tu archivo TS en línea aquí: https://www.typescriptlang.org/play y copiar el resultado en .js

o

Instálalo a través de la línea de comandos (suponiendo que estés en Windows)

npm install typescript // add -g if you want to install it globally
cd intoYourFolder // change directory to the folder where you have the .ts file
tsc *.ts // this will compile all typescript files in the directory
tsc yourFile.ts // this will compile only a specific file

Respuesta #2

No, no es posible leer un archivo ts en una etiqueta script (al menos sin compilarlo primero a js).

Lo que puedes hacer, sin embargo, es usar variables de entorno en su lugar, y dejar que react-scripts las compile en tu plantilla como ya lo hace cada vez que inicias el servidor de desarrollo o ejecutas la compilación.

empieza aquí:

https://create-react-app.dev/docs/adding-custom-environment-variables

Primero, crea un archivo env llamado .env en la raíz de nuestro proyecto

A continuación, agreguemos nuestra variable de entorno a este archivo:

REACT_APP_GOOGLE_MAPS_KEY=<your key>

Finalmente, vamos a modificar index.html para hacer referencia a nuestra variable de entorno:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_GOOGLE_MAPS_KEY%"></script>

Como reflexión final, en lugar de pasar por todo este problema, podrías en su lugar incluir tu dependencia de Google Maps donde sea necesario de la manera preferida en React: utilizando un complemento de React. Mira esto. Se encargará de cargar y descargar la API por ti, y puedes pasar tu clave desde la configuración cuando cargues la API:

https://www.npmjs.com/package/@react-google-maps/api

Artículos relacionados