كيفية كتابة REST API باستخدام TypeScript في 30 دقيقة: عمليًا

مقدمة: لماذا TypeScript لواجهات REST API؟

تطوير الويب الحديث لا يمكن تصوره بدون واجهات برمجة تطبيقات واضحة وقابلة للتوسع. TypeScript، كونه إضافة صارمة للأنواع فوق JavaScript، يسمح بإنشاء واجهات REST API موثوقة مع أقل عدد من أخطاء وقت التشغيل. في هذه المقالة، سنقوم عمليًا، خطوة بخطوة، بإنشاء واجهة REST API كاملة باستخدام TypeScript وإطار العمل الشهير Express. العملية بأكملها ستستغرق منك 30 دقيقة كحد أقصى، وستكون النتيجة جاهزة للاستخدام في المشاريع الحقيقية.

سنشرح: تهيئة المشروع، إعداد TypeScript، إنشاء المسارات، العمل مع middleware، معالجة الأخطاء، واختبار نقاط النهاية. جميع أمثلة الكود يمكنك تشغيلها فورًا وتكييفها مع مهامك الخاصة.

الخطوة 1: تهيئة المشروع وتثبيت التبعيات

أولاً، سننشئ دليلاً جديدًا للمشروع ونقوم بتهيئته. افتح الطرفية ونفذ:

mkdir my-ts-apicd my-ts-apinpm init -y

الآن سنقوم بتثبيت الحزم اللازمة:

npm install expressnpm install -D typescript @types/node @types/express ts-node nodemon

سننشئ ملف تكوين TypeScript:

npx tsc --init

قم بتعديل tsconfig.json بإضافة الخيارات التالية:

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "outDir": "./dist",    "rootDir": "./src",    "strict": true,    "esModuleInterop": true,    "skipLibCheck": true  }}

أضف السكريبتات في package.json:

"scripts": {  "build": "tsc",  "start": "node dist/index.js",  "dev": "nodemon --exec ts-node src/index.ts"}

الخطوة 2: إنشاء الهيكل الأساسي وأول نقطة نهاية

قم بإنشاء مجلد src وداخله ملف index.ts. لنبدأ بخادم بسيط يستجيب لطلبات GET:

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

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

// Middleware لتحليل JSONapp.use(express.json());

// المسار الأساسيapp.get('/', (req: Request, res: Response) => {  res.send('REST API على TypeScript يعمل!');});

app.listen(PORT, () => {  console.log(`الخادم يعمل على http://localhost:${PORT}`);});

قم بتشغيل الخادم باستخدام الأمر npm run dev وافتح http://localhost:3000. سترى رسالة ترحيبية.

إنشاء نموذج البيانات

لواجهة API كاملة، نحتاج إلى كيان. لننشئ نموذج مستخدم بسيط:

// src/models/user.tsexport interface User {  id: number;  name: string;  email: string;  age: number;}

export type CreateUserDto = Omit;

الخطوة 3: تنفيذ عمليات CRUD

الآن سننشئ المتحكم والمسارات للعمل مع المستخدمين. قم بإنشاء ملف src/routes/users.ts:

import { Router, Request, Response } from 'express';import { User, CreateUserDto } from '../models/user';

const router = Router();let users: User[] = [  { id: 1, name: 'إيفان', email: 'ivan@example.com', age: 28 },  { id: 2, name: 'ماريا', email: 'maria@example.com', age: 32 }];let nextId = 3;

// GET /users - الحصول على جميع المستخدمينrouter.get('/', (req: Request, res: Response) => {  res.json(users);});

// GET /users/:id - الحصول على مستخدم حسب المعرفrouter.get('/:id', (req: Request, res: Response) => {  const id = parseInt(req.params.id);  const user = users.find(u => u.id === id);  if (!user) {    return res.status(404).json({ message: 'المستخدم غير موجود' });  }  res.json(user);});

// POST /users - إنشاء مستخدم جديدrouter.post('/', (req: Request, res: Response) => {  const { name, email, age }: CreateUserDto = req.body;  if (!name || !email || !age) {    return res.status(400).js