TypeScript چیست؟ راهنمای ساده برای غیربرنامه‌نویس‌ها

TypeScript یعنی JavaScript با نوع‌ها. برچسب می‌زنید که هر مقدار از چه نوعی باشد — یک عدد، یک متن، فهرستی از سفارش‌ها — و TypeScript کد شما را پیش از اجرا برای عدم‌تطابق بررسی می‌کند. سایت TypeScript آن را «JavaScript با نحو برای نوع‌ها» توصیف می‌کند؛ هنگام تبدیل کد به JavaScript معمولی، نوع‌ها حذف می‌شوند و آن JavaScript هر جا که JavaScript اجرا شود اجرا می‌شود.

چرا وقتی با هوش مصنوعی می‌سازید مهم است

مدل‌های هوش مصنوعی کد را سریع می‌نویسند، و کد سریع اشتباه دارد: فیلدی به نام customerName در یک فایل و customer_name در فایلی دیگر، قیمتی که به‌جای عدد به‌صورت متن فرستاده شده، یا تابعی که با یک مقدار جا افتاده صدا زده می‌شود. در JavaScript ساده، بسیاری از این اشتباهات فقط وقتی ظاهر می‌شوند که کسی دکمه‌ی اشتباه را بزند.

TypeScript بسیاری از آن‌ها را زودتر می‌گیرد، همان زمان که کد نوشته می‌شود:

• هوش مصنوعی بازخورد فوری می‌گیرد. خطاهای نوع دقیقاً خط اشتباه را نشان می‌دهند، پس عامل می‌تواند پیش از اینکه شما ببینید آن را درست کند.
• تغییرات امن‌ترند. یک فیلد را تغییر نام می‌دهید و TypeScript هر جایی را که هنوز نام قدیمی را استفاده می‌کند علامت می‌زند.
• کد خودش را توضیح می‌دهد. نوع‌ها مشخص می‌کنند یک تابع چه چیزی می‌گیرد و چه چیزی برمی‌گرداند، که به شما، هوش مصنوعی و هر برنامه‌نویسی که بعداً روی آن کار کند کمک می‌کند.
• ویرایشگرها هوشمندتر می‌شوند. تکمیل خودکار و «رفتن به تعریف» بهتر کار می‌کنند، چون ویرایشگر می‌داند هر مقدار چیست.

این یکی از دلایل اصلی است که بسیاری از سازنده‌های اپ هوش مصنوعی TypeScript را به‌صورت پیش‌فرض انتخاب می‌کنند.

یک تشبیه روزمره

یک انبار حمل‌ونقل با بخش‌های برچسب‌دار را تصور کنید. هر بخش تابلویی دارد: «فقط پالت»، «سردخانه»، «حداکثر ۵۰۰ کیلو». وقتی محموله می‌رسد، بازرسی دم در کالاها را با تابلو مقایسه می‌کند. ماهی یخ‌زده‌ای که قرار است به بخش خشکبار برود دم در متوقف می‌شود، نه اینکه یک هفته بعد که بوی آن درآمده کشف شود.

TypeScript همان بازرس دم در است. نوع‌ها تابلوها هستند. بررسی پیش از آن انجام می‌شود که کالاها — یعنی کد شما — وارد استفاده شوند. و وقتی همه‌چیز سر جایش است، تابلوها برداشته می‌شوند: JavaScript در حال اجرا هیچ نوعی در خود ندارد.

TypeScript چطور کار می‌کند

۱. شما (یا هوش مصنوعی) فایل‌های .ts یا .tsx می‌نویسید — TypeScript با برچسب‌های نوع. ۲. بررسی‌کننده‌ی نوع کد را می‌خواند و عدم‌تطابق‌ها را به‌صورت خطا در ویرایشگر یا build گزارش می‌دهد. ۳. یک گام build نوع‌ها را حذف می‌کند، و JavaScript ساده تولید می‌شود. ۴. JavaScript در مرورگر یا روی سرور (Node.js، Deno، Bun) اجرا می‌شود.

پیامد مهمی دارد: TypeScript کدی را که نوشته‌اید بررسی می‌کند، نه داده‌ای را که در زمان اجرای اپ می‌رسد. اگر یک API بیرونی چیز غیرمنتظره‌ای برگرداند، TypeScript آن را نمی‌بیند، مگر اینکه اعتبارسنجی زمان اجرا اضافه کنید.

یک مثال کامل: فرم رزرو

فرض کنید یک اپ رزرو برای آرایشگاه می‌سازید. این یک نوع است که یک رزرو را توصیف می‌کند:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // the ? means optional
};

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

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

حالا ببینید TypeScript چه چیزی را می‌گیرد.

یک فیلد غلط نوشته‌شده.

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript گزارش می‌دهد که prise ویژگی شناخته‌شده‌ای نیست و price جا افتاده است. در JavaScript ساده، این بی‌سروصدا پیش‌پرداختی برابر NaN (عدد نیست) محاسبه می‌کرد.

