Babel এর TypeScript Presets ব্যবহার

BabelJS মূলত JavaScript কোডকে ট্রান্সপাইল করতে ব্যবহৃত হয়, তবে এটি TypeScript কোডও ট্রান্সপাইল করতে সক্ষম। TypeScript হলো JavaScript এর একটি সুপারসেট, যা স্ট্যাটিক টাইপিং এবং ক্লাস-বেসড অবজেক্ট অরিয়েন্টেড প্রোগ্রামিং ফিচারগুলো সমর্থন করে। যদিও TypeScript নিজেই একটি ট্রান্সপাইলার (যার মাধ্যমে TypeScript কোড JavaScript এ রূপান্তরিত হয়), অনেক ডেভেলপার BabelJS ব্যবহার করে TypeScript কোড ট্রান্সপাইল করতে prefer করেন, কারণ এটি দ্রুত এবং আরো কাস্টমাইজযোগ্য।

Babel TypeScript কোডকে সাধারণ JavaScript কোডে ট্রান্সপাইল করতে @babel/preset-typescript নামে একটি preset প্রদান করে। এই preset TypeScript কোডের টাইপ ইনফরমেশন (type information) সরিয়ে ফেলে এবং শুধুমাত্র JavaScript কোড রেখে দেয়, যার ফলে কোডটি কম্পাইল হওয়া এবং চালানোর জন্য প্রস্তুত হয়।

BabelJS এ TypeScript Preset ব্যবহার

BabelJS দিয়ে TypeScript কোড ট্রান্সপাইল করার জন্য, আপনাকে @babel/preset-typescript ইনস্টল করতে হবে এবং এটি কনফিগারেশন ফাইলে যুক্ত করতে হবে।

১. TypeScript Preset ইনস্টল করা

প্রথমে, আপনাকে Babel এর TypeScript preset ইনস্টল করতে হবে।

npm install --save-dev @babel/preset-typescript

২. Babel কনফিগারেশন ফাইল সেটআপ

এরপর, আপনাকে আপনার Babel কনফিগারেশন ফাইল (যেমন babel.config.js অথবা .babelrc) এ @babel/preset-typescript যোগ করতে হবে। এটি TypeScript কোড ট্রান্সপাইল করার জন্য নির্দেশনা দেবে।

উদাহরণ: babel.config.js

module.exports = {
  presets: [
    '@babel/preset-env',     // ES6 বা পরবর্তী ফিচারগুলির জন্য
    '@babel/preset-typescript'  // TypeScript কোড ট্রান্সপাইল করতে
  ],
};

এখানে, @babel/preset-env ES6 বা পরবর্তী JavaScript ফিচারগুলির জন্য ব্যবহৃত হচ্ছে, এবং @babel/preset-typescript TypeScript কোডের টাইপ তথ্য বাদ দিয়ে JavaScript কোডে রূপান্তর করছে।

উদাহরণ: .babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

৩. TypeScript কোড ট্রান্সপাইল করা

Babel এর TypeScript preset ব্যবহার করার পর, আপনি TypeScript কোডকে JavaScript কোডে ট্রান্সপাইল করতে পারবেন। উদাহরণস্বরূপ:

TypeScript কোড (example.ts):

function greet(name: string): string {
  return `Hello, ${name}`;
}

let user = "John";
console.log(greet(user));

এই TypeScript কোডটি যদি Babel দিয়ে ট্রান্সপাইল করেন, তাহলে এটি এমন একটি JavaScript কোডে রূপান্তরিত হবে যা সাধারণ JavaScript পরিবেশে কাজ করবে।

Transpiled JavaScript কোড (example.js):

function greet(name) {
  return `Hello, ${name}`;
}

let user = "John";
console.log(greet(user));

৪. TypeScript টাইপ চেকিং

Babel দিয়ে TypeScript কোড ট্রান্সপাইল করার সময় টাইপ চেকিং করা হয় না। অর্থাৎ, TypeScript এর স্ট্যাটিক টাইপিং চেকিং এবং টাইপ ত্রুটি সনাক্ত করা থেকে আপনি বাদ পড়বেন। Babel শুধুমাত্র TypeScript কোডটি JavaScript এ রূপান্তর করবে এবং টাইপ সিস্টেমের কোনো বিষয় নিয়ে কাজ করবে না।

টাইপ চেকিং করতে চাইলে আপনাকে TypeScript ট্রান্সপাইলার (tsc) ব্যবহার করতে হবে। সাধারণত, প্রকল্পে Babel এবং TypeScript উভয় ব্যবহার করা হয়, যেখানে Babel কোড রূপান্তর এবং TypeScript টাইপ চেকিং করে।

৫. @babel/preset-typescript এর বিকল্প কনফিগারেশন

Babel এর TypeScript preset এর জন্য কয়েকটি কনফিগারেশন অপশন রয়েছে। যেমন:

• allExtensions: এটি নির্দেশ করে যে, TypeScript ফাইলগুলো .ts এবং .tsx এক্সটেনশনের সাথে হবে, অথবা আপনি নিজে কাস্টম এক্সটেনশনও নির্দিষ্ট করতে পারেন।

উদাহরণ:

module.exports = {
  presets: [
    [
      '@babel/preset-typescript',
      {
        allExtensions: true,  // .ts এবং .tsx উভয় ফাইলের জন্য
      }
    ]
  ]
};

• jsx: JSX সমর্থন সক্ষম করতে ব্যবহৃত হয়, বিশেষত যখন আপনি React এর সাথে TypeScript ব্যবহার করেন।

উদাহরণ:

module.exports = {
  presets: [
    [
      '@babel/preset-typescript',
      {
        jsx: 'react',  // React JSX সিনট্যাক্সের জন্য
      }
    ]
  ]
};

৬. TypeScript এর সাথে Babel এবং Webpack ব্যবহার

যদি আপনি Webpack ব্যবহার করেন, তবে Babel এবং TypeScript একসাথে ব্যবহারের জন্য babel-loader এবং ts-loader ব্যবহৃত হতে পারে।

উদাহরণ: Webpack কনফিগারেশন

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,  // TypeScript ফাইল চেক করবে
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-typescript'],
            }
          },
          'ts-loader'
        ],
        exclude: /node_modules/,
      },
    ]
  }
};

এখানে, ts-loader TypeScript কোডকে প্রথমে ট্রান্সপাইল করবে, তারপর Babel সেটি JavaScript কোডে রূপান্তরিত করবে।

সারাংশ

BabelJS দিয়ে TypeScript কোড ট্রান্সপাইল করার জন্য @babel/preset-typescript ব্যবহার করা হয়। এটি TypeScript কোডের টাইপ সম্পর্কিত তথ্যকে উপেক্ষা করে কেবল JavaScript কোডে রূপান্তর করে। তবে, TypeScript এর টাইপ চেকিং করার জন্য আপনাকে TypeScript ট্রান্সপাইলার (tsc) ব্যবহার করতে হবে। Babel শুধুমাত্র কোডের ট্রান্সপাইলেশন এবং কোডের সিনট্যাক্স পরিবর্তন করে। TypeScript এবং Babel এর সম্মিলিত ব্যবহার সঠিকভাবে কোড রূপান্তর এবং টাইপ চেকিং নিশ্চিত করতে সহায়তা করে।