在 Typescript/ES6 中 import * vs import { specificName }？

Question

聲明

declare module "MyModule" {

export function Foo() {...}
export function Bar() {...}

}

我只需要 Foo 某處，我應該如何導入它？

import * as MyModule from "MyModule";

MyModule.Foo();

或

import {Foo} from "MyModule";
Foo()

哪一個比另一個好？ 以第一種方式導入所有出口是否有任何性能影響？

我在發布問題之前閱讀的一些參考資料：

https://www.exratione.com/2015/12/es6-use-of-import-property-from-module-is-not-a-great-plan/

Answer 1

當然，只導入代碼所需的內容是很好的做法。 假設有人編寫了一些導入所有內容的千行代碼，然后您嘗試對其進行分析。 您認為您很容易知道代碼中使用的哪些函數是導入的，哪些不是？ 顯然這是一種可疑和不好的做法。

至於性能，我想影響不大。

Answer 2

import {} from ...語法使得對函數進行存根和監視變得非常困難，並且通常需要額外的庫，例如 rewire.js。 需要注意的是，搖樹也不起作用。 我傾向於保持我的 util 模塊很小，並且每個模塊可能只包含 2-3 個功能。 這樣我就可以為我的模塊使用import * as ...語法，並在可能的情況下為第三方模塊使用import {} ... 。 從而最大限度地減少搖樹的需要。

Answer 3

如果您只需要使用Foo ，我認為最好只導入Foo 。 這使您的代碼更清晰，因為通過查看該導入，您可以知道該代碼正在使用MyModule哪些元素。

它不會影響性能，因為無論哪種方式，您都必須讀取/下載整個文件。

此外，在使用 Rollup.js 之類的打包器時，您選擇哪個選項並不重要——即使您從MyModule導入所有內容，該包也將僅包含您在代碼中實際使用的內容。

Answer 4

如果有人仍在尋找答案，我已經分享了我對此的想法。

• 假設您有一個 JSON 文件，並且您想將整個模塊作為變量import *然后使用import * 。
• 如果您有一個具有多個導出方法的模塊（可以是 3rd 方包），那么您應該使用import {}方法。
• 任何默認導出都應作為“導入any name ”導入。