Yazı tipi dışa aktarma ve varsayılan dışa aktarma

Dizgindeki exportve arasındaki fark nedir default export. Tüm exportderslerde insanları sınıflarında ing görüyorum ve defaultdışa aktarmadan önce anahtar kelimeyi eklemezsem kodumu derleyemem.

Ayrıca, resmi dışa aktarma belgelerinde varsayılan dışa aktarma anahtar sözcüğünün hiçbir izini bulamadım .

export class MyClass {

  collection = [1,2,3];

}

Derlemez. Fakat:

export default class MyClass {

  collection = [1,2,3];

}

Does.

Hata: error TS1192: Module '"src/app/MyClass"' has no default export.

Varsayılan Dışa Aktarma ( export default)

// MyClass.ts -- using default export
export default class MyClass { /* ... */ }

Temel fark, dosya başına yalnızca bir varsayılan dışa aktarma yapabilmeniz ve bu şekilde içe aktarmanızdır:

import MyClass from "./MyClass";

İstediğiniz herhangi bir adı verebilirsiniz. Örneğin, bu iyi çalışır:

import MyClassAlias from "./MyClass";

Adlandırılmış Dışa Aktarma ( export)

// MyClass.ts -- using named exports
export class MyClass { /* ... */ }
export class MyOtherClass { /* ... */ }

Adlandırılmış bir dışa aktarma kullandığınızda, dosya başına birden çok dışa aktarma yapabilirsiniz ve kaşlı ayraçlarla çevrili dışa aktarmaları içe aktarmanız gerekir:

import { MyClass } from "./MyClass";

Not: Diş telleri eklemek, sorunuzda açıkladığınız hatayı düzeltir ve kaşlı ayraçlarda belirtilen adın dışa aktarma adıyla eşleşmesi gerekir.

Veya dosyanızın birden fazla sınıf dışa aktardığını varsa, her ikisini de aşağıdaki gibi içe aktarabilirsiniz:

import { MyClass, MyOtherClass } from "./MyClass";
// use MyClass and MyOtherClass

Veya bu dosyada ikisinden birine farklı bir ad verebilirsiniz:

import { MyClass, MyOtherClass as MyOtherClassAlias } from "./MyClass";
// use MyClass and MyOtherClassAlias

Veya aşağıdakileri kullanarak dışa aktarılan her şeyi içe aktarabilirsiniz * as:

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass and MyClasses.MyOtherClass here

Hangisi kullanılır?

ES6'da, varsayılan ihracat özlüdür çünkü kullanım durumları daha yaygındır ; Ancak, TypeScript'te bir projenin içindeki kod üzerinde çalışırken, kod yeniden düzenleme ile çok iyi çalıştığı için hemen hemen her zaman varsayılan dışa aktarmalar yerine adlandırılmış dışa aktarmaları kullanmayı tercih ederim. Örneğin, bir sınıfı varsayılan olarak dışa aktarır ve o sınıfı yeniden adlandırırsanız, yalnızca o dosyadaki sınıfı yeniden adlandırır, diğer dosyalardaki diğer başvuruların hiçbirini değiştirmez. Adlandırılmış dışa aktarmalarla, sınıfı ve diğer tüm dosyalarda o sınıfa yapılan tüm başvuruları yeniden adlandırır.

Ayrıca, namlu dosyalarıyla ( export *diğer dosyaları dışa aktarmak için ad alanı dışa aktarmalarını kullanan dosyalar) çok güzel oynar . Bunun bir örneği bu cevabın "örnek" bölümünde gösterilmektedir .

Yalnızca bir dışa aktarma olsa bile adlandırılmış dışa aktarma kullanma hakkındaki düşüncemin TypeScript El Kitabına aykırı olduğunu unutmayın - "Kırmızı Bayraklar" bölümüne bakın. Bu önerinin yalnızca diğer kişilerin kullanması için bir API oluşturduğunuzda ve kodun projenize dahil olmadığında geçerli olduğuna inanıyorum. Kişilerin kullanması için bir API tasarlarken, insanların yapabilmesi için varsayılan bir dışa aktarma kullanacağım import myLibraryDefaultExport from "my-library-name";. Bana bunu yapma konusunda katılmıyorsanız, muhakemenizi duymak isterim.

Dedi ki, ne tercih bulmak! Birini, diğerini veya her ikisini aynı anda kullanabilirsiniz.

Ek Noktalar

Varsayılan dışa aktarma aslında adıyla adlandırılmış bir dışa aktarımdır default, bu nedenle dosya varsayılan dışa aktarmaya sahipse şunları yaparak da içe aktarabilirsiniz:

import { default as MyClass } from "./MyClass";

Ve şu içe aktarmanın diğer yollarının mevcut olduğunu unutmayın : 

import MyDefaultExportedClass, { Class1, Class2 } from "./SomeFile";
import MyDefaultExportedClass, * as Classes from "./SomeFile";
import "./SomeFile"; // runs SomeFile.js without importing any exports

Aynı sorun çözmeye çalıştığı, fakat tarafından ilginç bir tavsiyesi bulunmuştur Basarat Ali Syed arasında typescript Deep Dive biz jenerik kaçınmak gerektiğini, şöhret export defaultbir sınıf için deklarasyon ve bunun yerine ekleme exportsınıf bildirimi için etiket. İçe aktarılan sınıf bunun yerine importmodülün komutunda listelenmelidir .

Yani: yerine

class Foo {
    // ...
}
export default Foo;

ve basit import Foo from './foo';olacak ithal modül, bir kullanmalısınız

export class Foo {
    // ...
}

ve import {Foo} from './foo'ithalatçıda.

Bunun nedeni, sınıfların yeniden düzenlenmesindeki zorluklar ve ihracat için eklenen çalışmadır. Basarat'ın orijinal gönderisi export defaultsorunlara yol açabilir

Basit nesne dışa aktarma örneği.

var MyScreen = {

    /* ... */

    width : function (percent){

        return window.innerWidth / 100 * percent

    }

    height : function (percent){

        return window.innerHeight / 100 * percent

    }


};

export default MyScreen

Ana dosyada (Yeni örnek oluşturmak istemediğinizde ve gerekmediğinde kullanın) ve global değil, bunu yalnızca gerektiğinde içe aktaracaksınız:

import MyScreen from "./module/screen";
console.log( MyScreen.width(100) );