TypeScript - разница между import ... и import {...} (с помощью фигурных скобок)

Question

Переходя от Java к TS, я опустил {...} вокруг импортного типа.

import DiscriminatorMappingData from './DiscriminatorMappingData';

вместо

import {DiscriminatorMappingData} from './DiscriminatorMappingData';

Смотрите TypeScript - сохранение класса в качестве значения карты?,

Я прочитал документацию и мало что понял. Я только взял из этого, что когда мне нужен только один тип из файла, я могу опустить {},
Однако это вызвало странные ошибки, такие как "Неизвестное имя", или неожиданные несовместимости типов.

Итак, какая разница, проще говоря?

Answer 1

Разница между вашими двумя import объявления описаны в спецификации TypeScript. Из §11.3.2, декларации на импорт:

Импортная декларация формы

import d from "mod";

точно соответствует импортной декларации

import { default as d } from "mod";

Таким образом, вы пропустите скобки только тогда, когда вы импортируете что-то, что было экспортировано как default сущность модуля (с export default декларация, из которых может быть только один на модуль). Имя, которое вы предоставляете в import объявление становится псевдонимом для этого импортированного объекта.

При импорте чего-либо еще, даже если это всего лишь одна сущность, необходимо указать скобки.

Раздел " Экспорт по умолчанию " в руководстве по TypeScript содержит несколько примеров.

Answer 2

В defaultimport должен быть без фигурных скобок. Это легко понять на следующем примере функций калькулятора.

пример

// 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 import, вы можете сделать это с / без фигурных скобок:

// 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,

Поддержка реструктуризации импорта была впервые предложена в TypeScript в этом тикете Github, но затем была сгруппирована по этому тикету, который отслеживал все es6 modules,