TypeScript Node.js bilan


ULASHISH

Nima uchun TypeScript-ni Node.js bilan ishlatish kerak?

TypeScript Node.js ishlanmalariga statik yozishni olib keladi, bu esa yaxshi asboblar, yaxshilangan kod sifati va ishlab chiquvchilar tajribasini yaxshilaydi.

Asosiy afzalliklarga quyidagilar kiradi:

  • JavaScript kodi uchun xavfsizlikni kiriting
  • Avtomatik to‘ldirish bilan yaxshi IDE qo‘llab-quvvatlash
  • Rivojlanish jarayonida xatolarni erta aniqlash
  • Yaxshilangan kodni saqlash va hujjatlar
  • Osonroq qayta ishlash

Prerequisites: Yaqinda Node.js LTS (v18+ tavsiya etiladi) va npm ni o‘rnating.

node -v va npm -v bilan tasdiqlang.


TypeScript Node.js loyihasini sozlash

Ushbu bo‘lim TypeScript uchun sozlangan yangi Node.js loyihasini yaratish orqali o‘tadi.

Eslatma: Siz ishlab chiqish jarayonida TypeScript ( .ts ) yozasiz va Node.js ishlab chiqarishda ishlashi uchun uni JavaScript ( .js ) ga kompilyatsiya qilasiz.

1. Yangi loyihani ishga tushiring

Misol

mkdir my-ts-node-app
cd my-ts-node-app
npm init -y
npm install typescript @types/node --save-dev
npx tsc --init

Bular nima qiladi:

  • typescript adds the TypeScript compiler (tsc)
  • @types/node Node.js turi ta’riflarini beradi
  • npx tsc --init tsconfig.json konfiguratsiya faylini yaratadi

2. Manba papkasini yarating

Manba kodini src/ da va kompilyatsiya qilingan chiqishni dist/ da saqlang.

mkdir src
# later add files like: src/server.ts, src/middleware/auth.ts

3. TypeScript-ni sozlang

Yaratilgan tsconfig.json ni tahrirlang:

Misol

