الإقليم ١ — JS + TS من عيون مبرمج C

النبذة

كل سطرٍ ستكتبه في الـ backend والـ frontend بهذه اللغة. لا يمكن أن تدير مشروعاً أنت أعمى عن لغته. والخبر السارّ: أنت لا تبدأ من الصفر — تبدأ من C، ومعظمُ JS يُفهم أسرع وأعمق حين تراه كنقيضٍ مدروسٍ لـ C: حيثما وضع C قراراً، وضعت JS عكسه، ولكلٍّ سبب. سنركّب اللغة من هذا التباين، ثم نضع TypeScript فوقها — لا كنظرية أنواعٍ مجرّدة (تلك في منهجك القديم)، بل كأداةٍ تجعل تدفّق البيانات في مشروعك مكتوبَ-النوع من طرفٍ لطرف.

اللغز المستفزّ

js
function add(a, b) { return a + b; }

add(2, 3)          // ?
add("2", "3")      // ?
add(2, "3")        // ?
add([], {})        // ?
add(true, 1)       // ?

ليش: لماذا JS هكذا؟

JS وُلدت في عشرة أيام سنة ١٩٩٥ لتُحرّك صفحاتٍ في متصفّح، تحت قيدين قاهرين:

• ممنوعٌ أن تُعطّل الصفحة. لو رمت اللغةُ خطأً عند كل خلطِ أنواع، لتحطّمت نصف صفحات الويب على يد هواة. فاختارت التساهل (coercion): "أتدبّر أمري وأكمل" بدل "أتوقّف". ساهَمَ ذلك في انتشارها وفي كوابيسها معاً.
• يكتبها غير المبرمجين. فلا تصريحَ أنواعٍ، ولا خطوةَ ترجمة، ولا إدارةَ ذاكرة. اكتب وشغّل.

هذه القرارات وُلِّدت منها كل خصائص اللغة التي ستراها. لا تحفظها — اشتقّها من هذين القيدين كلّما تعجّبت.

typeof هو قراءةُ ذلك الوسم:

js
typeof 42          // "number"
typeof "hi"        // "string"
typeof true        // "boolean"
typeof undefined   // "undefined"
typeof null        // "object"   ← خطأٌ تاريخيٌّ مشهور، لا تثق به (سنرجع له)
typeof {}          // "object"
typeof []          // "object"   ← المصفوفة كائن!
typeof function(){}// "function"

كيف: نموذج القيم (القاع الذي يُبنى عليه كل شيء)

القيم الأوّلية مقابل الكائنات — وهذا مؤشّراتٌ تعرفها

JS فيها سبعُ قيمٍ أوّلية: number (لا int/float — كلّها 64-bit float واحد!)، string، boolean، undefined، null، bigint، symbol. وكل ما عداها كائن (objects)، والمصفوفاتُ والدوال كائناتٌ خاصّة.

الفرق الذي يهمّك عملياً، وهو لغةٌ تتكلّمها أصلاً:

js
let a = 5;
let b = a;        // نُسخت القيمة (كأنها int b = a)
b = 9;
// a == 5  ← لم تتأثّر. الأوّليات تُنسخ بالقيمة.

let o = { n: 5 };
let p = o;        // نُسخ المرجع فقط (كأنها struct *p = o)
p.n = 9;
// o.n == 9  ← تأثّرت! كلاهما يشير لنفس الكائن في الـ heap.

الترجمة لـ C: الأوّليات تتصرّف كقيمٍ على الـ stack تُنسخ بالإسناد. الكائنات تتصرّف كأنها دائماً خلف مؤشّر: تمرّر دالةً كائناً = تمرّر مؤشّراً؛ تعديلُ الحقل يُرى عند الجميع. الفرق الوحيد عن C: لا malloc/free. الذاكرة يديرها garbage collector يحرّر ما لا مرجعَ له. لا تملك العنوان، ولا تحرّره يدوياً. (ثمنه: لا تحكّم دقيق بالعمر؛ مقابل: لا تسريباتٍ ولا use-after-free. مقايضةٌ واعية.)

undefined مقابل null — فراغان لا واحد

C فيه NULL واحد. JS فيه اثنان، والتمييز عمليّ:

• undefined = "لم يُسنَد بعد" (متغيّرٌ بلا قيمة، حقلٌ غير موجود، دالةٌ بلا return). الغيابُ غيرُ المقصود.
• null = "موجودٌ، وقيمتُه عمداً: لا شيء". الغيابُ المقصود الذي تكتبه بيدك.

