TypeScript: جوهر اللغة، التصنيف الصارم و React Native

ما هو TypeScript؟

TypeScript هي لغة برمجة من Microsoft (2012) أنشأها Anders Hejlsberg (مبتكر C# و Turbo Pascal). توسع TypeScript JavaScript بنظام أنواع ثابت، واجهات، أدوات عامة، تعدادات ومزينات. يتم ترجمة كود TS إلى JavaScript نقي (transpilation) باستخدام المترجم tsc أو Babel — الناتج هو JS قياسي يعمل في أي بيئة.

الدافع وراء TypeScript هو قيود JavaScript في المشاريع الكبيرة. يؤدي التصنيف الديناميكي لـ JS إلى أخطاء تُكتشف فقط في وقت التشغيل: undefined is not a function, Cannot read property of null. ينقل TypeScript التحقق من الأنواع إلى مرحلة الترجمة، مما يمنع هذه الأخطاء قبل تنفيذ الكود. كلما كان المشروع أكبر، كانت فوائد TS أكبر: في قاعدة كود من 100,000+ سطر، تمنع TS مئات الأخطاء المحتملة.

ميزة رئيسية لـ TypeScript هي التصنيف الصارم مع العلم الاختياري strict: true في tsconfig.json. الوضع الصارم يفعل جميع التحققات: strictNullChecks (null/undefined غير متوافقين مع الأنواع الأخرى)، noImplicitAny (يمنع any الضمني)، strictFunctionTypes (التباين المعاكس لمعاملات الدوال). افتراضيًا، يُوصى بـ strict: true لجميع المشاريع الجديدة.

TypeScript مقابل JavaScript

TypeScript يختلف عن JavaScript فقط في مرحلة التطوير. بعد الترجمة، يتم مسح الأنواع — وقت التشغيل ينفذ JS عادي دون فقدان الأداء. هذا مقايضة: التطوير يتطلب خطوة ترجمة إضافية، لكنه يوفر إكمال تلقائي في IDE، إعادة هيكلة مع إعادة تسمية الرموز وتوثيق الأنواع مباشرة في الكود.

نظام أنواع TypeScript

نظام أنواع TypeScript هيكلي، وليس اسمي: نوعان متوافقان إذا تطابقت بنيتهما، بغض النظر عن الاسم. هذا يختلف عن Java/C# حيث يتم تحديد التوافق باسم الكلاس أو الواجهة. التصنيف الهيكلي يبسط التكامل مع كود JS الموجود — ليست هناك حاجة لتصريح implements لكل نوع.

الأنواع الأساسية والمتقدمة

TypeScript يدعم أنواع JS البدائية بالإضافة إلى: any (يعطل التحقق)، unknown (any آمن — يتطلب تحققًا قبل الاستخدام)، never (لا يعيد أبدًا)، void (بدون إرجاع)، tuple (صفيف ثابت الطول)، enum (تعداد)، union (string | number)، intersection (A & B)، literal ('red' | 'blue')، index signature ([key: string]: number).

// نظام الأنواع الأساسي لـ TypeScript
// الأنواع البدائية
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// أنواع Union و Literal
type Platform = 'ios' | 'android' | 'web';
type Status = 'idle' | 'loading' | 'success' | 'error';

function getSDKVersion(platform: Platform): number {
  switch (platform) {
    case 'ios': return 17;
    case 'android': return 34;
    case 'web': return 2025;
  }
}

// Tuple — صف ثابت الطول
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — تعداد مع زيادة تلقائية
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — بديل آمن لـ any
function parseJSON(json: string): unknown {
  return JSON.parse(json);
}

const data = parseJSON('{"name":"TS"}');
if (typeof data === 'object' && data !== null) {
  console.log((data as Record<string, unknown>).name);
}

نوع Platform هو اتحاد من القيم الحرفية النصية، يقيد القيم بثلاثة خيارات. إذا مررت 'windows'، سيرمي TypeScript خطأ. Tuple Coordinate يضمن عددين بالضبط — مفيد للإحداثيات أو ألوان RGB. Enum AppState يُترجم إلى كائن مع تعيين عكسي. Unknown يُجبر على التحقق من النوع قبل الاستخدام — على عكس any، unknown آمن افتراضيًا.

الواجهات و type-aliases

الواجهات و type-aliases في TypeScript تصف أشكال الكائنات. تدعم الواجهات دمج التصريحات (إعادة التصريح يضيف حقولًا) والامتداد (extends). يمكن لـ type-aliases وصف الاتحادات، التقاطعات، tuples والأنواع الشرطية، لكنها لا تدعم دمج التصريحات. القاعدة: استخدم interface لكائنات API، و type لكل شيء آخر.

// الواجهات والأنواع لـ React Native
// Interface مع حقول اختيارية
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // حقل اختياري
  readonly createdAt: Date; // للقراءة فقط
}

