@babel/preset-typescript:

BabelJS একটি ট্রান্সপাইলার যা ES6+ (এবং তার পরবর্তী সংস্করণ) কোডকে পুরনো JavaScript সংস্করণে রূপান্তরিত করে। @babel/preset-typescript হল একটি Babel preset যা TypeScript কোডকে সাধারণ JavaScript কোডে রূপান্তরিত করে। এটি TypeScript এর টাইপ চেকিং বা টাইপ সিস্টেমকে প্রক্রিয়া করে না, তবে TypeScript কোডকে JavaScript কোডে রূপান্তরিত করতে সহায়তা করে।

@babel/preset-typescript কী?

@babel/preset-typescript একটি Babel preset যা TypeScript কোডের স্ট্যাটিক টাইপ চেকিং কে বাদ দিয়ে, কেবলমাত্র TypeScript সিনট্যাক্সকে JavaScript সিনট্যাক্সে রূপান্তরিত করে। এটি TypeScript এর ts বা tsx এক্সটেনশন ফাইলগুলোকে .js বা .jsx ফাইলে ট্রান্সপাইল করে।

বৈশিষ্ট্য:

• TypeScript কোড ট্রান্সপাইল করা: TypeScript কোড (যেমন .ts এবং .tsx ফাইল) কে সাধারণ JavaScript কোডে রূপান্তরিত করে।
• টাইপ চেকিং ছাড়া ট্রান্সপাইলেশন: এটি শুধুমাত্র সিনট্যাক্স পরিবর্তন করে, টাইপ চেকিং বা টাইপ ত্রুটি যাচাই করে না।
• ব্রাউজার এবং Node.js এর জন্য উপযোগী: এটি JavaScript কোডে রূপান্তরিত হওয়ায়, উভয়ই ব্রাউজার এবং Node.js পরিবেশে কাজ করতে পারে।

ইন্সটলেশন

@babel/preset-typescript ব্যবহার করার জন্য আপনাকে প্রথমে এটি ইনস্টল করতে হবে।

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

কনফিগারেশন

Babel এর কনফিগারেশন ফাইল (যেমন .babelrc অথবা babel.config.js) এ @babel/preset-typescript যুক্ত করতে হবে।

.babelrc বা babel.config.json:

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

babel.config.js:

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-typescript'
  ]
};

প্রকল্পে TypeScript এবং Babel ব্যবহার করা

যদি আপনি TypeScript কোড লিখতে চান এবং এটি Babel দ্বারা ট্রান্সপাইল করতে চান, তাহলে আপনাকে কিছু অতিরিক্ত কনফিগারেশন এবং ফাইল ব্যবস্থাপনা করতে হবে।

1. TypeScript কনফিগারেশন: TypeScript প্রকল্পের জন্য tsconfig.json ফাইল থাকতে হবে, যা TypeScript এর কনফিগারেশন সেট করে।

   উদাহরণ:

   {
     "compilerOptions": {
       "target": "ES6",          // রূপান্তরিত কোডের টার্গেট ES6
       "module": "ESNext",       // মডিউল সিস্টেম হিসেবে ES মডিউল
       "strict": true            // স্ট্রিক টাইপ চেকিং
     },
     "include": ["src/**/*"]
   }
   

2. Babel কনফিগারেশন: আপনি Babel এর মাধ্যমে TypeScript কোডটিকে JavaScript এ রূপান্তরিত করতে পারবেন, তবে মনে রাখতে হবে, Babel শুধুমাত্র টাইপ চেকিং বাদ দিয়ে কোড ট্রান্সপাইল করে।

টাইপস্ক্রিপ্টের বৈশিষ্ট্য সমর্থন

@babel/preset-typescript মূলত TypeScript কোডের টাইপ সিস্টেম এবং টাইপ চেকিং এর বাইরে কাজ করে, তবে TypeScript এর বিস্তারিত সিনট্যাক্স যেমন ক্লাস ডেকোরেটর, টাইপ অ্যানোটেশন, ইন্টারফেস ইত্যাদি সমর্থন করে।

যেমন:

• Typescript ফিচারসমূহ:
  • ক্লাস ডেকোরেটর (@decorator)
  • টাইপ অ্যানোটেশন (: string, : number)
  • ইন্টারফেস (interface)

@babel/preset-typescript এর মাধ্যমে TypeScript কোডকে সঠিকভাবে JavaScript এ রূপান্তরিত করা যায়।

@babel/preset-typescript এর সীমাবদ্ধতা

