6.2 মডিউল ফরম্যাট
টাইপস্ক্রিপ্ট বেশ কিছু মডিউল ফরম্যাট সাপোর্ট করে। এর মধ্যে উল্যেখযোগ্য হচ্ছে,
- AMD
- CommonJs
- ES6
টাইপস্ক্রিপ্ট এর tsconfig.json এ আমরা মডিউল ফরম্যাট কনফিগার করে দিতে পারি।
{
"compilerOptions": {
"module": "commonjs"
}
}
আমরা এখন উপরোক্ত মডিউল ফরম্যাট গুলো নিয়ে আলোচনা করবো।
AMD
AMD একটি ডিফাইন ফাংশন প্রোভাইড করে মডিউল ডিফাইন করার জন্য। এটি মূলত RequireJS লাইব্রেরি ইমপ্লিমেন্ট করেছে।
ডিফাইন ফাংশনটি আরগুমেন্ট হিসেবে প্রথমে মডিউল এর নাম, এরপর ডিপেন্ডেন্ট মডিউলের একটি অ্যারে এবং এর পর একটি ফ্যাক্টরি ফাংশন নেয়।
// AMD module.
define("amdCounterModule", ["dependencyModule1", "dependencyModule2"],
(dependencyModule1, dependencyModule2) => {
let count = 0;
const increase = () => ++count;
const reset = () => {
count = 0;
console.log("Count is reset.");
};
return {
increase,
reset
};
});
মডিউল ইম্পোর্ট করার জন্য এটি require ফাংশন ব্যবহার করে। যেমন উপরের মডিউল টি যদি আমরা ইম্পোর্ট করতে চাই তাহলে,
require(["amdCounterModule"], amdCounterModule => {
amdCounterModule.increase();
amdCounterModule.reset();
});
CommonJs
এটিও AMD এর মত ডিফাইন এবং কনজিউম প্যাটার্ন। NodeJs এ এটি ডিফল্ট ভাবে ইমপ্লিমেন্ট করা আছে।
এখানে এক্সপোর্ট এর জন্য module এবং exports ভ্যারিয়েবল প্রোভাইড করা হয় আর ইম্পোর্ট এর জন্য require ফাংশন ব্যবহার হয়।
// commonJSCounterModule.js.
let count = 0;
const increase = () => ++count;
const reset = () => {
count = 0;
console.log("Count is reset.");
};
module.exports = {
increase,
reset
};
উপরের কোডটিতে module.exports দিয়ে ডিক্লারেশন গুলো এক্সপোর্ট করা হয়েছে।
এখন আমরা যদি এই মডিউল থেকে ইম্পোর্ট করতে চাই তাহলে:
const commonJSCounterModule = require("./commonJSCounterModule");
commonJSCounterModule.increase();
commonJSCounterModule.reset();
ES6 module
এটি মূলত ECMAScript 2015 এর মডিউল ফরম্যাট। এখানে ইম্পোর্ট/এক্সপোর্ট এর জন্য সিনট্যাক্স হিসেবে যথাক্রমে import এবং export কীওয়ার্ড ব্যবহার করা হয়।
// esCounterModule.js
let count = 0;
export const increase = () => ++count;
export const reset = () => {
count = 0;
console.log("Count is reset.");
};
এখানে esCounterModule মডিউল থেকে এক্সপোর্ট করে দেখানো হয়েছে।
এক্সপোর্ট দুই ভাবে করা যায় Named export এবং default export। default export নিয়ে আমরা পরবর্তিতে বিস্তারিত আলোচনা করবো।
একইভাবে ইম্পোর্ট করার ক্ষেত্রে:
// example-import.js
import { increase, reset } from "./esCounterModule.mjs";
increase();
reset();
ECMAScript 2020 থেকে import ফাংশন ব্যবহার করে ডাইনামিক ভাবে ইম্পোর্ট করা যায়। এক্ষেত্রে import ফাংশন প্রমিস রিটার্ন করে। তাই নরমাল প্রমিসের মত then মেথড ব্যবহার করে আমরা মডিউল ডাইনামিক ভাবে কনজিউম করতে পারি।
// example-import.js
import("./esCounterModule.js").then(({ increase, reset }) => {
increase();
reset();
});
কোন একটা মডিউল লেজি লোড করার জন্য এধরনের ডাইনামিক ইম্পোর্ট আমাদের কাজে দেয়। কোন একটি বড় ফাংশন অথবা ফিচার কন্ডিশনালি লোড করার জন্যও ডাইনামিক লোডিং ব্যবহার করা হয়।
যেহেতু এটা একটি প্রমিস রিটার্ন করে তাই আমরা এখানে await কীওয়ার্ডও ব্যবহার করতে পারি।
যেসব ব্রাউজার-এ ES module সাপোর্ট করেনা সেখানে এটি ট্রান্সপাইল করে অন্য কোন ফরম্যাট যেমন-CommonJS/Node.js, AMD/RequireJS, System/SystemJS ইত্যাদিতে নেওয়া হয়।
এক্ষেত্রে tsconfig.json এ ট্রান্সপাইলার হিসেবে যেটা সেট করা থাকে সে ফরম্যাটেই ট্রান্সপাইল হয়।
এছাড়াও টাইপস্ক্রিপ্ট এ module এবং namespace নামে দুইটি কীওয়ার্ড আছে।
module Counter {
let count = 0;
export const increase = () => ++count;
export const reset = () => {
count = 0;
console.log("Count is reset.");
};
}
namespace Counter {
let count = 0;
export const increase = () => ++count;
export const reset = () => {
count = 0;
console.log("Count is reset.");
};
}
এ দুইটাই ট্রান্সপাইল হয়ে জাভাস্ক্রিপ্ট অবজেক্ট হয়ে যায়।
