टाइपस्क्रिप्ट निर्यात बनाम डिफ़ॉल्ट निर्यात

Question

के बीच टाइपप्रति में क्या अंतर है exportऔर default export। exportयदि मैं defaultनिर्यात करने से पहले कीवर्ड नहीं जोड़ता, तो सभी ट्यूटोरियल में, मैं देखता हूं कि लोग अपनी कक्षाओं में प्रवेश करते हैं और मैं अपना कोड संकलित नहीं कर सकता ।

इसके अलावा, मैं आधिकारिक टाइपस्क्रिप्ट प्रलेखन में डिफ़ॉल्ट निर्यात कीवर्ड का कोई भी निशान नहीं खोज सका ।

export class MyClass {

  collection = [1,2,3];

}

संकलन नहीं करता है। परंतु:

export default class MyClass {

  collection = [1,2,3];

}

कर देता है।

त्रुटि है: error TS1192: Module '"src/app/MyClass"' has no default export.

Comments

यह मदद कर सकता है: stackoverflow.com/q/32236163/218196

— फेलिक्स क्लिंग

विषय पर कुछ प्रकाश पढ़ने । यदि आप यह दिखाते हैं कि आप इस वर्ग को कैसे आयात कर रहे हैं, तो मुझे मदद मिल सकती है, मेरा मानना ​​है कि जहां त्रुटि हो रही है (आपको त्रुटि परिदृश्य को ठीक करने के लिए आयात सिंटैक्स को बदलने की आवश्यकता है)।

— सुनील डी।

"निर्यात" और "निर्यात डिफ़ॉल्ट" टाइपस्क्रिप्ट बिल्कुल नहीं हैं - वे ईएस 6 हैं।

— सेन्सि जेम्स

वर्थ पढ़ना, "एक्सपोर्ट डिफॉल्ट से बचें"

— डिएगो ओसोर्निओ

Answer 1

डिफ़ॉल्ट निर्यात ( export default)

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

मुख्य अंतर यह है कि आपके पास प्रति फ़ाइल केवल एक डिफ़ॉल्ट निर्यात हो सकता है और आप इसे इस तरह आयात करते हैं:

import MyClass from "./MyClass";

आप इसे अपनी पसंद का कोई भी नाम दे सकते हैं। उदाहरण के लिए यह ठीक काम करता है:

import MyClassAlias from "./MyClass";

नामांकित निर्यात ( export)

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

जब आप एक नामित निर्यात का उपयोग करते हैं, तो आपके पास प्रति फ़ाइल कई निर्यात हो सकते हैं और आपको ब्रेसिज़ में घिरे निर्यात को आयात करने की आवश्यकता होती है:

import { MyClass } from "./MyClass";

नोट: ब्रेसिज़ जोड़ना आपके प्रश्न में वर्णित त्रुटि को ठीक कर देगा और ब्रेसिज़ में निर्दिष्ट नाम को निर्यात के नाम से मेल खाना चाहिए।

या कहें कि आपकी फ़ाइल कई वर्गों को निर्यात करती है , तो आप दोनों को आयात कर सकते हैं:

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

या आप इस फ़ाइल में दोनों को अलग नाम दे सकते हैं:

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

या आप वह सब कुछ आयात कर सकते हैं जिसका उपयोग करके निर्यात किया जाता है * as:

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

कौन सा उपयोग करें?

ES6 में, डिफ़ॉल्ट निर्यात संक्षिप्त हैं क्योंकि उनका उपयोग मामला अधिक सामान्य है ; हालाँकि, जब मैं टाइपस्क्रिप्ट में किसी प्रोजेक्ट के लिए कोड आंतरिक पर काम कर रहा हूं, तो मैं लगभग हर समय डिफ़ॉल्ट निर्यात के बजाय नामित निर्यात का उपयोग करना पसंद करता हूं क्योंकि यह कोड रीफैक्टरिंग के साथ बहुत अच्छी तरह से काम करता है। उदाहरण के लिए, यदि आप डिफ़ॉल्ट रूप से एक वर्ग का निर्यात करते हैं और उस वर्ग का नाम बदल देते हैं, तो यह केवल उस फ़ाइल में कक्षा का नाम बदलेगा और अन्य फ़ाइलों में किसी भी अन्य संदर्भ का नहीं। नामित निर्यात के साथ यह अन्य सभी फाइलों में वर्ग और सभी संदर्भों का नाम बदल देगा।

