آموزش جامع TypeScript برای مبتدیان

🎯 اهداف یادگیری

• تفاوت TypeScript و JavaScript را درک کنید
• نحوه تنظیم محیط توسعه TypeScript را یاد بگیرید
• با انواع داده (Types) در TypeScript آشنا شوید
• نحوه کامپایل TypeScript به JavaScript را بیاموزید

📌 TypeScript چیست؟

TypeScript یک زبان برنامه‌نویسی متن‌باز (Open Source) است که توسط مایکروسافت توسعه داده شده و یک سوپرست برای JavaScript محسوب می‌شود:

let message: string = "سلام دنیا!";
// این یک متغیر با نوع string در TypeScript است

مزایای TypeScript:

• تایپ‌های استاتیک: کاهش خطاهای زمان اجرا با بررسی نوع داده‌ها در زمان کامپایل
• ابزارهای توسعه پیشرفته: اتوکامپلیت و تشخیص خطاهای بهتر
• سازگاری با JavaScript: تمام کدهای JavaScript در TypeScript معتبر هستند

📌 نصب و راه‌اندازی TypeScript

برای شروع کار با TypeScript ابتدا باید آن را نصب کنید:

# نصب TypeScript به صورت全局
npm install -g typescript
# بررسی نسخه نصب شده
tsc --version

مراحل کامپایل TypeScript:

1. یک فایل با پسوند .ts ایجاد کنید (مثال: app.ts)
2. کدهای TypeScript خود را در آن بنویسید
3. فایل را با دستور tsc کامپایل کنید

# کامپایل فایل TypeScript
tsc app.ts
# فایل خروجی JavaScript ایجاد می‌شود (app.js)

📌 انواع داده (Types) در TypeScript

TypeScript از انواع داده مختلفی پشتیبانی می‌کند:

let name: string = "علی";
let age: number = 25;
let isActive: boolean = true;
let skills: string[] = ["JavaScript", "TypeScript", "React"];
let anything: any = "می‌تواند هر نوع مقداری بگیرد";

انواع داده پرکاربرد:

📌 توابع در TypeScript

در TypeScript می‌توانید برای پارامترها و مقدار بازگشتی توابع نوع مشخص کنید:

function add(a: number, b: number): number {
    return a + b;
}
// استفاده از تابع
console.log(add(5, 3)); // خروجی: 8

انواع توابع:

• توابع معمولی: مانند مثال بالا
• توابع arrow: با سینتکس جدیدتر
• توابع با پارامترهای اختیاری: با علامت ?

// تابع arrow
const multiply = (a: number, b: number): number => a * b;
// تابع با پارامتر اختیاری
function greet(name: string, title?: string): string {
    return `سلام ${title ? title +  : ''}${name}`;
}

📌 اینترفیس‌ها (Interfaces)

اینترفیس‌ها برای تعریف ساختار اشیا استفاده می‌شوند:

interface User {
    id: number;
    name: string;
    email?: string; // اختیاری
}
const user1: User = {
    id: 1,
    name: "علی"
};

ویژگی‌های اینترفیس‌ها:

• تعریف ساختار ثابت: برای اشیا با خصوصیات مشخص
• پارامترهای اختیاری: با علامت ? مشخص می‌شوند
• قابل گسترش: می‌توان اینترفیس‌ها را extends کرد

📌 تمرین عملی

کد زیر را با استفاده از TypeScript کامل کنید:

// اینترفیس Product را تعریف کنید
// تابع calculateTotalPrice را پیاده‌سازی کنید
function calculateTotalPrice(products) {
    let total = 0;
    products.forEach(product => {
        total += product.price;
    });
    return total;
}

راهنمای تمرین:

1. اینترفیس Product را با خصوصیات id (number)، name (string) و price (number) تعریف کنید
2. نوع پارامتر تابع calculateTotalPrice را آرایه‌ای از Productها مشخص کنید
3. نوع بازگشتی تابع را number تعیین کنید

📌 قدم بعدی

در درس بعدی با انواع داده در TypeScript آشنا خواهیم شد!