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

Posted 2023-02-22

【中文标题】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?。

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

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

【参考方案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 下。