// تمديد الواجهة (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// نوع لبيانات API
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial يجعل جميع الحقول اختيارية
type PartialUser = Partial<User>;

// Pick — يختار الحقول المحددة
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — قاموس بمفاتيح مصنفة
type UserMap = Record<string, User>;

الواجهة User مع ? (حقل اختياري) و readonly (للقراءة فقط). ApiResponse<T> هي واجهة عامة لاستجابات API. Partial<User> هو نوع مساعد يجعل جميع الحقول اختيارية (مفيد لنماذج التحرير). Pick<User, 'id' | 'name'> يختار فقط الحقول المحددة — مناسب لمكونات المعاينة. Record<string, User> هو قاموس مستخدمين حسب المعرف.

الأدوات العامة والأنواع المساعدة

الأدوات العامة (Generics) هي ميزة رئيسية في TypeScript، تتيح إنشاء مكونات تعمل مع أي نوع دون فقدان أمان الأنواع. تُعرف الدالة العامة بمعامل نوع بين أقواس زاوية: function identity<T>(arg: T): T. النوع T يُستنتج تلقائيًا من الوسيط أو يُحدد صراحة: identity<string>('hello').

الأنواع المساعدة هي أدوات عامة مدمجة لتحويل الأنواع: Partial<T> (جميع الحقول اختيارية)، Required<T> (جميع الحقول إلزامية)، Readonly<T> (جميع الحقول للقراءة فقط)، Pick<T, K> (اختيار الحقول)، Omit<T, K> (استبعاد الحقول)، Record<K, T> (قاموس)، Exclude<T, U> (استبعاد من اتحاد)، Extract<T, U> (استخراج من اتحاد)، NonNullable<T> (استبعاد null/undefined).

// الأدوات العامة في TypeScript
// دالة عامة للعمل مع API
async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return response.json() as Promise<T>;
}

// الاستخدام مع نوع محدد
interface Product {
  id: number;
  title: string;
  price: number;
}

const products = await fetchData<Product[]>('/api/products');

// كلاس عام لإدارة الحالة
class StateManager<S> {
  private state: S;

  constructor(initial: S) {
    this.state = initial;
  }

  getState(): S {
    return this.state;
  }

  updateState(partial: Partial<S>): void {
    this.state = { ...this.state, ...partial };
  }
}

// عمل مصنف مع Redux Reducer
type Action<T, P> = {
  type: T;
  payload: P;
};

type UserAction =
  | Action<'SET_USER', User>
  | Action<'CLEAR_USER', undefined>
  | Action<'UPDATE_USER', Partial<User>>;

الدالة fetchData<T> هي غلاف مصنف حول fetch. المعامل T يحدد شكل الاستجابة: عند استدعاء fetchData<Product[]>، يعلم TypeScript أن المصفوفة المعادة تحتوي على كائنات Product. كلاس StateManager<S> يدير حالة من أي نوع — Partial<S> للتحديثات الجزئية. Action<T, P> هو اتحاد مميز لأكشنات Redux مع تضييق تلقائي للنوع في switch.