ستلتقيهما طوال الوقت: حقلٌ اختياريّ في طلبٍ يأتي undefined؛ عمودٌ في قاعدة البيانات بلا قيمةٍ يأتي null. (وفي إقليم TypeScript القديم رأيتَ كيف يقرّر علمُ strict ضمَّهما للأنواع — مرجعُك للغوص.)

الكائنات ليست structs

js
const user = { username: "yazeed", age: 22 };
user.role = "admin";      // أضفتَ حقلاً وقت التشغيل!
delete user.age;          // وحذفتَ آخر!
user["username"];         // وصولٌ بالاسم كنصّ (لأنه قاموسٌ فعلاً)

الكائن قاموسٌ ديناميكيّ (key→value)، لا بنيةٌ ذاتُ تخطيطٍ ثابتٍ كـ struct. لا إزاحاتٌ محسوبةٌ وقت الترجمة؛ بحثٌ بالاسم وقت التشغيل. هذا يعطي مرونةً هائلة (وهو سبب كون JSON طبيعياً جداً في JS — كائنٌ = JSON تقريباً)، وثمنُه أنك بلا أي ضمانٍ أن user.passwrod (بخطأٍ مطبعيّ) خطأ — يرجع undefined بهدوء. هنا يدخل TypeScript ليعيد لك الضمان الذي خسرته.

كيف: الدوال قيمٌ — والإغلاق (closure) هو الجديد الكبير

في C تعرف function pointers: الدالة عنوانٌ تمرّره. JS تأخذها أبعد: الدالة قيمةٌ كاملة تُسنَد وتُمرَّر وتُرجَع.

js
const greet = function (name) { return "hi " + name; };  // دالةٌ في متغيّر
function apply(fn, x) { return fn(x); }                  // دالةٌ تأخذ دالة
apply(greet, "yazeed");                                  // "hi yazeed"

لكن الفرق الجوهريّ عن function pointer في C هو الإغلاق: الدالة في JS تحمل معها البيئة التي وُلدت فيها — تظلّ ترى متغيّرات نطاقها الخارجيّ حتى بعد أن ينتهي ذلك النطاق:

js
function makeCounter() {
  let count = 0;                 // متغيّرٌ محليّ
  return function () {           // دالةٌ تُرجَع
    count = count + 1;
    return count;
  };
}

const next = makeCounter();
next();  // 1
next();  // 2   ← من أين بقي count حياً؟ makeCounter انتهت!

اللغز لمبرمج C: في C، count متغيّرٌ على الـ stack لـ makeCounter؛ حين تعود الدالةُ يُطوى إطارُها ويصير count قمامة. فكيف يبقى حياً هنا ويتذكّر قيمته بين النداءات؟

الجواب: لأن الدالة الداخلية ما زالت تشير إليه، لا يُطوى count مع الـ stack — يُرفَع إلى الـ heap ويُبقيه الـ GC حياً ما دامت الدالةُ المُرجَعة حيّة. الإغلاق = "function pointer + لقطةٌ حيّةٌ من بيئته على الـ heap". هذه ليست تفصيلةً أكاديمية: الإغلاقُ هو كيف تعمل الـ callbacks في الإقليم ٢ (دالةٌ تُنفَّذ لاحقاً وما زالت تتذكّر سياقها)، وكيف تعمل الـ hooks في React بالإقليم ٨ (الحالة "تبقى" بين عمليات الرسم). من يفهم الإغلاق من جذره، يقرأ نصف الستاك بلا عجب.

كيف: التساهل والمساواة — مصدر اللغز الأول وحلّه

js
2 + 3        // 5     (رقم + رقم)
"2" + "3"    // "23"  (نصّ + نصّ = لصق)
2 + "3"      // "23"  (الرقم يُحوَّل لنصّ ليُلصق)
true + 1     // 2     (true يُحوَّل 1)
[] + {}      // "[object Object]"  (كلاهما يُحوَّل لنصّ)

كيف: الوحدات (modules) — كيف يُقسَّم الكود

