টাইপস্ক্রিপ্ট এবং tsconfig.json

এই লেখায় টাইপস্ক্রিপ্ট এবং tsconfig.json ব্যাখ্যা করা হয়েছে।

টাইপস্ক্রিপ্টের মৌলিক ভূমিকা থেকে শুরু করে আমরা নির্দিষ্ট উদাহরণ দিয়ে দেখাবো, tsconfig.json কীভাবে একটি প্রজেক্টে কাজ করে।

YouTube Video

টাইপস্ক্রিপ্ট এবং tsconfig.json

টাইপস্ক্রিপ্ট হলো 'টাইপসহ জাভাস্ক্রিপ্ট'। তবে, বাস্তব প্রকল্পে টাইপস্ক্রিপ্ট কার্যকরভাবে ব্যবহার করতে হলে tsconfig.json সঠিকভাবে বোঝা এবং ইচ্ছাকৃতভাবে কনফিগার করা অত্যন্ত জরুরি।

আমাদের টাইপস্ক্রিপ্ট কেন দরকার?

প্রথমত, টাইপস্ক্রিপ্ট ব্যবহারের প্রধান কারণ হলো 'প্রোগ্রাম চালানোর আগেই ভুল ধরা সম্ভব'।

1function add(a: number, b: number): number {
2  return a + b;
3}
4
5add(1, "2");

এই কোড জাভাস্ক্রিপ্টে রানটাইম পর্যন্ত কোনো এরর দেখাবে না, কিন্তু টাইপস্ক্রিপ্টে এটি কম্পাইল টাইমে টাইপ এরর দেয়।

এই 'আগেই ভুল ধরা' ডেভেলপমেন্টের দক্ষতা ও মান ব্যাপকভাবে বাড়িয়ে দেয়।

টাইপস্ক্রিপ্ট কীভাবে চালানো হয়?

মূলত, টাইপস্ক্রিপ্ট সরাসরি চালানো যায় না। আপনাকে এটি tsc (TypeScript Compiler) ব্যবহার করে জাভাস্ক্রিপ্টে রূপান্তর করতে হবে।।

1npm install -D typescript
2npx tsc --init

• এই কাজটি করলে, tsconfig.json তৈরি হয়, যা হচ্ছে টাইপস্ক্রিপ্ট প্রজেক্টের আচরণ সংজ্ঞায়িত করার কেন্দ্রীয় ফাইল।

tsconfig.json এর ভূমিকা কী?

tsconfig.json হলো একটি কনফিগারেশন ফাইল যা নির্ধারণ করে 'কোন ফাইল,' 'কী নিয়মে,' এবং 'কীভাবে রূপান্তরিত হবে'।। প্রথমে এটি কিছুটা জটিল মনে হলেও, কয়েকটি সেটিংসই আসলেই গুরুত্বপূর্ণ।

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "strict": true
6  }
7}

• শুধুমাত্র এইসব সেটিংস দিয়েই আধুনিক এবং নিরাপদ টাইপস্ক্রিপ্ট ডেভেলপমেন্ট সম্ভব।

target: আউটপুটে কোন সংস্করণের জাভাস্ক্রিপ্ট হবে

target নির্ধারণ করে আউটপুট হওয়া জাভাস্ক্রিপ্টের স্পেসিফিকেশন স্তর।

1"target": "ES2020"

এর মাধ্যমে টাইপস্ক্রিপ্ট, ES2020 সমতুল্য জাভাস্ক্রিপ্ট আউটপুট করবে। পুরনো এনভায়রনমেন্টের জন্য ES5 নির্বাচন করুন; নতুন পরিবেশের জন্য ES2022 ইত্যাদি ব্যবহার করুন।

যখন ESNext নির্ধারণ করবেন

1"target": "ESNext"

• ESNext নির্ধারণ করলে সর্বশেষ জাভাস্ক্রিপ্ট সিনট্যাক্স যেটা পাওয়া যায়, তা অপরিবর্তিত রেখে আউটপুট দেয়। টাইপস্ক্রিপ্ট সিনট্যাক্স ট্রান্সপাইল করে না; বরং এটি রানটাইম এনভায়রনমেন্ট (যেমন Node.js বা ব্রাউজার) এর হাতে ছেড়ে দেয়।

• তাই, শুধুমাত্র সর্বশেষ Node.js টার্গেট করলে বা আলাদাভাবে Babel বা কোনো বান্ডলার দিয়ে ট্রান্সপাইল করলে ESNext উপযোগী। অন্যদিকে, যদি রানটাইম এনভায়রনমেন্ট সর্বশেষ সিনট্যাক্স সমর্থন না করে, তাহলে রানটাইম এরর হতে পারে, তাই সতর্ক থাকা দরকার।

