Javascript 如何将typescript文件导入脚本标记

我试图做的是将一个对象从我的typescript文件导入到一个脚本标记中

这就是我想做的

<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>

从“../config.ts”导入{config}；
让script=document.createElement（'script'）；
script.src=`https://maps.googleapis.com/maps/api/js?key=${config.GOOGLE\u MAPS\u KEY}`；
document.getElementsByTagName（'script'）[0].parentNode.appendChild（script）；

我不确定这是否可行，但我的react应用程序正在#app root中呈现，我正在尝试从配置中处理API密钥。当我运行这个程序时，什么都不会发生，但是如果我添加静态值，它似乎会工作

---

我希望通过将变量传递给脚本src，脚本将成功执行。

否，在脚本标记中读取ts文件是不可能的（至少在没有将其编译为js的情况下）

但是，您可以改为使用环境变量，并让react脚本将其编译到模板中，就像每次启动dev服务器或运行构建时一样

从这里开始：

首先，在项目的根目录下创建一个名为

.env

的env文件

接下来，让我们将环境变量添加到此文件：

REACT_APP_GOOGLE_MAPS_KEY=<your key>

REACT\u APP\u GOOGLE\u MAPS\u键=

最后，让我们修改index.html以引用我们的环境变量：

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

最后一个想法是，您可以在需要的地方使用首选的react方式（通过使用react插件）包含您的google maps依赖项，而不必为此烦恼。看看这个。它将为您加载/卸载api，您可以在加载api时从配置中传递密钥：

---

需要将typescript文件编译/转换为JS（转换为.JS文件），以便从浏览器中使用

您可以在此处在线编译TS文件： 并将输出复制到.js中

或

通过命令行安装（假设您在Windows上）

---

1.这是不可能的。您可以将该变量作为环境变量传递，并在运行时（开发环境）或构建时（产品环境）将其编译到索引模板中。有关更多信息，请咨询CRA文档

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