यह बैरल फाइलों के साथ बहुत अच्छी तरह से खेलता है (फाइलें जो नेमस्पेस export *निर्यात का उपयोग करती हैं- -तैयार अन्य फाइलें)। इसका एक उदाहरण इस उत्तर के "उदाहरण" खंड में दिखाया गया है ।

ध्यान दें कि केवल एक निर्यात होने पर भी नामांकित निर्यात का उपयोग करने पर मेरी राय टाइपस्क्रिप्ट हैंडबुक के विपरीत है - "लाल झंडे" खंड। मेरा मानना ​​है कि यह सिफारिश केवल तब लागू होती है जब आप अन्य लोगों के उपयोग के लिए एक एपीआई बना रहे होते हैं और कोड आपके प्रोजेक्ट के लिए आंतरिक नहीं होता है। जब मैं लोगों के उपयोग के लिए एक एपीआई डिजाइन कर रहा हूं, तो मैं एक डिफ़ॉल्ट निर्यात का उपयोग करूंगा ताकि लोग कर सकें import myLibraryDefaultExport from "my-library-name";। यदि आप ऐसा करने के बारे में मुझसे असहमत हैं, तो मुझे आपका तर्क सुनना अच्छा लगेगा।

उस ने कहा, जो आप पसंद करते हैं उसे पाएं! आप एक ही समय में एक, दूसरे या दोनों का उपयोग कर सकते हैं।

अतिरिक्त अंक

एक डिफ़ॉल्ट निर्यात वास्तव में नाम के साथ एक नामित निर्यात है default, इसलिए यदि फ़ाइल में डिफ़ॉल्ट निर्यात होता है, तो आप यह करके भी आयात कर सकते हैं:

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

और ध्यान दें कि आयात करने के लिए ये अन्य तरीके मौजूद हैं: 

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

Comments

फ़ाइल में क्या हुआ import myAlias = require("./PathToFile")और क्या हुआ export = IInterfaceOrClass? क्या वह पुराना फैशन अब है?

— बेनक्र

@BenCr हाँ, यह नया es6 तरीका है

— डेविड शेरेट

आप 'नामांकित निर्यात' का उदाहरण क्यों नहीं देते?

— स्टेटो माचिनो

aws-sdk / clients / sns में डिफ़ॉल्ट निर्यात नहीं होता है और जब '/ sns' से आयात करने वाले साँपों का उपयोग करते हुए मुझे कोई निर्यात नहीं मिलता है, लेकिन आयात myAlias ​​= की आवश्यकता होती है ("./ PathToFile") काम करता है। क्या मैं स्रोत परिवर्तन किए बिना इसे आयात करने वाले सांपों को '/ sns' से बदलने के लिए कुछ कर सकता हूं?

— जेसन डायस

यदि आप स्पष्ट रूप से कीवर्ड नहीं डालते हैं तो क्या defaultउस फ़ाइल में अभी भी एक डिफ़ॉल्ट निर्यात उपलब्ध होगा? यदि ऐसा है तो नियम क्या हैं।

— साइमन_वेक

Answer 2

मैं एक ही समस्या का समाधान करने की कोशिश कर रहा था, लेकिन द्वारा एक दिलचस्प सलाह पाया Basarat अली सैयद की, टाइपप्रति गहन जानकारी प्राप्त करें , प्रसिद्धि है कि हम सामान्य से बचना चाहिए export defaultएक वर्ग के लिए घोषणा, और बदले संलग्न exportवर्ग घोषणा करने के लिए टैग। इंपोर्टेड क्लास को importमॉड्यूल की कमांड में सूचीबद्ध किया जाना चाहिए ।

वह है: के बजाय

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

और import Foo from './foo';आयात करने वाले मॉड्यूल में सरल , एक का उपयोग करना चाहिए

export class Foo {
    // ...
}

और import {Foo} from './foo'आयातक में।

इसका कारण वर्गों के पुन: संचालन में कठिनाई है, और निर्यात के लिए अतिरिक्त काम है। बसारत की मूल पोस्ट export defaultसमस्याओं को जन्म दे सकती है

Answer 3

यहाँ उदाहरण सरल वस्तु निर्यात के साथ है।

var MyScreen = {

    /* ... */

    width : function (percent){

        return window.innerWidth / 100 * percent

    }

    height : function (percent){

        return window.innerHeight / 100 * percent

    }


};

export default MyScreen

मुख्य फ़ाइल में (जब आप नहीं चाहते हैं और नई आवृत्ति बनाने की आवश्यकता नहीं है तो उपयोग करें) और यह वैश्विक नहीं है कि आप इसे केवल तभी आयात करेंगे जब यह आवश्यक हो:

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