TypeScript - import ... 和 import {...} （带大括号）之间的区别

Question

从 Java 到 TS，我省略了导入类型周围的

{...}

。

import DiscriminatorMappingData from './DiscriminatorMappingData';

而不是

import {DiscriminatorMappingData} from './DiscriminatorMappingData';

参见 TypeScript - 将类存储为映射值？.

我读过文档，但不太明白。我只是从中得知，当我只需要文件中的一种类型时，我可以省略

{}

。
但是，这会导致奇怪的错误，例如“未知名称”或意外的类型不兼容。

那么，简单来说，有什么区别？

Answer 1

TypeScript 规范中涵盖了两个

import

声明之间的差异。来自 §11.3.2，进口申报：

表格的进口报关单

    import d from "mod";

与进口报关完全等同

    import { default as d } from "mod";

因此，当您导入作为模块的 default 实体导出的内容（带有

export default

声明，每个模块只能有一个）时，您可以省略大括号

only

。您在

import

声明中提供的名称将成为该导入实体的别名。

导入其他任何内容时，即使只是一个实体，也需要提供大括号。

Answer 2

default

导入需要不带花括号。通过下面的计算器功能示例就很容易理解了。

// Calculator.ts

export default function plus() { }    // Default export 

export function minus() { }           // Named export

export function multiply() { }        // Named export

---

默认导入：无大括号

// CalculatorTest.ts

import plus from "./Calculator"

plus

不应用大括号括起来，因为它是使用

default

关键字导出的。

---

命名导入：带大括号

// CalculatorTest.ts

import plus, { minus, multiply } from "./Calculator"

minus

和

multiply

应位于大括号内，因为它们仅使用

export

关键字导出。请注意，

plus

位于大括号之外。

---

默认导入的别名

如果您想要

default

导入的别名，您可以使用/不使用花括号来实现：

// CalculatorTest.ts

import { default as add, minus, multiply } from "./Calculator"

或

// CalculatorTest.ts

import add, { minus, multiply} from './Calculator'

现在

plus()

函数变为

add()

。这是可行的，因为每个模块只允许一个默认导出。

---

就是这样！希望有帮助。

Answer 3

这是

destructruring

格式的导入。本质上是对我们想要导入的所有实体进行分组

from

定义文件。

如果您熟悉其他编程语言，您可能会熟悉解构概念。实际上，

destructuring

是以作业的形式添加的，作为

es6

的一部分。

导入重组支持首先在此 Github 票证中的 TypeScript 中建议，但随后被分组在此票证下，该票证正在跟踪所有

es6 modules

。