module: মডিউলের ফরম্যাট নির্ধারণ

module নির্ধারণ করে মডিউলের ফরম্যাট।

1"module": "ESNext"

• ESNext হলো ফ্রন্টএন্ড ও আধুনিক Node.js এনভায়রনমেন্টের জন্য স্ট্যান্ডার্ড।
• শুধুমাত্র যদি CommonJS দরকার হয় তাহলে "CommonJS" নির্বাচন করুন।

strict: টাইপ নিরাপত্তা সর্বাধিক করুন

strict হলো টাইপস্ক্রিপ্টের নিরাপত্তা সর্বোচ্চ করার একটি সুইচ।

1"strict": true

• এটি চালু করলে অস্পষ্ট টাইপ ও সম্ভাব্য বাগ সহজেই ধরা পড়বে।

strict মোড এবং implicit any

strict চালু করলে যেসব ভেরিয়েবলের টাইপ অনুমান করা যায় না, সেগুলো টাইপস্ক্রিপ্ট এরর হিসেবে ধরে।

1function printValue(value) {
2	console.log(value);
3}

• এই value ভেরিয়েবলের ডিক্লারেশনে টাইপ নেই, তাই টাইপস্ক্রিপ্ট টাইপ নির্ধারণ করতে পারে না। ফলে, ইনপ্লিসিটলি any ব্যবহৃত হয়, যা strict মোডে ওয়ার্নিং (বা এরর) দেয়।

1function printValue(value: number) {
2	console.log(value);
3}

• এইভাবে স্পষ্টভাবে টাইপ নির্ধারণ করলে, টাইপস্ক্রিপ্ট বুঝতে পারে 'এই ভেরিয়েবল শুধু সংখ্যা ধারণ করে।'। টাইপস্ক্রিপ্টে টাইপ নির্দিষ্টভাবে নির্ধারণ করা যেতে পারে — এটাই টাইপ বাদ দেওয়া সম্ভব এর চেয়ে বেশি গুরুত্বপূর্ণ।

include/exclude: কোন ফাইল কম্পাইল করা হবে তা নিয়ন্ত্রণ

tsconfig.json-এ কম্পাইলেশনের জন্য কোন ফাইল অন্তর্ভুক্ত এবং কোন ফাইল বাদ দিতে হবে তা নির্ধারণ করা যায়।

1{
2  "include": ["src"],
3  "exclude": ["node_modules"]
4}

• এর মাধ্যমে, শুধু src ফোল্ডারের ফাইলগুলো টাইপস্ক্রিপ্ট দ্বারা পরিচালিত হবে।
• exclude-এ দেয়া node_modules কম্পাইলেশন থেকে বাদ যাবে, এমনকি যদি তা include-এরপথে থেকেও থাকে।

outDir: আউটপুট ডিরেক্টরি নির্ধারণ

outDir নির্ধারণ করুন আপনার কম্পাইল আউটপুট কোথায় রাখতে চান তা জানাতে।

1"outDir": "dist"

• এর মাধ্যমে সব কম্পাইল করা ফাইল dist ফোল্ডারে জমা হবে। বাস্তবে, সোর্স কোড ও বিল্ড আউটপুট আলাদা রাখা স্ট্যান্ডার্ড নিয়ম।

rootDir: সোর্স ডিরেক্টরি নির্ধারণ

rootDir নির্ধারণ করে সোর্স কোডের মূল ডিরেক্টরি কোনটা হবে।

1"rootDir": "src"

• এই সেটিং টাইপস্ক্রিপ্টকে ফাইল আউটপুটের সময় src-এর ভিত্তিতে ডিরেক্টরি কাঠামো ঠিক রাখতে সাহায্য করে। উদাহরণস্বরূপ, src/index.ts আউটপুট হবে dist/index.js হিসেবে।

• rootDir-এ নির্ধারিত ডিরেক্টরির গঠন outDir-এ নকল হবে।

esModuleInterop: CommonJS ও ES Modules এর মধ্যে সংযোগ

পরের বিষয়, esModuleInterop দেখে নিই।

1"esModuleInterop": true

• এটি চালু করলে, আপনি নিরাপদে import সিনট্যাক্স দিয়ে CommonJS মডিউল ব্যবহার করতে পারবেন।

1import fs from "fs";

• Node.js ব্যবহারের সময় এই সেটিং প্রায় অপরিহার্য।

