打字稿不会按原样发出导入语句

Question

我的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",

但是无论“module”设置为 ES6、ES2015、ES2020 还是 ESNext，它们的工作方式都是一样的。

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

Typescript（4.0.2 版）怎么可能/为什么不能发出导入？？

Answer 1

如果导入的项目仅用作类型，则 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;

但是对于任何规模的应用程序来说，这可能无法很好地扩展。