• টাইপ চেকিং বা টাইপ ডিফিনিশন চেক করা হয় না: @babel/preset-typescript কেবলমাত্র সিনট্যাক্স ট্রান্সপাইল করে, টাইপ চেকিং করে না। অর্থাৎ, TypeScript ফাইলের টাইপ ভুল থাকলে সেগুলো রূপান্তরিত হবে, কিন্তু ভুল টাইপ সম্পর্কে কোন সতর্কতা বা ত্রুটি দেখাবে না।

  টাইপ চেকিং এর জন্য TypeScript এর নিজস্ব কম্পাইলার (tsc) ব্যবহার করা উচিত।

• অ্যাক্সেসযোগ্য ডিফিনিশন ফাইল (d.ts): @babel/preset-typescript এর মাধ্যমে TypeScript এর *.d.ts ফাইলগুলো রূপান্তরিত হয় না। যদি আপনার প্রকল্পে টাইপ ডিফিনিশন ফাইল থাকে, সেগুলো আপনাকে অন্যভাবে হ্যান্ডেল করতে হবে।

উদাহরণ

ধরা যাক, আপনি একটি TypeScript ফাইল লিখেছেন:

greet.ts

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

export { greet };

এখন, আপনি এটি Babel এর মাধ্যমে JavaScript এ রূপান্তরিত করতে চাইলে, @babel/preset-typescript ব্যবহার করবেন।

1. প্রথমে @babel/preset-typescript ইনস্টল করুন:

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

2. তারপরে .babelrc ফাইলে এই preset যোগ করুন:

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

3. এরপর, greet.ts ফাইলটি ট্রান্সপাইল করে greet.js ফাইলে রূপান্তরিত হবে।

greet.js (JavaScript Output)

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

export { greet };

এখানে, TypeScript টাইপগুলো (যেমন string) মুছে যাবে এবং সাধারণ JavaScript কোডে পরিণত হবে।

সারাংশ

• @babel/preset-typescript TypeScript কোডকে JavaScript এ রূপান্তরিত করে।
• এটি টাইপ চেকিং বা টাইপ সিস্টেমের কোনো যাচাই করে না, শুধুমাত্র সিনট্যাক্স পরিবর্তন করে।
• TypeScript ফিচার যেমন টাইপ অ্যানোটেশন এবং ক্লাস ডেকোরেটর সমর্থন করে, তবে টাইপ চেকিং জন্য tsc কম্পাইলার ব্যবহার করতে হবে।

@babel/preset-typescript একটি গুরুত্বপূর্ণ টুল যা TypeScript কোডকে JavaScript এ ট্রান্সপাইল করতে সাহায্য করে, তবে টাইপ চেকিং বা উন্নত TypeScript ফিচারের জন্য আপনাকে অন্য টুলস ব্যবহার করতে হবে।

BabelJS সাধারণত JavaScript কোড ট্রান্সপাইল করার জন্য ব্যবহৃত হয়, কিন্তু যখন TypeScript এবং React কোড ব্যবহৃত হয়, তখন BabelJS এর কিছু বিশেষ সেটিংস এবং প্লাগিনের সাহায্যে এই কোডগুলিকে ট্রান্সপাইল করা হয়। এর মধ্যে একটি গুরুত্বপূর্ণ preset হল @babel/preset-typescript, যা TypeScript কোডকে JavaScript এ রূপান্তর করতে সাহায্য করে।

এছাড়া, React কোডে JSX সিনট্যাক্স ব্যবহৃত হয়, এবং JSX কে সাধারণ JavaScript এ রূপান্তর করার জন্য @babel/preset-react ব্যবহার করা হয়।

১. প্রথমে প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করা

React এবং TypeScript কোডকে সঠিকভাবে ট্রান্সপাইল করতে BabelJS ব্যবহার করার জন্য প্রথমে কিছু নির্দিষ্ট প্যাকেজ ইনস্টল করতে হবে।

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react @babel/preset-typescript

এছাড়া, আপনি যদি Webpack ব্যবহার করেন, তাহলে babel-loader ইনস্টল করতে হবে।

npm install --save-dev babel-loader

২. Babel কনফিগারেশন তৈরি করা

TypeScript এবং React কোড ট্রান্সপাইল করতে Babel কনফিগারেশন ফাইলে @babel/preset-typescript এবং @babel/preset-react যোগ করতে হবে।

babel.config.js কনফিগারেশন ফাইল উদাহরণ:

