typescript - 在 TypeScript 中，导入或导出为 "top-level"是什么意思？

Question

TypeScript docs说:

In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module. Conversely, a file without any top-level import or export declarations is treated as a script whose contents are available in the global scope (and therefore to modules as well).

“顶级”导入或导出是什么意思？

Answer 1

顶级 import 是位于文件最顶部的 static 导入。强调 static，它被称为“顶级”不是因为它位于文件的顶部，而是因为有 dynamic 导入不是顶级:

import foo from 'foo' // top level import, static one

import('foo').then(/* ... */) // not top level import, dynamic one

// no static top-level import can live here (after any code that is not a top-level import declaration)

function bar() {
  import('foo').then(/* ... */) // not top level import, dynamic one
  // no static top-level import can live here
  // no export can live here too
}

// no static top-level import can live here

export const baz = 123 // exports are always top level, and static

// You still can add not top level imports here, in the very end
import('foo').then(/* ... */) 

现在，为什么这在 Typescript 中很重要？

好吧，如果你放两个没有顶级导入/导出的文件，它们有两个相同的标识符，你会得到一个错误:

// a.ts
let foo = 1 // Error: duplicate identifier

// b.ts
let foo = 1 // Error: duplicate identifier

发生这种情况是因为没有顶级导出/导入声明，并且 TS 将这些文件视为脚本(与模块相反)。如果你在浏览器中加载两个具有相同标识符的脚本会发生什么？是的，“重复标识符”错误会增加。因为这两个变量都位于全局命名空间中。

因此，为了避免这种情况，您可以这样做:

// a.ts
let foo = 1 // Ok

// b.ts
let foo = 1 // Ok
export {} // This is the magic. b.ts is now a module and hence, is not polluting the global namespace.