آموزش تایپ اسکریپت از صفر تا پروژه‌های واقعی: راهنمای جامع و کاربردی

فهرست مطالب

• ۱. تایپ اسکریپت چیست و چرا باید آن را یاد بگیریم؟
• ۲. راه‌اندازی محیط توسعه و تنظیمات tsconfig.json
• ۳. انواع داده اصلی و سیستم تایپینگ (Types)
• ۴. تفاوت Interface و Type Aliases و کاربرد هرکدام
• ۵. تایپ اسکریپت در وب: کار با DOM و Fetch API
• ۶. ژنریک‌ها (Generics)؛ نوشتن کدهای بازاستفاده‌پذیر
• ۷. ۳ نکته کلیدی و تجربه عملی برای جلوگیری از باگ‌های رایج
• ۸. مقایسه جامع جاوا اسکریپت و تایپ اسکریپت
• ۹. عیب‌یابی سریع و رفع خطاهای متداول
• ۱۰. پرسش‌های متداول

تایپ اسکریپت (TypeScript) با افزودن سیستم تایپ ایستاده (Static Typing) به جاوا اسکریپت، به محبوب‌ترین ابزار توسعه‌دهندگان وب تبدیل شده است. این زبان به شما کمک می‌کند خطاهای رایج مانند خواندن یک property از مقدار undefined را دقیقاً هنگام کدنویسی پیدا کنید، نه در زمان اجرای برنامه. در این راهنما، از مفاهیم پایه تا متدهای پیشرفته، کانفیگ پروژه و سناریوهای واقعی دنیای توسعه را به صورت کاملاً عملی مرور می‌کنیم.

تایپ اسکریپت چیست و چرا باید آن را یاد بگیریم؟

تایپ اسکریپت یک لایه جاوا اسکریپت همراه با سنتکس اضافه برای تایپ‌ها است که توسط مایکروسافت توسعه یافته و در نهایت به جاوا اسکریپت استاندارد کامپایل می‌شود.

در پروژه‌های بزرگ وب، تغییر یک توابع یا خطای تایپی در نام کلیدهای یک شیء، منشأ بخش زیادی از باگ‌ها است. هنگام کار روی قطعه کدهای کاربردی جاوا اسکریپت، هیچ ابزار داخلی برای اطمینان از درست بودن ساختار ورودی توابع وجود ندارد. تایپ اسکریپت این خلاء را پر می‌کند و به شما اجازه می‌دهد ساختار تمام داده‌ها را به شکل دقیق تعریف کنید.

برخی از مهم‌ترین مزایای تایپ اسکریپت عبارتند از:

• تکمیل خودکار کد (Autocomplete): ادیتور دقیقا می‌داند چه متغیرهایی چه مشخصاتی دارند.
• رفاکتورینگ بی‌دردسر: تغییر اسم یک تابع یا فیلد در کل پروژه تنها با یک کلیک انجام می‌شود بدون اینکه نگران شکستن قسمتی از کد باشید.
• کاهش نیاز به تست‌های ساده: بسیاری از تست‌های مربوط به صحت نوع داده کلا حذف می‌شوند.

راه‌اندازی محیط توسعه و تنظیمات tsconfig.json

برای اجرای تایپ اسکریپت، به Node.js و کامپایلر tsc نیاز دارید تا فایل‌های .ts را به کد قابل فهم برای مرورگر یعنی .js تبدیل کند.

برای شروع کافی است مراحل زیر را انجام دهید:

1. نصب کامپایلر تایپ اسکریپت به صورت سراسری:

   npm install -g typescript

2. ایجاد فایل تنظیمات پروژه (tsconfig.json):

   tsc --init

فایل tsconfig.json نحوه رفتار کامپایلر را مشخص می‌کند. گزینه‌های کلیدی که باید بشناسید:

{
  "compilerOptions": {
    "target": "ES2022",           /* نسخه جاوا اسکریپت خروجی */
    "module": "commonjs",         /* سیستم ماژول‌بندی */
    "strict": true,               /* فعال‌سازی تمام بررسی‌های سخت‌گیرانه */
    "outDir": "./dist",           /* پوشه خروجی کدهای کامپایل شده */
    "rootDir": "./src",           /* پوشه سورس کدهای تایپ اسکریپت */
    "noImplicitAny": true         /* جلوگیری از تعریف غیرمستقیم any */
  }
}

انواع داده اصلی و سیستم تایپینگ (Types)

تایپ اسکریپت علاوه بر انواع داده پایه مانند string و number، تایپ‌های اختصاصی متعددی مانند Enum، Tuple و unknown ارائه می‌دهد.

تعریف تایپ برای متغیرهای پایه به صورت ساده و با علامت دو نقطه (:) انجام می‌شود:

let username: string = "Ali";
let age: number = 28;
let isActive: boolean = true;
let skills: string[] = ["JavaScript", "TypeScript"];

تایپ‌های مهمی که باید تفاوت آن‌ها را به خوبی درک کنید:

• any: سیستم بررسی تایپ را کلا غیرفعال می‌کند. بهتر است تا حد امکان از آن استفاده نکنید!
• unknown: جایگزین امن‌تر برای any. تا زمانی که نوع متغیر را بررسی نکنید (Type Checking)، اجازه دسترسی به متدهای آن را نمی‌دهد.
• never: برای توابعی استفاده می‌شود که هرگز تمام نمی‌شوند (مثلاً توابعی که همیشه Error پرت می‌کنند یا حلقه بی‌نهایت دارند).
• Tuple: آرایه‌ای با طول مشخص و انواع داده ثابت در هر اندیس.

// نمونه Tuple
let userRole: [number, string] = [1, "Admin"];

