babel/ tsc编译器是如何知道在仅为类型导入包时不导入包的？

Question

我目前正在实现我的项目的类型记录。

我发现了一些奇怪的东西。

您可以在下面的App.tsx文件中看到，为了获得对firebase.app.App类型的访问权限，我必须使用import firebase from "firebase/app"。

App.tsx

import React from "react";
import firebase from "firebase/app";

interface App_PROPS {
  firebase: firebase.app.App | null;
};

firebase.initializeApp({});

const App: React.FC<App_PROPS> = () => {
  return(
    <div>App</div>
  )
};

export default App;

我想这会成为我的项目中的一个bug，因为自从我做了，导入就不会发生在我的服务器代码上，因为firebase/app不打算在服务器上使用。顺便说一下，这就是为什么firebase包通过props传递的原因。

但令我感到意外的是，这个包裹根本没有进口：

当我使用babel-loader (通过webpack)将其与babel传输时，我得到的是：

babel App.js -用变换

var _react = _interopRequireDefault(require("react"));

// (...) SOME OTHER CODE
// I WILL NOT POST THE FULL CODE HERE
// BUT "firebase/app" WAS NOT IMPORTED

同样，当我使用tsc src/App.tsx传输它时

tsc App.js -用变换

"use strict";
exports.__esModule = true;
var react_1 = require("react");
;
var App = function () {
    return (<div>App</div>);
};
exports["default"] = App;

// "firebase/app" WAS NOT IMPORTED

有人能向我解释一下在这种情况下发生了什么吗？我很高兴转发器没有进口包装，但为什么呢？

是因为我只使用interface {}中的包吗？那么，在转换到类型记录之后，接口就会消失(因为它在JS中是不存在的)，并且包将被一些tree-shaking算法删除？

OBS: --我也尝试过相同的代码，但这次调用firebase.initializeApp()，这是来自firebase包的一种方法。在本例中，firebase/app包是在App.tsx文件的转换版本中导入的，这是有意义的。

Answer 1

这一切都归结为，这个导入是否被用作一个值？或者只是键入？

我会解释：

举个例子：

import firebase from "firebase/app";

如果使用firebase.initializeApp() -，则使用它的值，从类型记录编译中生成的javascript需要提供initalizeApp函数，并在编译结束后在运行时运行。这意味着它需要访问firebase导入，这样类型记录编译就不会削减这个导入，然后webpack将它传输到firebase

另一方面，如果使用firebase: firebase.app.App | null; -，则使用它的类型。您正在对类型记录编译器说：“当您键入安全firebase属性时，请确保它的类型为firebase.app.App。”--在这种类型安全检查之后，不再需要任何与firebase相关的内容。

编译文件时，它会检查它是否只使用来自给定导入的类型。如果是的话，它就会削减这个导入。。

SideNote：

在打字稿3.8import type关键字是介绍。

它让你定义

import type firebase from "firebase/app";

这意味着此导入只能用于类型。如果您尝试firebase.initializeApp()，构建将失败.，这对于您的场景来说是很经典的，以防将来的开发人员也使用此导入作为值。