{
    "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Option highlights:

  • rootDir / outDir : manbani ( src ) qurilish chiqishidan ( dist ) alohida saqlaydi.
  • strict : eng xavfsiz turdagi tekshirishni yoqadi.
  • esModuleInterop : CommonJS/ES modullari bilan yanada yumshoq o‘zaro ishlash.
  • sourceMap : kompilyatsiya qilingan kodni tuzatish uchun Map’lar yarating.

CommonJS vs ESM: Ushbu qo‘llanma module: "commonjs" dan foydalanadi.

Agar ESM’dan foydalansangiz (package.json ichida type: "module"), module: "nodenext" yoki node16 ni o‘rnating va import/export dan izchil foydalaning.

4. Runtime va Dev Dependencies-ni o‘rnating

HTTP bilan ishlash uchun Express va foydali ishlab chiqish vositalarini o‘rnating:

Misol

npm install express body-parser
npm install --save-dev ts-node nodemon @types/express

Ogohlantirish: ts-node va nodemon dan faqat ishlab chiqish uchun foydalaning.

Ishlab chiqarish uchun tsc bilan kompilyatsiya qiling va JS chiqishida Node-ni ishga tushiring.

Loyiha tuzilishi

Loyihangizni tartibli saqlang:

my-ts-node-app/
  src/
    server.ts
    middleware/
      auth.ts
    entity/
      User.ts
    config/
      database.ts
  dist/
  node_modules/
  package.json
  tsconfig.json


Asosiy TypeScript serveriga misol

Ushbu misolda TypeScript-da yozilgan minimal Express server, jumladan, tiplangan User modeli va bir nechta marshrutlar (route) ko‘rsatilgan.

src/server.ts

import express, { Request, Response, NextFunction } from 'express';
import { json } from 'body-parser';

interface User {
  id: number;
  username: string;
  email: string;
}

// Initialize Express app
const app = express();
const PORT = process.env.PORT || 3000;

// Middleware
app.use(json());

// In-memory database
const users: User[] = [
  { id: 1, username: 'user1', email: 'user1@example.com' },
  { id: 2, username: 'user2', email: 'user2@example.com' }
];

// Routes
app.get('/api/users', (req: Request, res: Response) => {
  res.json(users);
});

app.get('/api/users/:id', (req: Request, res: Response) => {
  const user = users.find(u => u.id === parseInt(req.params.id));
  if (!user) return res.status(404).json({ message: 'User not found' });
  res.json(user);
});

app.post('/api/users', (req: Request, res: Response) => {
  const { username, email } = req.body;
 
  if (!username || !email) {
    return res.status(400).json({ message: 'Username and email are required' });
  }
 
  const newUser: User = {
    id: users.length + 1,
    username,
    email
  };
 
  users.push(newUser);
  res.status(201).json(newUser);
});

// Error handling middleware
app.use((err: Error, req: Request, res: Response, next: NextFunction) => {
  console.error(err.stack);
  res.status(500).json({ message: 'Something went wrong!' });
});

// Start server
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

TypeScript bu yerda nima qo‘shadi:

  • Ekspress ishlov beruvchilar uchun Request , Response va NextFunction kiritildi.
  • Foydalanuvchi ma’lumotlari shaklini kafolatlash uchun User interfeysi.
  • Yozilgan marshrut parametrlari va jismlari bilan xavfsizroq refaktoring va yaxshi avtoto‘ldirish.

Express Middleware bilan TypeScript-dan foydalanish

O‘rta dastur kuchli tarzda yozilishi mumkin.

Shuningdek, so‘rov bo‘yicha autentifikatsiya qilingan foydalanuvchi ma’lumotlarini saqlash uchun deklaratsiyani birlashtirish orqali Express turlarini kengaytirishingiz mumkin.

src/middleware/auth.ts

import { Request, Response, NextFunction } from 'express';

// Extend the Express Request type to include custom properties
declare global {
  namespace Express {
    interface Request {
      user?: { id: number; role: string };
    }
  }
}

export const authenticate = (req: Request, res: Response, next: NextFunction) => {
  const token = req.header('Authorization')?.replace('Bearer ', '');
 
  if (!token) {
    return res.status(401).json({ message: 'No token provided' });
  }
 
  try {
    // In a real app, verify the JWT token here
    const decoded = { id: 1, role: 'admin' }; // Mock decoded token
    req.user = decoded;
    next();
  } catch (error) {
    res.status(401).json({ message: 'Invalid token' });
  }
};

export const authorize = (roles: string[]) => {
  return (req: Request, res: Response, next: NextFunction) => {
    if (!req.user) {
      return res.status(401).json({ message: 'Not authenticated' });
    }
   
    if (!roles.includes(req.user.role)) {
      return res.status(403).json({ message: 'Not authorized' });
    }
   
    next();
  };
};

Marshrutlarda o‘rta dasturdan foydalaning

// src/server.ts
import { authenticate, authorize } from './middleware/auth';

app.get('/api/admin', authenticate, authorize(['admin']), (req, res) => {
  res.json({ message: `Hello admin ${req.user?.id}` });
});

Ma’lumotlar bazasi bilan TypeScript (TypeORM misoli)

Sinflarni jadvallarga solishtirish uchun TypeScript dekoratorlari bilan TypeORM kabi ORM lardan foydalanishingiz mumkin.

Boshlashdan oldin:

  • Paketlarni o‘rnating: npm install typeorm reflect-metadata pg (PostgreSQL uchun pg dan foydalaning).
  • Dekoratorlardan foydalanganda tsconfig.json da yoqing:
    { "compilerOptions": { "experimentalDecorators": true, "emitDecoratorMetadata": true } }
  • Ilova ishga tushganda bir marta reflect-metadata import qiling.

src/entity/User.ts

import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn } from 'typeorm';

