TypeScript - import ...和import {...}之间的区别(带花括号)

Question

从Java到TS,我省略{...}了导入类型.

import DiscriminatorMappingData from './DiscriminatorMappingData';

代替

import {DiscriminatorMappingData} from './DiscriminatorMappingData';

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

我已阅读文档并且不太了解.我只从中获取当我只需要一个文件中的一种类型时,我可以省略它{}.
但是,这会导致奇怪的错误,例如"未知名称"或意外类型不兼容.

那么,有什么区别,简单地说吧？

Answer 1

importTypeScript规范中介绍了两个声明之间的区别.从§11.3.2开始,导入声明:

表单的导入声明

import d from "mod";

完全等同于导入声明

import { default as d } from "mod";

因此,只有在导入作为default模块实体导出的内容时才会省略大括号(带有export default声明,每个模块只能有一个声明).您在import声明中提供的名称将成为该导入实体的别名.

在导入任何其他内容时,即使它只是一个实体,您也需要提供大括号.

TypeScript手册的Default exports部分有几个例子.

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.