module.exports = {
  presets: [
    '@babel/preset-env',          // ES6/ES7 ফিচার সমর্থন করার জন্য
    '@babel/preset-react',        // JSX ট্রান্সপাইল করতে
    '@babel/preset-typescript'    // TypeScript ট্রান্সপাইল করতে
  ]
};

এখানে:

• @babel/preset-env: ES6 বা পরবর্তী সংস্করণের JavaScript কোডকে পুরনো সংস্করণে (যেমন ES5) রূপান্তরিত করতে ব্যবহৃত হয়।
• @babel/preset-react: JSX কোড (React কোড) কে সাধারণ JavaScript এ রূপান্তরিত করতে ব্যবহৃত হয়।
• @babel/preset-typescript: TypeScript কোডকে JavaScript কোডে রূপান্তরিত করতে ব্যবহৃত হয়।

৩. TypeScript কোডের উদাহরণ

ধরা যাক, আপনি একটি TypeScript ফাইল ব্যবহার করছেন যেটিতে React JSX কোড রয়েছে।

App.tsx

import React from 'react';

interface Props {
  name: string;
}

const App: React.FC<Props> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default App;

এটি একটি React + TypeScript কোড, যেখানে TypeScript টাইপিং এবং JSX ব্যবহৃত হয়েছে।

৪. Babel দ্বারা কোড ট্রান্সপাইল করা

আপনি Babel CLI ব্যবহার করে কোডটিকে ট্রান্সপাইল করতে পারেন। এখানে একটি সাধারণ কমান্ড রয়েছে যা আপনার TypeScript এবং React কোডকে JavaScript এ রূপান্তর করবে:

npx babel src --out-dir dist

এখানে:

• src: আপনার সোর্স ফাইলের ডিরেক্টরি।
• dist: ট্রান্সপাইলড JavaScript ফাইল সেভ করার ডিরেক্টরি।

৫. Webpack ব্যবহার করে Babel Configuration

যদি আপনি Webpack ব্যবহার করে ট্রান্সপাইলিং করতে চান, তবে babel-loader সেটআপ করতে হবে। এখানে একটি সাধারণ Webpack কনফিগারেশন দেওয়া হলো:

webpack.config.js

module.exports = {
  entry: './src/index.tsx',  // আপনার মূল ইনপুট ফাইল
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,  // JS, JSX, TS, এবং TSX ফাইলগুলোকে ট্রান্সপাইল করবে
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
};

এখানে:

• babel-loader ব্যবহার করে আপনার JS, JSX, TS, এবং TSX ফাইলগুলো ট্রান্সপাইল করা হবে।
• resolve.extensions দিয়ে আপনি ফাইল এক্সটেনশন নির্ধারণ করতে পারেন, যাতে Webpack ফাইলগুলো সঠিকভাবে লোড করতে পারে।

৬. React কোডের JSX ট্রান্সপাইলিং

React কোডে JSX সিনট্যাক্স ব্যবহৃত হয়, যেটি Babel এর মাধ্যমে ট্রান্সপাইল করা হয়। @babel/preset-react স্বয়ংক্রিয়ভাবে JSX সিনট্যাক্সকে React.createElement() কলগুলিতে রূপান্তরিত করবে।

JSX উদাহরণ:

const element = <h1>Hello, World!</h1>;

Babel এই JSX কোডটিকে নিম্নরূপে ট্রান্সপাইল করবে:

const element = React.createElement('h1', null, 'Hello, World!');

৭. কোড রান এবং আউটপুট

এখন আপনার কোডটি ট্রান্সপাইল হয়ে যাবে এবং আপনি dist ফোল্ডারে JavaScript আউটপুট পাবেন। আপনি যেকোনো JavaScript পরিবেশে এই কোডটি ব্যবহার করতে পারবেন (যেমন Node.js, ব্রাউজার ইত্যাদি)।

সারাংশ

React এবং TypeScript কোড ট্রান্সপাইল করতে BabelJS ব্যবহার করতে হলে, আপনি @babel/preset-typescript এবং @babel/preset-react প্রিসেটগুলো ব্যবহার করবেন। @babel/preset-typescript TypeScript কোডকে JavaScript এ রূপান্তরিত করবে এবং @babel/preset-react JSX সিনট্যাক্সকে সঠিক JavaScript কোডে রূপান্তর করবে। এই সেটআপের মাধ্যমে আপনি React + TypeScript কোড সহজেই JavaScript পরিবেশে চালাতে পারবেন।