TypeScript في React Native

TypeScript في React Native يوفر تصنيفًا صارمًا لـ props وحالة المكونات. CLI React Native ينشئ قالبًا بامتداد .tsx و tsconfig.json. يتم استبدال PropTypes (JS) بواجهات TypeScript — يتم التحقق في مرحلة الترجمة، وليس في وقت التشغيل. styled-components و React Navigation لديهما دعم كامل للأنواع.

تصنيف المكونات

React.FC<Props> هو نوع المكون الوظيفي مع props. يتم تصنيف children تلقائيًا. useRef<T> — مرجع لمكون أصلي. useState<S> — حالة مع استنتاج النوع. useNavigation<T> — تنقل مصنف. useCallback، useMemo — مع استنتاج تلقائي للأنواع. جميع hooks React مصنفة بالكامل.

// مكون React Native مصنف
import React, { useState, useCallback } from 'react';
import {
  View, Text, FlatList, TouchableOpacity,
  StyleSheet
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

// أنواع للتنقل والبيانات
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

type NavigationProp =
  NativeStackNavigationProp<RootStackParamList, 'Home'>;

// واجهة لـ props
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// مكون وظيفي مصنف
const ProductList: React.FC<ProductListProps> = ({
  products,
  onSelect
}) => {
  const navigation = useNavigation<NavigationProp>();
  const [selectedId, setSelectedId] = useState<number | null>(null);

  const handlePress = useCallback((id: number) => {
    setSelectedId(id);
    onSelect(id);
    navigation.navigate('Profile', { userId: String(id) });
  }, [onSelect, navigation]);

  const renderItem = useCallback(({ item }: { item: Product }) => (
    <TouchableOpacity onPress={() => handlePress(item.id)}>
      <Text>{item.title}</Text>
      <Text>${item.price.toFixed(2)}</Text>
    </TouchableOpacity>
  ), [handlePress]);

  return (
    <FlatList
      data={products}
      renderItem={renderItem}
      keyExtractor={(item) => String(item.id)}
    />
  );
};

نوع RootStackParamList هو قاموس للمسارات مع معاملاتها. NavigationProp يوفر تنقلًا مصنفًا: navigation.navigate('Profile', { userId }) يتحقق من أن Profile يقبل userId. useCallback مع معاملات مصنفة يمنع إعادة التصيير غير الضرورية. FlatList يُصنف عبر الأدوات العامة: — data و renderItem يستلمان الأنواع تلقائيًا.

أدوات مطور TypeScript

أدوات TypeScript تشمل المترجم tsc، tsconfig.json، دعم IDE في VS Code، ESLint مع @typescript-eslint، Prettier و DefinitelyTyped (@types/*). tsc هو المترجم الذي يحول .ts إلى .js. tsconfig.json يهيئ: target (ES2020)، module (ESNext)، strict: true، outDir (مجلد الإخراج). sourceMap — تصحيح TS في المتصفح عبر خرائط الكود.

DefinitelyTyped هو مستودع لتعريفات الأنواع للمكتبات دون أنواع مدمجة. التثبيت: npm install @types/react @types/react-native --save-dev. ملفات .d.ts هي تصريحات أنواع. المكتبات الحديثة (React، React Native، Angular) تتضمن أنواعًا مدمجة ولا تتطلب @types/. بالنسبة لمكتبات JS القديمة، DefinitelyTyped هو المصدر الوحيد للأنواع.

// tsconfig.json — تهيئة أدنى
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // تحقق فقط، بدون إنشاء JS
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

الخيار strict: true يفعل جميع تحققات الأنواع — موصى به لجميع المشاريع. jsx: 'react-native' يحافظ على JSX دون تحويل (React Native يعالج JSX عبر Babel). moduleResolution: 'node' — تحليل الوحدات كما في Node.js. esModuleInterop — التوافق مع وحدات CommonJS. noEmit: true — تحقق فقط دون إنشاء ملفات JS (Babel أو Metro يولد JS).