Tsconfig ফাইলে esModuleInterop বোঝা

Question

আমি কারও .tsconfigফাইল পরীক্ষা করে দেখছিলাম এবং সেখানে আমি স্পট করেছি--esModuleInterop

এটি তাঁর .tsconfigফাইল

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es6",
    "module": "commonjs",
    "lib": ["esnext"],
    "strict": true,
    "sourceMap": true,
    "declaration": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declarationDir": "./dist",
    "outDir": "./dist",
    "typeRoots": ["node_modules/@types"]
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modues"]
}

এখানে, আমার প্রাথমিক প্রশ্নটি কী "esModuleInterop": true,এবং কী "allowSyntheticDefaultImports": true,। আমি জানি তারা সাজানোর উপর নির্ভরশীল "module": "commonjs",। কেউ কি এটি সর্বোত্তম মানুষের ভাষায় ব্যাখ্যা করার চেষ্টা করতে পারেন?

allowSyntheticDefaultImportsরাজ্যগুলির জন্য সরকারী দস্তাবেজ

কোনও ডিফল্ট রফতানি ছাড়াই মডিউলগুলি থেকে ডিফল্ট আমদানির অনুমতি দিন। এটি কোড নির্গমনকে প্রভাবিত করে না, কেবল টাইপচেকিং।

এর মানে কি এটা? আমদানি ডিফল্টের একমাত্র ব্যবহারের ক্ষেত্রে যদি কোনও রফতানি ডিফল্ট না থাকে তবে কি কিছু শুরু করতে হবে? সিঙ্গলটনের মতো?

নিম্নলিখিত প্রশ্ন / উত্তরটি ততই অর্থপূর্ণ হয় না কী tsconfig --esModuleInterop এর পতাকা হিসাবে বিপরীতে ব্যবহার করার কোনও উপায় আছে?

এবং --esModuleInteropসংকলক পৃষ্ঠায় সংজ্ঞা

রানটাইম ব্যাবেল ইকোসিস্টেমের সামঞ্জস্যের জন্য __importStar এবং __importDefault সহায়কগুলি প্রেরণ করুন এবং টাইপ সিস্টেমের সামঞ্জস্যের জন্য --allowSynthetDefaultImports সক্ষম করুন।

আমার পক্ষে বুঝতে / বোঝা মুশকিল বলে মনে হয়েছিল

Answer 1

সমস্যা বিবৃতি

যখন আমরা ES6 মডিউল কোডবেজে কমনজেএস মডিউলটি আমদানি করতে চাই তখন সমস্যা হয়।

এই পতাকাগুলির আগে আমাদের স্টার ( * as something) আমদানি সহ কমনজেএস মডিউলগুলি আমদানি করতে হয়েছিল:

// node_modules/moment/index.js
exports = moment

// index.ts file in our app
import * as moment from 'moment'
moment(); // not compliant with es6 module spec

// transpiled js (simplified):
const moment = require("moment");
moment();

আমরা দেখতে পারি যে *এটি কোনওভাবে exportsপরিবর্তনশীলের সমতুল্য ছিল । এটি দুর্দান্ত কাজ করেছে, তবে এটি এসআই 6 মডিউলগুলির সাথে অনুগত নয়। বৈশিষ্ট হিসাবে, তারকা আমদানিতে নেমস্পেস রেকর্ড ( momentআমাদের ক্ষেত্রে) কেবল একটি সরল অবজেক্ট হতে পারে, কলযোগ্য নয় ( moment()অনুমোদিত নয়)।

সমাধান

পতাকা সহ esModuleInteropআমরা মডিউল স্পেসের সাথে সম্মতিতে কমনজেএস মডিউলগুলি আমদানি করতে পারি es6। এখন আমাদের আমদানি কোডটি এর মতো দেখাচ্ছে:

// index.ts file in our app
import moment from 'moment'
moment(); // compliant with es6 module spec

// transpiled js with esModuleInterop (simplified):
const moment = __importDefault(require('moment'));
moment.default();

এটি কাজ করে এবং এটি এসআই 6 মডিউলগুলির সাথে পুরোপুরি বৈধ, কারণ momentতারকা আমদানি থেকে নামস্থান নয়, এটি ডিফল্ট আমদানি।

কিন্তু এটি কিভাবে কাজ করে? আপনি দেখতে পাচ্ছেন যেহেতু আমরা ডিফল্ট আমদানি করেছি, আমরা বস্তুকে defaultসম্পত্তি বলি moment। তবে আমরা মুহুর্তের লাইব্রেরিতে কোনও defaultসম্পত্তি ঘোষিত করিনি exports। কীটি __importDefaultকাজ করছে। এটি কমনজেএস মডিউলগুলির জন্য সম্পত্তিকে মডিউল ( exports) নির্ধারণ করে default:

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};