noImplicitAny: ইনপ্লিসিট 'any' টাইপ নিষিদ্ধ

tsconfig.json-এ টাইপ চেকিং আরও শক্তিশালী করাও গুরুত্বপূর্ণ।

1"noImplicitAny": true

• এটির সাহায্যে ইনপ্লিসিট any টাইপ নিষিদ্ধ করা যায়। এতে আপনি যেখানে টাইপ নির্ধারণ করতে ভুল করেছেন, তা সহজেই শনাক্ত করতে পারবেন।

অনাবশ্যক কোড খুঁজে বের করার কনফিগারেশন

অনাবশ্যক কোড চিহ্নিত করার সেটিংসেও মেইনটেনেন্স উন্নত হয়।

1"noUnusedLocals": true,
2"noUnusedParameters": true

• এর সাহায্যে, অপ্রয়োজনীয় ভেরিয়েবল ও আর্গুমেন্ট দ্রুত ওয়ার্নিং দিয়ে চিহ্নিত হয়।

lib: ব্যবহারের জন্য উপলব্ধ বিল্ট-ইন API গুলো নির্ধারণ

lib হলো এমন একটি সেটিং যা টাইপস্ক্রিপ্টে ধরেন, সেগুলো বিদ্যমান থাকবে এমন স্ট্যান্ডার্ড API নির্ধারণ করে।

1"lib": ["ES2020", "DOM"]

• এই সেটিংয়ের মাধ্যমে নিচের টাইপগুলো ব্যবহারযোগ্য হয়:। ES2020-এ Promise, Map, Set-এর মতো আধুনিক ফিচার পাওয়া যায়। DOM-এ document, window, HTMLElement-এর মতো ব্রাউজার API পাওয়া যায়।

ফ্রন্টএন্ডে DOM রাখুন; কেবল Node.js-এর জন্য DOM বাদ দিন যেন অপ্রয়োজনীয় গ্লোবাল টাইপ ঢুকে না যায়।

moduleResolution: মডিউল অনুসন্ধানের নিয়ম

moduleResolution নির্ধারণ করে import-এ উল্লেখিত মডিউল কীভাবে খুঁজে পাওয়া হবে।

1"moduleResolution": "Node"

দুটি প্রধান অপশন হলো:।

• আপনি যদি Node উল্লেখ করেন, তাহলে Node.js-এর মডিউল রেজোলিউশন নিয়ম ব্যবহৃত হয়।
• Classic হচ্ছে পুরনো, টাইপস্ক্রিপ্ট-সpezifik পদ্ধতি, কিন্তু এখন খুব কমই ব্যবহার হয়।

Node.js বা কোন বান্ডলার ব্যবহৃত হলে, Node স্পষ্টভাবে উল্লেখ করাই নিরাপদ।

একটি ন্যূনতম, প্রোডাকশন-প্রস্তুত tsconfig.json

এখন পর্যন্ত আলোচনা অনুযায়ী, একটি ন্যূনতম, প্রোডাকশনের জন্য তৈরি tsconfig.json এইরকম হবে:।

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "module": "ESNext",
 5    "moduleResolution": "Node",
 6    "lib": ["ES2020", "DOM"],
 7    "strict": true,
 8    "rootDir": "src",
 9    "outDir": "dist",
10    "esModuleInterop": true,
11    "noImplicitAny": true,
12    "noUnusedLocals": true,
13    "noUnusedParameters": true
14  },
15  "include": ["src"]
16}

এই কনফিগারেশন ফ্রন্টএন্ড ও Node.js দু'টির জন্যই নিরাপদ ভিত্তি দেয়।

সারসংক্ষেপ: tsconfig.json হলো একটি 'রুলবুক'

tsconfig.json শুধু কনফিগারেশন ফাইল নয়, বরং পুরো প্রজেক্টের উপর কার্যকর 'রুলবুক'। tsconfig.json-এর মাধ্যমে নিচের মতো গুরুত্বপূর্ণ নীতিমালা স্পষ্টভাবে সংজ্ঞায়িত হয়:।

• টাইপ নিরাপত্তার স্তর।
• আপনার টিমের কোডিং নিয়মাবলী।
• ভবিষ্যতে বাগ প্রতিরোধ।

tsconfig.json বুঝলে, আপনি শুধু টাইপস্ক্রিপ্ট লিখতেই পারবেন না, বরং নিরাপদভাবে টাইপস্ক্রিপ্ট ব্যবহারের জন্য আপনার প্রজেক্টও ডিজাইন করতে পারবেন।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video