أساسيات كتابة السكربتات بلغة TypeScript

TypeScript هي JavaScript مع أنواع البيانات. يعتمد React Native على TypeScript، لذا تحتاج إلى معرفة الأساسيات.

تشغيل TypeScript

تحتاج إلى تثبيت Node.js. بعد ذلك ثبّت tsx (TypeScript Execute) لتشغيل ملفات .ts:

npm install -g tsx
tsx script.ts

المتغيرات

let name: string = "Alice";        // لا يمكن تغيير النوع
const age: number = 25;            // لا يمكن إعادة الإسناد إطلاقًا
let isStudent: boolean = true;
let hobbies: string[] = ["reading", "coding"];

القاعدة الأساسية: const = لا يمكن إعادة الإسناد. let = يمكن إعادة الإسناد. فضّل const.

استنتاج الأنواع

لست مضطرًا دائمًا إلى كتابة النوع صراحةً، لأن TypeScript يستنتجه بنفسه:

let name = "Alice";     // يعرف TypeScript أن هذا نص
let age = 25;           // يعرف TypeScript أن هذا رقم

الدوال

// دالة مسماة
function greet(name: string): string {
    return `Hello, ${name}!`;
}

// دالة سهمية (مفضّلة في React)
const greet = (name: string): string => {
    return `Hello, ${name}!`;
};

// في سطر واحد
const greet = (name: string): string => `Hello, ${name}!`;

console.log(greet("Alice"));  // Hello, Alice!

الواجهات (تعريف أشكال الكائنات)

interface Person {
    name: string;
    age: number;
    city?: string;       // علامة ? تعني أن الخاصية اختيارية
}

const alice: Person = {
    name: "Alice",
    age: 25
};

المصفوفات ودوال التعامل معها

const numbers: number[] = [1, 2, 3, 4, 5];

// map — تحويل كل عنصر
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10]

// filter — الإبقاء على العناصر المطابقة
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4]

// find — الحصول على أول تطابق
const firstEven = numbers.find(n => n % 2 === 0);
// 2

// reduce — دمج العناصر في قيمة واحدة
const sum = numbers.reduce((total, n) => total + n, 0);
// 15

البرمجة غير المتزامنة باستخدام async/await

async function fetchData(): Promise<string> {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    return data;
}

// نسخة الدالة السهمية
const fetchData = async (): Promise<string> => {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    return data;
};

معالجة الأخطاء

async function safeFetch(url: string): Promise<any> {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return await response.json();
    } catch (error) {
        console.error("Fetch failed:", error);
        return null;
    }
}

العمل مع JSON

// تحويل نص JSON إلى كائن
const jsonString = '{"name": "Alice", "age": 25}';
const person = JSON.parse(jsonString);
console.log(person.name);  // Alice

// تحويل الكائن إلى نص JSON
const backToJson = JSON.stringify(person);
console.log(backToJson);   // {"name":"Alice","age":25}

تسجيل الرسائل في الطرفية

console.log("Simple message");
console.log("Value:", someVariable);
console.error("Error message");   // نص أحمر في الطرفية
console.warn("Warning");          // نص أصفر في الطرفية

دورك الآن — سكربت صغير

أنشئ الملف fetch-example.ts:

interface Todo {
    userId: number;
    id: number;
    title: string;
    completed: boolean;
}

async function fetchTodos(): Promise<Todo[]> {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos");
    const todos: Todo[] = await response.json();
    return todos.slice(0, 5);
}

async function main() {
    const todos = await fetchTodos();
    todos.forEach(todo => {
        console.log(`[${todo.completed ? "✓" : " "}] ${todo.title}`);
    });
}

main().catch(console.error);

شغّله:

tsx fetch-example.ts