C يجمّع بـ #include: لصقٌ نصّيٌّ لمحتوى الترويسة في ملفّك (مع حُرّاس التضمين لمنع التكرار). JS عندها وحداتٌ حقيقية: لكل ملفٍّ نطاقُه الخاصّ، ويصرّح صراحةً بما يُصدّر وما يستورد — لا تلوّثَ فضاءِ الأسماء، ولا لصقَ نصّيّ. لهجتان:

js
// ESM (الحديث، ما يستعمله مشروعك) — import/export
export function createUser() { /* ... */ }      // user.service.ts
export default router;                          // تصديرٌ افتراضيّ واحد
import express from "express";                   // استيراد الافتراضيّ
import { createUser } from "./user.controller";  // استيرادٌ مُسمّى

// CommonJS (الأقدم، أصل Node) — require/module.exports
const express = require("express");
module.exports = router;

ليش تهمّك اللهجتان؟ لأنك سترى الاثنتين في الستاك وأدواته، وأخطاء "Cannot use import statement outside a module" أو "require is not defined" كلّها صراعُ لهجاتٍ بينهما. مشروعك يكتب ESM (تراه في import ... from في كل ملفّ). تذكّر: ./user.controller مسارٌ نسبيّ لملفّك (وحدةٌ من تأليفك)؛ express بلا ./ = حزمةٌ من node_modules (الإقليم ٢ يفصّل من أين تأتي).

كيف: بدائيات الـ async (سريعاً الآن، آليتها في الإقليم ٢)

سترى ثلاثةَ أشكالٍ لـ"شيءٍ يكتمل لاحقاً". اعرف شكلها الآن فقط؛ لماذا تعمل هكذا هو لبّ الإقليم القادم:

js
// 1) callback: مرّر دالةً تُنادى عند الاكتمال (إغلاق!)
readThing((err, data) => { /* ... */ });

// 2) Promise: قيمةٌ "ستتوفّر لاحقاً"، تسلسلها بـ .then
fetchThing().then(data => { /* ... */ }).catch(err => { /* ... */ });

// 3) async/await: سكّرٌ نحويٌّ يجعل (2) تُقرأ كأنها متزامنة
async function go() {
  try { const data = await fetchThing(); }   // "انتظر" بلا حجبِ الخيط (!)
  catch (err) { /* ... */ }
}

السطر await fetchThing() يبدو كأنه يحجب كـ read() في C — وهو لا يحجب الخيط. كيف؟ هذا التناقض هو الإقليم ٢ بأكمله. اتركه بذرةً.

ليش: لماذا نضيف أنواعاً للغةٍ رفضتها عمداً؟

رأيتَ المشكلة بعينك: JS لا تحرسك. النوعُ على القيمة وقت التشغيل فقط، فلا تكتشف add([], {}) ولا user.passwrod إلا بتشغيل الكود — وغالباً في الإنتاج، أمام المستخدم. كلّما كبر المشروع، صار هذا قاتلاً: لا تجرؤ على تغيير شيءٍ خوفاً مما سينكسر صامتاً في الطرف الآخر من ألف ملفّ.

TypeScript يعيد حارسَ C الذي خسرته — لكن في زمنٍ مختلف. حارسُ C وقتَ الترجمة. حارس JS... لا يوجد. حارس TS: طبقةُ تحقّقٍ وقتَ الكتابة/الترجمة تفحص أن القيم تطابق العقود قبل أن تشغّل، ثم تختفي تماماً وتُشغَّل JS عاديّة.

كيف يعمل TS مع Node عملياً (يفكّ ألغاز مشروعك)

لا يوجد "TS وقت تشغيل". هناك:

• tsc (المترجم): يفحص الأنواع، ثم يُخرِج JS عادية في dist/. مشروعك يربطه بـ npm run build (وما يشتغل بعدُ لأنه يحتاج tsconfig.json — ملاحظةٌ في Dockerfile).
• tsx (لِلتطوير): يحذف الأنواع ويشغّل مباشرةً بلا خطوة ترجمةٍ منفصلة. مشروعك يستعمله: nodemon ... tsx ./src/server.ts. لهذا "يعمل" دون dist/.

فحينما ترى package.json وDockerfile في مشروعك، تفهمهما الآن: tsx للتطوير السريع، tsc للبناء — وكلاهما يصبّ في نفس الشيء: JS بلا أنواع تُشغّلها Node.

كيف: TypeScript التطبيقيّ (ما تحتاجه لتدير الستاك)

