TypeScript - import ... ile import {...} (süslü parantezlerle) arasındaki fark

Java'dan TS'ye gelirken, ithal edilen türün etrafındaki {...} kısmını atladım.

import DiscriminatorMappingData from './DiscriminatorMappingData';

yerine

import {DiscriminatorMappingData} from './DiscriminatorMappingData';

TypeScript'e bakın - bir sınıfı harita değeri olarak saklamak?

Dokümantasyonu okudum ama pek anlamadım. Sadece şunu anladım: bir dosyadan sadece bir tür gerektiğinde, {} kısmını atlayabilirim.
Ancak bu, "Bilinmeyen isim" gibi garip hatalara veya beklenmedik tür uyumsuzluklarına neden oldu.

Yani, basitçe söylemek gerekirse fark ne?

Cevap #1

İki import bildiriminiz arasındaki fark, TypeScript spesifikasyonunda ele alınmıştır. §11.3.2, Import Bildirimlerinden:

Şu biçimde bir ithalat beyannamesi
    import d from "mod";
ithalat bildirimi ile tam olarak eşdeğerdir
    import { default as d } from "mod";

Dolayısıyla, süslü parantezleri sadece, modülün default varlığı olarak dışa aktarılan bir şeyi (her modül için yalnızca bir kez olabilen export default bildirimi ile) içe aktardığınızda atarsınız. import bildiriminizde verdiğiniz isim, o içe aktarılan varlık için bir takma ad (alias) olur.

Başka bir şey ithal ederken, sadece bir öğe bile olsa, süslü parantezleri sağlamanız gerekir.

Cevap #2

default aktarımı süslü parantezsiz olmalıdır. Aşağıdaki hesap makinesi fonksiyonları örneği ile anlaması kolaydır.

// Calculator.ts

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

export function minus() { }           // Named export

export function multiply() { }        // Named export

Varsayılan İçe Aktarma: Süslü Parantez Yok

// CalculatorTest.ts

import plus from "./Calculator"

plus süslü parantezler içine alınmamalıdır çünkü default anahtar kelimesi kullanılarak dışa aktarılmaktadır.

İsimlendirilmiş İçe Aktarma: Süslü Parantezlerle

// CalculatorTest.ts

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

minus ve multiply, yalnızca export anahtar kelimesi kullanılarak dışa aktarıldıkları için süslü parantezlerin içinde olmalıdır. plus'un süslü parantezlerin dışında olduğunu unutmayın.

Varsayılan İçe Aktarma İçin Takma Ad

Eğer default import için bir takma ad istiyorsanız, bunu süslü parantezlerle veya süslü parantezsiz yapabilirsiniz:

// CalculatorTest.ts

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

VEYA

// CalculatorTest.ts

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

Artık plus() fonksiyonu add() oluyor. Bu işe yarıyor çünkü bir modül başına yalnızca bir varsayılan dışa aktarma izin veriliyor.