نوع اشتباه مقدار.

const booking: Booking = { ...otherFields, price: "40" };

TypeScript گزارش می‌دهد که متن را نمی‌توان جای عدد به کار برد. بدون آن، "40" * 0.2 تصادفاً کار می‌کند، اما "40" + 5 مقدار "405" می‌دهد — همان باگی که روی فاکتور ظاهر می‌شود.

سرویسی که وجود ندارد.

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript گزارش می‌دهد که "perm" یکی از سرویس‌های مجاز نیست. وقتی آرایشگاه بعداً سرویس perm اضافه کند، آن را به نوع اضافه می‌کنید و TypeScript هر جایی را که باید به‌روز شود نشان می‌دهد — لیست قیمت، فرم، رنگ‌های تقویم.

چیزی که نمی‌تواند بگیرد. اگر فرم رزرو price: "40" را از مرورگر به سرور بفرستد، TypeScript روی سرور این را در زمان اجرا نمی‌بیند. به همین دلیل اپ‌های خوب داده‌ی ورودی را هم اعتبارسنجی می‌کنند، اغلب با یک کتابخانه‌ی اعتبارسنجی که ساختار را بررسی می‌کند و آن را به یک Booking درست تبدیل می‌کند.

TypeScript در برابر JavaScript

اصطلاحات رایج توضیح داده‌شده

اشتباهات و باورهای غلط رایج

• «TypeScript کد را بدون باگ می‌کند.» اشتباهات ساختار داده را می‌گیرد، نه منطق غلط را. پیش‌پرداخت ۲ درصدی به‌جای ۲۰ درصد بدون خطای نوع رد می‌شود.
• «نوع‌ها من را از ورودی بد محافظت می‌کنند.» نوع‌ها در زمان اجرا از بین می‌روند. داده‌ی کاربران، فرم‌ها و APIها را اعتبارسنجی کنید.
• any همه‌جا. وقتی هوش مصنوعی گیر می‌کند، ممکن است برای خاموش کردن خطاها سراغ any یا // @ts-ignore برود. این مشکلات را پنهان می‌کند نه اینکه حلشان کند.
• نادیده گرفتن خطاهای نوع چون پیش‌نمایش کار می‌کند. بعضی ابزارها هنوز کد دارای خطای نوع را اجرا می‌کنند. آن خطاها هنوز باگ‌هایی هستند که منتظر وقوع‌اند.
• «TypeScript کندتر است.» نوع‌ها پیش از اجرا حذف می‌شوند؛ JavaScript در حال اجرا اساساً همان است.
• «فقط برای تیم‌های بزرگ است.» سازنده‌های تنها هم سود می‌برند، به‌ویژه وقتی هوش مصنوعی بیشتر ویرایش‌ها را انجام می‌دهد.

از سازنده‌ی هوش مصنوعی‌تان چه بخواهید

• «TypeScript را با حالت سخت‌گیرانه (strict mode) روشن استفاده کن.»
• «نوع‌های مشترک برای رکوردهای اصلی‌مان تعریف کن — Customer، Booking، Invoice — و هم در فرانت‌اند و هم در بک‌اند از آن‌ها استفاده کن.»
• «برای عبور از خطاها از any یا @ts-ignore استفاده نکن؛ مشکل اصلی را حل کن و بگو چه بود.»
• «همه‌ی داده‌ی ورودی را روی سرور اعتبارسنجی کن، نه فقط با نوع‌ها.»
• «بررسی‌کننده‌ی نوع را اجرا کن و پیش از اینکه بگویی کار تمام است، همه‌ی خطاها را درست کن.»
• «وقتی فیلدی را تغییر نام می‌دهی، هر جایی را که TypeScript علامت می‌زند به‌روز کن.»
• «این خطای نوع را به انگلیسی ساده توضیح بده.»

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

TypeScript در Mythex

وقتی چیز خاصی نمی‌خواهید، Mythex پروژه‌های جدید را روی Vite + React + TypeScript + Tailwind شروع می‌کند. ویرایشگر کد شامل هوشمندی زبان است — تکمیل، تشخیص خطا و رفتن به تعریف برای TypeScript و JavaScript و زبان‌های دیگر — پس خطاهای نوع در خود کد دیده می‌شوند، نه فقط در پیش‌نمایش. ویرایشگر در نسخه‌ی Free فقط خواندنی و در Pro کاملاً قابل ویرایش است. همچنان می‌توانید در اولین پرامپت راه‌اندازی دیگری بخواهید؛ صفحه‌ی مستندات نحوه‌ی انتخاب فناوری توضیح می‌دهد چطور، و مستندات ویرایشگر کد نشان می‌دهد ویرایشگر چه چیزهایی را نمایش می‌دهد.

پرسش‌ها