আপনি দেখতে পাচ্ছেন, আমরা এস mod মডিউলগুলি যেমন আছে তেমন আমদানি করি, তবে কমনজেএস মডিউলগুলি কী দিয়ে অবজেক্টে আবৃত হয় default। এটি কমনজেএস মডিউলগুলিতে ডিফল্ট আমদানি করা সম্ভব করে তোলে।

__importStarঅনুরূপ কাজ করে - এটি ছোঁয়াচে থাকা এসমোডিয়ুলগুলি ফেরত দেয় তবে সাধারণ জেএস মডিউলগুলি defaultসম্পত্তি সহ মডিউলগুলিতে অনুবাদ করে :

// index.ts file in our app
import * as moment from 'moment'

// transpiled js with esModuleInterop (simplified):
const moment = __importStar(require("moment"));
// note that "moment" is now uncallable - ts will report error!

var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};

সিনথেটিক আমদানি

এবং কি সম্পর্কে allowSyntheticDefaultImports, এটি কি জন্য? এখন ডক্সটি পরিষ্কার হওয়া উচিত:

Allow default imports from modules with no default export. This does not affect code emit, just typechecking.

ইন momenttypings আমরা নিদিষ্ট ডিফল্ট রপ্তানি হবে না, এবং আমরা থাকা উচিত নয়, beacuse এটি শুধুমাত্র পতাকা দিয়ে উপলব্ধ esModuleInteropকরে। সুতরাং allowSyntheticDefaultImportsযদি আমরা থ্রাইড পার্টি মডিউল থেকে ডিফল্ট রফতানি না করে ডিফল্ট আমদানি করতে চাই তবে ত্রুটির প্রতিবেদন করবে না।

Comments

--esModuleInteropপতাকাটি প্রবর্তনের আগে সঠিক import * as moment from 'moment'ছিল না । import moment = require('moment')ছিল।

— আলুয়ান হাদ্দাদ

Answer 2

esModuleInteropডক্সে বর্ণিত সাহায্যকারী তৈরি করে। উত্পন্ন কোডটি দেখে, আমরা দেখতে পাই যে এগুলি ঠিক কী করে:

//ts 
import React from 'react'
//js 
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));

__importDefault: মডিউলটি যদি মডিউল না esহয় তবে প্রয়োজনীয়টি যা ফিরে আসে তা ডিফল্ট হয়ে যায়। এর অর্থ হ'ল আপনি যদি কোনও commonjsমডিউলে ডিফল্ট আমদানি ব্যবহার করেন তবে পুরো মডিউলটি আসলে ডিফল্ট।

__importStarএই PR তে সেরা বর্ণিত হয়েছে :

টাইপসক্রিপ্ট একটি নেমস্পেস আমদানি (যেমন import * as foo from "foo") এর সমতুল্য হিসাবে বিবেচনা করে const foo = require("foo")। বিষয়গুলি এখানে সহজ, তবে আমদানি করা প্রাথমিক অবজেক্টটি আদিম বা কল / কনস্ট্রাক্ট স্বাক্ষর সহ কোনও মান যদি সেগুলি কার্যকর হয় না। ইসমাস্ক্রিপ্ট মূলত বলে যে একটি নেমস্পেস রেকর্ড একটি সরল বস্তু।

বাবেলের প্রথমে মডিউলটিতে প্রয়োজন হয় এবং নামের একটি সম্পত্তি অনুসন্ধান করা হয় __esModule। যদি __esModuleসেট করা থাকে true, তবে আচরণটি টাইপস্ক্রিপ্টের মতোই, তবে অন্যথায় এটি একটি নেমস্পেস রেকর্ড সংশ্লেষ করে যেখানে:

1. সমস্ত বৈশিষ্ট্যগুলি প্রয়োজনীয় মডিউল থেকে বিচ্ছিন্ন করে নামকরণকৃত আমদানি হিসাবে উপলব্ধ করা হয়।
2. মূলত প্রয়োজনীয়'ড মডিউলটি ডিফল্ট আমদানি হিসাবে উপলব্ধ করা হয়।

সুতরাং আমরা এটি পেতে:

// ts
import * as React from 'react'

// emitted js
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));

allowSyntheticDefaultImportsএই সমস্ত কিছুর সহযোগী, এটি মিথ্যা হিসাবে সেট করা নির্গত সাহায্যকারীদের পরিবর্তন করবে না (তাদের উভয় এখনও একই দেখায়)। আপনি যদি একটি সাধারণ মডিউলটির জন্য ডিফল্ট আমদানি ব্যবহার করে থাকেন তবে এটি টাইপস্ক্রিপ্ট ত্রুটি বাড়িয়ে তুলবে। তাই এই import React from 'react'ত্রুটি তুলবে Module '".../node_modules/@types/react/index"' has no default export.যদি allowSyntheticDefaultImportsহয় false।