@Entity('users')
export class User {
  @PrimaryGeneratedColumn()
  id: number;

  @Column({ unique: true })
  username: string;

  @Column({ unique: true })
  email: string;

  @Column({ select: false })
  password: string;

  @Column({ default: 'user' })
  role: string;

  @CreateDateColumn()
  createdAt: Date;

  @UpdateDateColumn()
  updatedAt: Date;
}

src/config/database.ts

import 'reflect-metadata';
import { DataSource } from 'typeorm';
import { User } from '../entity/User';

export const AppDataSource = new DataSource({
  type: 'postgres',
  host: process.env.DB_HOST || 'localhost',
  port: parseInt(process.env.DB_PORT || '5432'),
  username: process.env.DB_USERNAME || 'postgres',
  password: process.env.DB_PASSWORD || 'postgres',
  database: process.env.DB_NAME || 'mydb',
  synchronize: process.env.NODE_ENV !== 'production',
  logging: false,
  entities: [User],
  migrations: [],
  subscribers: [],
});

Serverni ishga tushirishdan oldin ma’lumotlar manbasini ishga tushiring

// src/server.ts
import { AppDataSource } from './config/database';

AppDataSource.initialize()
  .then(() => {
   app.listen(PORT, () => console.log(`Server running on http://localhost:${PORT}`));
  })
  .catch((err) => {
   console.error('DB init error', err);
   process.exit(1);
  });

Rivojlanish ish jarayoni

1.package.json ga skript qo‘shing

Misol

{
  "scripts": {
    "build": "tsc",
    "start": "node dist/server.js",
    "dev": "nodemon --exec ts-node src/server.ts",
    "watch": "tsc -w",
    "test": "jest --config jest.config.js"
  }
}

Eslatma: test skripti ixtiyoriy va Jest sozlangan deb taxmin qilinadi.

Agar siz Jest-dan foydalanmasangiz, uni o‘tkazib yuborishingiz mumkin.

2. Rivojlanish rejimida ishga tushirish

Misol

npm run dev

3. Ishlab chiqarish uchun qurish

Misol

npm run build
npm start

Manba Map’lari yordamida nosozliklarni tuzatish

tsconfig.json da sourceMap yoqilgan bo‘lsa, siz kompilyatsiya qilingan kodni debug qilishingiz va .ts fayllaringizga qaytishingiz mumkin.

node --enable-source-maps dist/server.js

Maslahat: Ko‘pgina IDElar (jumladan, VS Code) manba Map’lari yoqilganda, to‘xtash nuqtalari bilan TypeScript nosozliklarini tuzatishni qo‘llab-quvvatlaydi.


Eng yaxshi amaliyotlar

  • Funksiya parametrlari va qaytariladigan qiymatlar uchun har doim turlarni aniqlang
  • Obyekt shakllari uchun interfeyslardan foydalaning
  • tsconfig.json da qat’iy rejimni yoqing
  • Ish vaqti turini tekshirish uchun turdagi himoya vositalaridan foydalaning
  • TypeScript-ning foydali turlaridan foydalaning (qisman, tanlash, tashlab ketish va boshqalar).
  • Tur ta’riflaringizni .d.ts fayllarida saqlang
  • Ruxsat etilgan qiymatlar to‘plami uchun enum yoki const tasdiqlaridan foydalaning
  • JSDoc izohlari bilan hujjat kompleks turlari
  • Sirlar va konfiguratsiyalar uchun muhit o‘zgaruvchilariga ustunlik bering; ishga tushirishda ularni tasdiqlang.
  • ts-node / nodemon dan faqat ishlab chiqaruvchida foydalaning; mahsulot uchun kompilyatsiya qilish.
  • Barqaror kod sifati uchun @typescript-eslint bilan ESLint + Prettier-ni ko‘rib chiqing.



W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!