প্রিয় ডেভলপারস, আসসলামু আলাইকুম। আশা করি আপনারা সবাই ভালো আছেন। আজকের ব্লগে কিভাবে TypeScript এর মাধ্যমে Express প্রজেক্ট সেটাপ করতে হয় তা নিয়ে বিস্তারিত আলোচনা করবো এবং কীভাবে প্রজেক্টে এ ESLint ও Prettier Formatter, TypeScript প্রজেক্টে এ সেটাপ করতে হয় তা ধাপে ধাপে বিস্তারিত শেয়ার করবো। আশা করি আপনারা উপকৃত হবেন, তাহলে শুরু করা যাক।
TypeScript সেটাপ -
ধাপ ১ – প্রথমে আপনার Laptop / Computer এর মাধ্যে একটি ফোল্ডার তৈরি করুন এবং তা CMD এর মাধ্যমে ফোল্ডারটি খুলুন। এবং [code .] এই কমান্ড দিয়ে আপনার Code Editor এ ওপেন করুন।
ধাপ ২ – আপনি আপনার কোড ইডিটরের টারমিনাল খুলুন (টারমিনাল শর্টকার্ট এ খুলতে – [ctrl + backtick (`)])। তারপর নিম্নের কমান্ড আপনার টারমিনালে রান করুন। (তবে টারমিনালে এর ক্ষেত্রে ‘git bash’ ব্যবহার করে অনেক এরর থেকে বাঁচা যায়)
npm init --y
ধাপ ৩ – এই ধাপে আমরা আমাদের প্রজেক্টের জন্য express, mongoose, cors, dotenv ইনস্টল করবো। ইনস্টল করার জন্য নিম্নের কমান্ড টারমিনালে রান করুন –
npm i express mongoose cors dotenv
ধাপ ৪ – উপরের কোডটি সঠিকভাবে রান হলে, এখন আমরা আমাদের প্রজেক্টে TypeScript ইনস্টল করবো। TypeScript ইনস্টল করার জন্য নিম্নের যে কোন একটি কমান্ড রান করুন। (তবে TypeScript ডেভ-ডেফিন্সি আকারে ইনস্টল করাই ভালো, কেননা TypeScript ফাইল কম্পাইল হয়ে JavaScript এ রূপান্তর হয়।)
npm install typescript --save-dev
Or
npm i typescript
ধাপ ৫ – TypeScript সঠিকভাবে ইনস্টল হলে, এখন আমরা TypeScript কে আমাদের প্রজেক্ট এর জন্য ইনিশিয়ালাইজড করবো, তার জন্য নিন্মের কমান্ড টারমিনালে রান করুন –
tsc --init
ধাপ ৬ – কোডটি রান করার পর আপনি আপনার ফোল্ডারে
“tsconfig.json” এই নামের নতুন একটি ফাইল দেখতে পাবেন। এখন এই ফাইলটি আমাদের প্রয়োজনমতো কাস্টোমাইজ করতে পারবো। তবে আমরা এই প্রজেক্টের জন্য প্রয়োজন এমন কিছু কাস্টমাইজ করবো – প্রথমে আপনি আপনার প্রজেক্টের রুটে “src” নামে একটি ফোল্ডার খুলুন, তারপর
“tsconfig.json” ফাইলটি খুলে “rootDir” এই নামে সার্চ করুন এবং তা আনকমেন্ট করুন এবং
["rootDir": "./src"] এই লেখাটি লিখুন। তারপর
“tsconfig.json” এ “outDir” লিখে সার্চ দিন এবং তা আনকমেন্ট করে ["outDir": "./dist",] এই লেখে দিয়ে আপডেট করুন।
ধাপ ৭ – তারপর আপনি আপনার ‘src’ ফোল্ডারে app.ts এবং server.ts এ নামে দুইটি ফাইল খুলুন (তবে এই নামে যে খুলতে হবে এমন কোন ধরাবাঁধা নিয়ম নেই, আপনি আপনার ইচ্ছা মতো খুলতে পারেন। কোন সমস্যা নাই।) তবে মনে রাখবেন যে, এখানে app.ts এ আমরা আমাদের প্রজেক্টের মেইন কাজগুলো করবো এবং servr.ts এ আমরা আমাদের প্রজেক্টের সার্ভার রান করার লজিকগুলো লেখবো, এতে করে আমাদের কোডগুলো অর্গানাইজ থাকবে। তবে আপনি চাইলে আপনার মতো প্রজেক্ট অর্গানাইজ করতে পারবেন।
ধাপ ৮ – তারপর আপনি নিন্মের কমান্ড টারমিনালে রান করুন। (নোটঃ সাধারণত আমরা Express প্রজেক্টে এ কোনো প্যকেজ ব্যবহার করার জন্য require করে আনতে হয়। কিন্তু TypeScript এ মডিউলার পদ্ধতি
(import/export) সমর্থন করে, এই সমস্যা সমাধান করার জন্য নিম্নের Expree Types প্যাকেজ ব্যবহার করতে হয়। স্মরণীয় যে, বিস্তারিত জানতে অবশ্যই গুগুল করবেন)
npm i --save-dev @types/express
ধাপ ৯ – সব কিছু ঠিকভাবে সম্পূর্ণ হলে নিম্নের কোডটুকু কপি করে app.ts ফাইলের মধ্যে পেস্ট করে নিন।
import express from "express";
const app = express();
app.get("/", (req, res) => {
res.send("Hello! Notesaid24");
});
export default app;
আপনি আপনার প্রজেক্টের রুটে [.env] নামে একটি ফাইল খুলুন এবং [.env] ফোল্ডারে আপনার Database URL এবং PORT নাম্বার যোগ করুন।
PORT=5000
DB_URL='mongodb://000.0.0.1:000000/typeScriptProject'
তারপর নিম্নের কোডটুকু কপি করে server.ts ফাইলের মধ্যে পেস্ট করে নিন।
import mongoose from "mongoose";
import app from "./app";
import dotenv from "dotenv";
dotenv.config();
async function main() {
try {
await mongoose.connect(process.env.DB_URL as string);
app.listen(process.env.PORT, () => {
console.log(`Notesaid24 app is listening on port ${process.env.PORT}`);
});
} catch (err) {
console.log(err);
}
}
main();
ধাপ ১০ – এখন আপনি আপনার টারমিনালে “tsc” লিখুন এবং কমান্ডটি রান করুন। এই কমান্ডটি সফলভাবে রান হলে আপনি আপনার প্রজেক্টে “dist” নামে একটি ফোল্ডার দেখতে পাবেন এবং ‘dist’ ফোল্ডারের ভিতরে “app.js” এবং “server.js” এই দুইটি ফাইলও দেখতে পাবেন। যদি তা দেখতে পান তাহলে আপনি আপনার প্রজেক্ট এ সফলভাবে TypeScript সেটাপ করতে পেরেছেন।
ধাপ ১১ – TypeScript প্রজেক্ট node দিয়ে রান করার জন্য নিম্নের কমান্ড টারমিনালে রান করুন।
node dist/server.js
তবে প্রজেক্টে কোন কিছু আপডেট করে নোড দিয়ে রান করাতে হলে প্রথমে টারমিনালে “tsc” কমান্ড রান করাতে হব, তারপর “node dist/server.js” রান করে আপডেটেড কোড দেখতে পাবেন। তা সত্যিই কষ্টদায়ক! আর এই সমস্যা সমাধানের জন্য আমাদের আরও একটি প্যাকেজ ইনস্টল করতে হবে, আর তা হলো - ts-node-dev। আপনি আপনার টারমিনালে গিয়ে নিম্নের কোডটুকু রান করুন –
npm i ts-node-dev --save-dev
তারপর package.json ফাইলে নিম্নের script গুলো যোগ করে নিন –
"prod": "node ./dist/server.js",
"dev": "ts-node-dev --respawn --transpile-only src/server.ts",
"build": "tsc",
package.json এ উপরিল্লোখিত script এর সংক্ষিপ্ত বিশ্লেষণ -
"prod": "node
./dist/server.js", এই script টি আমাদের প্রজেক্ট কে Production লেভেলে ব্যবহার করআর জন্য ব্যবহার করতে হয়। script রান করার কমান্ড – [npm run prod]
"dev": "ts-node-dev
--respawn --transpile-only src/server.ts", যখন আমরা আমাদের প্রজেক্ট Development থাকবে তখন এই script ব্যবহার করতে হবে। script রান করার কমান্ড - [npm run
dev]
"build": "tsc",
TypeScript ফাইলে কম্পাইল করার জন্য এই script টি ব্যবহার করতে হয়। script রান করার কমান্ড – [npm run
build]
Script গুলো
package.json এ সফলভাবে যোগ করা হলে, আপনার টারমিনালে গিয়ে ‘npm run dev’ এই কমান্ড রান করুন এবং সব ঠিকভাবে সেটাপ করা হলে, আপনার টারমিনালে ‘Notesaid24
app is listening on port 5000’ এই লেখাটি দেখতে পাবেন। যদি দেখেন তাহলে আমাদের প্রজেক্টে সফলভাবে সেটাপ হয়েছে।
ESLint সেটাপ
এই পর্বে আমরা আমাদের প্রজেক্টে ESLint কিভাবে সেটাপ করতে হয়, তা ধাপে ধাপে বিস্তারিত দেখবো, তাহলে চলুন শুরু করা যাক –
ধাপ ১ – প্রথমে নিন্মের দেওয়া কমান্ডটি আপনারা টারমিনালে রান করুন –
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
ধাপ ২ – কমান্ড সফলভাবে রান করার পর, এখন আমরা ESLint কনফিগার করার জন্য নিম্নের কমান্ডটি টারমিনালে রান করুন।
npx eslint --init
অথবা,
npm init @eslint/config
এই কমান্ড রান করার পর টারমিনালে কিছু প্রশ্ন দেখতে পাবেন এবং আপনি আপনার প্রজেক্ট অনুযায়ী কনফিগার করতে পারবেন। তবে আজকে আমরা আমাদের মতো কনফিগার করে নিবো –
❓ How would you like to use ESLint?
✔ To check syntax and find problems
❓ What type of modules does your project use?
✔ JavaScript modules (import/export)
❓ Which framework does your project use?
✔ এখানে আপনার প্রজেক্টের Framework অনুযায়ি “React, Vue.js” নির্বাচন করতে পারেন। অথবা যদি কোন Framework না হয় তাহলে “None of
these” ব্যবহার করতে পারেন। তবে আমাদের এই প্রজেক্ট এ আমরা “None of these” ব্যবহার করবো।
❓ Does your project use TypeScript?
✔ যদি আপনি আপনার প্রজেক্টে TypeScript ব্যবহার করেন তাহলে “yes” আর না করলে “no” নির্বাচন করবেন। অপশন সুইচ করার জন্য কি-বোর্ডের left-arrow ও right-arrow ব্যবহার করতে পারেন।
❓ Where does your code run?
✔ এই অপশনে আমরা “Browser” ব্যবহার না করে “Node” ব্যবহার করবো।
❓ What format do you want your config
file to be in?
✔ এই অপশনে আপনি আপনার কনফিগার ফাইল কি দিয়ে বিন্যাস করতে চান, আপনি আপনার প্রজেক্ট অনুযায়ি সেটাপ (JavaScript, YAML এবং
JSON) করে নিবেন। তবে এই প্রজেক্টে আমরা “JSON” কনফিগ ব্যবহার করবো।
❓ Would you like to install them now?
✔ Yes
❓ Which package manager do you want to
use?
✔ এখানে আপনি আপনার Package
Manager অনুযায়ি “npm, yarn এবং pnpm” নির্বাচন করুন এবং এন্টার কি চাপুন। আমরা এখানে ‘npm’ প্যাকেজ ম্যানেজার ব্যবহার করবো।
কিছুক্ষণের মধ্যে আপনার মেইন ফোল্ডারে “.eslintrc.json”
নামে একটি নতুন ফাইল দেখতে পাবেন। এই ফাইলটি খুলুন এবং নিম্নের কোডগুলো ‘rules’ ব্লকে গিয়ে যোগ করুন। (তবে আপনি চাইলে আপনার প্রয়োজন অনুসারে rules যোগ করতে পারবেন। )
"no-unused-vars": "error",
"no-unused-expressions": "error",
"prefer-const":"error",
"no-undef":"error",
"no-console": "warn"
এই rules গুলোর পাশাপাশি, আরও একটি script যোগ করে নিতে পারেন, তা নিম্নে দেওয়া হলো –
"globals": {
"process":"readonly"
}
“.eslintrc.json” এর সম্পূর্ণ Script এখানে দেখুন
"rules": {
"no-unused-vars": "error",
"no-unused-expressions": "error",
"prefer-const":"error",
"no-undef":"error",
"no-console": "warn"
},
"globals": {
"process":"readonly"
}
তবে আপনি চাইলে আপনার প্রজেক্টের যে সকল ফোল্ডার অথবা ফাইল ESLint এর প্রয়োজন নাই, তা আপনি ব্লক করতে পারেন। তার জন্য আপনার প্রজেক্টের রুটে “.eslintignore” নামে একটি ফাইল খুলুন এবং এই ফাইলের মধ্যে ‘node_moduels এবং dist” দিয়ে দিন।
ধাপ ৩ – এখন package.json ফাইলে ESLint কে কমান্ড লাইনে রান করার জন্য নিম্নের দুইটি কোড package.json এর scripts এ যোগ করে নিন।
"lint": "eslint src --ignore-path .eslintignore --ext .ts",
"lint-fix":"npx eslint src --fix"
Script গুলো রান করুন - npm run lint এবং
npm run lint-fix
তাহলে সফলভাবে আমরা আমাদের প্রজেক্টে এ ESLint সেটাপ করলাম, তবে ESLint সেটাপ করতে যদ কোন সমস্যার সম্মুখীন হন, তাহলে পুনরায় চেষ্টা করুন। যদি তারপরও না হয় কমেন্ট বক্সে জানিয়ে দিন।
Prettier Formatter সেটাপ
এই পর্বে আমরা আমাদের প্রজেক্টে Prettier
Formatter কিভাবে সেটাপ করতে হয়, তা ধাপে ধাপে বিস্তারিত দেখবো, তাহলে চলুন শুরু করা যাক –
ধাপ ১ – প্রথমে টারমিনালে গিয়ে নিম্নের কমান্ড রান করুন।
npm install --save-dev prettier
ধাপ ২ – আপনার প্রজেক্টের রূটে “.prettierrc.json”
নামে একটি ফাইল খুলুন এবং ফাইলের মধ্যে নিম্নের কোডটুকু কপি করে পেস্ট করি দিন –
{
"semi": false,
"singleQuote": true
}
আপনি এখান https://prettier.io/docs/en/options.html
থেকে Prettier Formatter এর রুলস সম্পর্কে বিস্তারিত জেনে নিতে পারেন।
ধাপ ৩ - এখন package.json ফাইলে Prettier Formatter কে কমান্ড লাইনে রান করার জন্য নিম্নের দুইটি কোড package.json এর scripts এ যোগ করে নিন।
"prettier": "prettier --ignore-path .gitignore --write \"./src/**/*.+(js|ts|json)\"",
"prettier-fix": "npx prettier --write src"
Prettier Formatter এর Script গুলো রান করুন - npm run
prettier এবং npm run prettier-fix
যদি আপনার কোড এডিটরে Prettier Extension পূর্বে থেকে ইনস্টল করা থাকে তাহলে নিম্নের কোড গুলো VS Code এর
“settings.json” এর মধ্যে যোগ করে নিন। আর যদি Prettier Extension ইনস্টল করা না থাকে তাহলে ইনস্টল করে কোডগুলো যোগ করে নিন।
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
ESLint এবং
Prettier রুলস এর ঝামেলার অবসান।
কখনো কখনো ESLint এবং Prettier রুলস কমান্ড রানের সময় Overlap হয়ে যেতে পারে, যদিও এটা তেমন কোন সমস্যা না। তবে ESLint এবং Prettier এর রুলস সমস্যা থেকে বাঁচার জন্য নিম্নের কমান্ডটি টারমিনালে রান করুন।
npm install --save-dev eslint-config-prettier
কমান্ড সঠিকভাবে রান করার পর, “.eslintrc” ফাইলে গিয়ে নিম্নের কোডটুকু পেষ্ট করে দিন।
"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
এক নজরে package.json, .eslintrc.json এবং
prettierrc.json ফাইলের নমুনা –
package.json ফাইলের নমুনা –
{
"name": "typescript-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start:prod": "node ./dist/server.js",
"start:dev": "ts-node-dev --respawn --transpile-only src/server.ts",
"build": "tsc",
"lint": "eslint src --ignore-path .eslintignore --ext .ts",
"lint:fix": "npx eslint src --fix",
"prettier": "prettier --ignore-path .gitignore --write \"./src/**/*.+(js|ts|json)\"",
"prettier:fix": "npx prettier --write src",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"dotenv": "^16.3.1",
"express": "^4.18.2",
"mongoose": "^8.0.1"
},
"devDependencies": {
"@types/express": "^4.17.21",
"@typescript-eslint/eslint-plugin": "^6.11.0",
"@typescript-eslint/parser": "^6.11.0",
"eslint": "^8.54.0",
"eslint-config-prettier": "^9.0.0",
"prettier": "^3.1.0",
"ts-node-dev": "^2.0.0",
"typescript": "^5.2.2"
}
}
.eslintrc.json ফাইলের নমুনা –
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"@typescript-eslint"
],
"rules": {
"no-unused-vars": "error",
"no-unused-expressions": "error",
"prefer-const": "error",
"no-console": "warn",
"no-undef": "error"
},
"globals": {
"process": "readonly"
}
}
prettierrc.json ফাইলের নমুনা –
{
"semi": false,
"singleQuote": true
}
আশা করি প্রজেক্টে TypeScript, ESLint এবং Prettier সফলভাবে সেটাপ করে নিয়েছেন। এখন প্রজেক্ট এর ফাইল সেটাপ সম্পূর্ণভাবে প্রস্তুত। যদি প্রজেক্ট সেটাপ করতে কোন সমস্যার সম্মুখীন হোন তাহলে অবশ্যই কমেন্ট বক্সে জানিয়ে দিবেন, সমাধান দেওয়ার চেষ্টা করবো ইনশাআল্লাহ্। লেখায় কোন রকম ভুল-ত্রুটি থাকলে জানাবেন এবং অবশ্যই শেয়ার করবেন।
