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

【问题标题】：TypeScript - difference between import ... and import {...} (with curly braces)TypeScript - import ... 和 import {...} 之间的区别（带花括号）
【发布时间】：2016-12-08 08:13:06
【问题描述】：

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

import DiscriminatorMappingData from './DiscriminatorMappingData';

而不是

import {DiscriminatorMappingData} from './DiscriminatorMappingData';

见TypeScript - storing a class as a map value?。

我已阅读文档并不太了解。我只是从中得到，当我只需要文件中的一种类型时，我可以省略{}。
但是，这会导致奇怪的错误，例如“未知名称”或意外的类型不兼容。

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

【问题讨论】：

标签： typescript import

【解决方案1】：

TypeScript 规范中涵盖了两个 import 声明之间的区别。从§11.3.2，Import Declarations:

形式的进口声明

import d from "mod";

完全等同于导入声明

import { default as d } from "mod";

因此，当您导入作为模块的default 实体（带有export default 声明，其中只能有一个声明）导出的内容时，您可以省略大括号每个模块）。您在 import 声明中提供的名称将成为该导入实体的别名。

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

TypeScript 手册的Default exports 部分有一些示例。

【讨论】：

【解决方案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()。这是因为每个模块只允许一个默认导出。

就是这样！希望对您有所帮助。

【讨论】：

【解决方案3】：

这是destructruring 格式的导入。基本上将我们要导入的所有实体 from 分组为一个定义文件。

如果您熟悉其他编程语言，您可能熟悉解构概念。实际上destructuring 是以assignments 的形式添加为es6 的一部分。

TypeScript 最初在 this Github ticket 中建议了导入重组支持，但随后被归入跟踪所有 es6 modules 的 this ticket 下。

【讨论】：