Typescript不会照原样发出导入语句

问题描述

我的index.html仅使用<script type="module" src="./index.js"></script>导入一个脚本

index.ts顶部是现在标准的导入语句

import { PieChart } from "./pie-chart.js";
import { ChartLegend } from "./chart-legend.js";

但是index.ts，在编译为index.js时，将完全删除import语句，并用其他任何内容代替。我的tsconfig.json设置为

        "target": "ES2020","module": "ESNext",

但是，无论将“模块”设置为ES6，ES2015，ES2020还是ESNext，它们的作用都相同。

浏览器现在可以原生理解import语句，并且可以正确导入文件（假设存在.js扩展名并且路径正确）。我通过将这些导入语句复制粘贴到生成的.js文件中来进行尝试，然后一切都变亮了。

打字稿（版本4.0.2）如何/为什么不能发出导入？

解决方法

如果导入的项目仅用作类型，Typescript将从文件中删除导入。

import { PieChart } from "./pie-chart.js";

const pie = document.querySelector("pie-chart") as PieChart;

不会导致导入被发射。但是，您可以使用

“导入具有副作用的模块”

import "./pie-chart.js";

，导入将被发出。您也可以两者都做。

import { PieChart } from "./pie-chart.js";
import "./pie-chart.js";

const pie = document.querySelector("pie-chart") as PieChart;

但是对于任何大型应用程序，这可能无法很好地扩展。