// نمونه unknown
let userInput: unknown;
if (typeof userInput === "string") {
    console.log(userInput.toUpperCase()); // کاملاً امن
}

تفاوت Interface و Type Aliases و کاربرد هرکدام

از Interface بیشتر برای تعریف ساختار اشیاء و کلاس‌ها استفاده می‌شود، در حالی که Type امکان تعریف Union، Tuple و ترکیب تایپ‌های پیچیده‌تر را فراهم می‌کند.

هنگام ساخت پروژه‌های واقعی، همواره این سوال مطرح است که از interface استفاده کنیم یا type؟ جدول زیر تفاوت‌های کلیدی را مشخص می‌کند:

مثالی از تعریف یک مدل کاربر با Interface و ارث‌بری آن:

interface User {
    id: number;
    name: string;
    email?: string; // Optional property
}

interface AdminUser extends User {
    permissions: string[];
}

تایپ اسکریپت در وب: کار با DOM و Fetch API

تایپ اسکریپت تایپ‌های آماده‌ای برای عناصر مرورگر ارائه می‌دهد تا هنگام تعامل با عناصر HTML و درخواست‌های شبکه، هیچ متد ناپیدایی فراخوانی نشود.

وقتی با مرورگر کار می‌کنید، عناصر DOM کدهای HTML ساده نیستند؛ بلکه تایپ‌های مشخصی دارند. اگر قصد تغییر در عناصر صفحه را دارید، مرور مطالب آموزش dom در جاوا اسکریپت دید خوبی به شما می‌دهد، اما در تایپ اسکریپت باید تایپ دقیق عنصر را مشخص کنید تا متدهای مرتبط در دسترس قرار گیرند.

// Cast کردن تایپ برای عناصر HTML
const inputElement = document.getElementById("user-email") as HTMLInputElement;
console.log(inputElement.value); // دسترسی به value بدون خطای تایپ

همچنین هنگام دریافت اطلاعات از API و آموزش fetch api در جاوا اسکریپت، با تایپ‌گذاری Response می‌توانید خروجی مطمئنی داشته باشید:

interface Post {
    userId: number;
    id: number;
    title: string;
    body: string;
}

async function getPost(id: number): Promise {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
    const data: Post = await response.json();
    return data;
}

برای بررسی کدهای بیشتر و الگوهای ساختار یافته می‌توانید از آرشیو کدهای آماده نیز استفاده کنید.

ژنریک‌ها (Generics)؛ نوشتن کدهای بازاستفاده‌پذیر

ژنریک‌ها ابزاری هستند که امکان ارسال تایپ به عنوان متغیر به توابع، کلاس‌ها و رابط‌ها را فراهم می‌کنند تا بدون از دست رفتن تایپینگ، کدهای چندبارمصرف بنویسید.

تصور کنید تابعی می‌خواهید که یک آیتم دریافت کرده و آن را داخل یک آرایه برگرداند. بدون ژنریک مجبورید یا برای هر تایپ یک تابع بنویسید یا از any استفاده کنید که هر دو اشتباه است. راهکار استفاده از Generics است:

function wrapInArray(value: T): T[] {
    return [value];
}

const numArr = wrapInArray(100); // تایپ خروجی: number[]
const strArr = wrapInArray("TypeScript"); // تایپ خروجی: string[]

۳ نکته تخصصی و تجربه عملی برای جلوگیری از باگ‌های رایج

در پروژه‌های صنعتی و واقعی با چالش‌هایی روبرو می‌شوید که در آموزش‌های مقدماتی اشاره‌ای به آن‌ها نمی‌شود. این ۳ نکته تجربه عملی شما را به شکل چشمگیری افزایش می‌دهد:

۱. باریک‌سازی تایپ (Type Narrowing) با Discriminated Unions

وقتی با چند حالت مختلف از یک داده کار می‌کنید، یک فیلد مشترک لیتِرال (Literal) بسازید تا تایپ اسکریپت در بلوک‌های شرطی، تایپ دقیق را تشخیص دهد:

type NetworkSuccess = { status: "success"; data: string };
type NetworkError = { status: "error"; message: string };
type ApiResponse = NetworkSuccess | NetworkError;

function handleResponse(response: ApiResponse) {
    if (response.status === "success") {
        console.log(response.data); // تایپ اسکریپت می‌داند data وجود دارد
    } else {
        console.error(response.message); // تایپ اسکریپت می‌داند message وجود دارد
    }
}

۲. استفاده هوشمندانه از Utility Types

نیازی نیست تایپ‌های تکراری بسازید. تایپ اسکریپت ابزارهای آماده‌ای مثل Partial، Pick و Omit ارائه می‌دهد:

• Partial<User>: تمام فیلدها را اختیاری (Optional) می‌کند.
• Omit<User, "id">: تایپ جدیدی می‌سازد که فیلد id در آن حذف شده است.
• Readonly<User>: امکان تغییر خصوصیات اشیاء را مسدود می‌کند.

۳. فعال نگه داشتن strictNullChecks

هرگز strictNullChecks را در tsconfig خاموش نکنید. این گزینه شما را مجبور می‌کند مقادیر احتمالی null و undefined را مدیریت کنید و از بیش از ۴۰ درصد خطاهای رایج زمان اجرا جلوگیری می‌کند.

مقایسه جامع جاوا اسکریپت و تایپ اسکریپت

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

عیب‌یابی سریع و رفع خطاهای متداول

هنگام کار با تایپ اسکریپت احتمالاً با خطاهای زیر برخورد می‌کنید. راه حل هرکدام به شکل زیر است:

پرسش‌های متداول