أنا لن أعيد بناء نظرية الأنواع (النوع=مجموعة، التباين، البرمجة على مستوى الأنواع) — هي كاملةٌ في منهجك القديم، ومرجعُك حين تريد الغوص. هنا اللبنات التي تجعل تدفّق مشروعك مكتوبَ-النوع:

ts
// 1) تعليق نوعٍ على متغيّر/معامل/إرجاع — العقد الذي خسرته في JS عاد
function add(a: number, b: number): number { return a + b; }
add(2, "3");   // ✗ خطأ ترجمة! المترجم رفض قبل التشغيل — هذا هو المكسب.

// 2) شكلٌ (object type): بنية بياناتك
type User = {
  id: string;
  username: string;
  email: string;
  role: "USER" | "ADMIN";   // اتّحادٌ من قيمٍ حرفية: لا قيمة أخرى مسموحة
  age?: number;             // ? = اختياريّ (قد يكون undefined)
};

// 3) الأنواع البنيوية (structural) — فرقٌ جوهريٌّ عن C
type Point = { x: number; y: number };
const p = { x: 1, y: 2, z: 9 };
const q: Point = p;   // ✓ مقبول! لأن p يملك x و y. الزائد z لا يضرّ.

النقطة ٣ مهمّة لمبرمج C: في C الأنواع اسمية (nominal): struct A و struct B بنفس الحقول نوعان مختلفان لأن الاسم مختلف. في TS الأنواع بنيوية (structural): التطابق بالـشكل لا بالاسم — "إن مشى كالبطّة وبدا كبطّة، فهو بطّة". أي كائنٍ يملك x:number وy:number هو Point، سمّيتَه أو لا. (لماذا اختاروا هذا، وحدوده الدقيقة — في منهجك القديم.)

ts
// 4) الاستنتاج (inference): لا تكتب النوع حين يستنتجه المترجم
const name = "yazeed";       // TS يعرف أنه string، لا تكتب : string
const nums = [1, 2, 3];      // number[]

// 5) generics كما ستستعملها (معامل نوعٍ، لا أكثر الآن)
async function load(): Promise<User> { /* ... */ }   // وعدٌ بـ User
const ids: Array<string> = [];                        // مصفوفةٌ من string
// Request, Response في Express؛ PrismaClient المولَّد — كلّها generics تستهلكها.

// 6) any مقابل unknown — بابان للهروب من الأنواع
let danger: any;       // "أطفئ الفحص هنا" — المواطن الخائن. تجنّبه.
let honest: unknown;   // "لا أعرف النوع بعد" — صادق: يجبرك أن تتحقّق قبل الاستعمال

req.body يأتيك any (أو unknown بإعدادٍ صارم) — لأنه فعلاً مجهولٌ وقت التشغيل. وهنا تُغلق الدائرة: المترجم يعترف أنه أعمى عن الشبكة، فتأتي أداةٌ تتحقّق وقت التشغيل (Zod) لتملأ الفجوة. عرفتَ الآن لماذا ستوجد، قبل أن تراها.

اللغز / البناء من الصفر

js
[] == false;  [0] == false;  "0" == false;  null == undefined;  null === undefined;
NaN === NaN;  typeof NaN;  0.1 + 0.2 === 0.3;  [1,2] + [3,4];  {} + [];

الخلاصة — أين تتّصل هذه العقدة بالشجرة

الوصلة للواقع (نمط SelfLab)

افتح أي ملفٍّ في backend/src/ الآن وستقرؤه، لا تتهجّاه:

• import { createUser } from "./user.controller" — وحدةُ ESM، مسارٌ نسبيّ لملفّك. import express from "express" — الافتراضيّ من حزمة.
• export async function createUser(req: Request, res: Response) — دالةٌ قيمة، async (إقليم ٢)، ومعاملاتٌ بأنواع Express (generics مستهلَكة).
• const { firstName, lastName, ... } = validation.data — تفكيكٌ (destructuring): سحبُ حقولٍ من كائنٍ باسمها؛ مجرّد سكّرٍ على وصول الكائن الذي فهمته.
• req.body يأتي مجهولاً، فيمرّ على createUserSchema.safeParse(...) — هذا هو الجسر الذي تنبّأتَ به بين "المترجم أعمى عن الشبكة" و"حارسٌ وقت التشغيل". في الإقليم ٦ ستبني هذا الحارس بنفسك وتعرف لماذا لا غنى عنه.