টাইপস্ক্রিপ্ট রফতানি বনাম ডিফল্ট রফতানি

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

এটি সাহায্য করতে পারে: স্ট্যাকওভারফ্লো.com

— ফেলিক্স ক্লিং

বিষয়টি নিয়ে কিছুটা হালকা পঠন । আপনি যদি এই ক্লাসটি কীভাবে আমদানি করছেন তা দেখায় এটির সহায়তা হতে পারে, আমি বিশ্বাস করি যে সেখানে ত্রুটিটি ঘটছে (

— সুনীল ডি

"এক্সপোর্ট" এবং "এক্সপোর্ট ডিফল্ট" মোটেই টাইপস্ক্রিপ্ট নয় - এগুলি ES6।

— সেনসেই জেমস

মূল্যবান পঠন, "রফতানি ডিফল্ট

— এড়ান

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ফাইলের মধ্যে আছে? এখন কি সেই পুরানো ed

— বেনক্রি

@ বেনসিআর হ্যাঁ, এটি নতুন এস 6 উপায়

— ডেভিড শেরেট

কেন আপনি 'নামযুক্ত রফতানির' উদাহরণ দিচ্ছেন না?

— স্ট্যাটো মাচিনো

aws-sdk / ক্লায়েন্ট / sns এর ডিফল্ট রফতানি থাকে না এবং '/ sns' থেকে আমদানি 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'আমদানিকারীর মধ্যে।

এর কারণ হ'ল ক্লাসগুলির পুনর্নির্মাণে অসুবিধা এবং রফতানির জন্য যুক্ত কাজ work বাসরতের মূল পোস্টটি 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) );