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

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;

但这可能无法很好地扩展任何重要大小的应用程序。

Typescript won't emit import statements as-is