تایپ‌اسکریپت چیست؟

تایپ‌اسکریپت چیه و چرا باید به‌جای جاوااسکریپت ازش استفاده کنم؟

در این مقاله، به‌طور خلاصه با TypeScript، انواع داده‌ها (types)، قابلیت‌ها و دلایلی که باعث می‌شه اون رو به جای JavaScript استفاده کنیم آشنا می‌شیم.

 

TypeScript چیه؟

TypeScript نسخه‌ای گسترده‌تر از JavaScript هست (یا به‌اصطلاح یه superset).
یعنی تمام کدهای JavaScript در TypeScript هم معتبر هستن، اما TypeScript امکانات بیشتری ارائه می‌ده:

• ✅ بررسی نوع (type checking) و تشخیص خطا قبل از اجرای برنامه (در زمان کامپایل)

• ⚡ تکمیل خودکار کد و نوشتن سریع‌تر با کمک IntelliSense

• 🚀 امکان استفاده از جدیدترین قابلیت‌های ECMAScript، حتی قبل از پشتیبانی مرورگرها

TypeScript کمک می‌کنه کدتون امن‌تر، ساختاریافته‌تر و راحت‌تر برای نگهداری و توسعه باشه.
اگه خواستی، ویژگی‌های بیشترش رو هم می‌تونم برات توضیح بدم.

مرورگرها در حال حاضر از TypeScript به‌صورت مستقیم پشتیبانی نمی‌کنن،
بنابراین کدهای TypeScript باید طی فرآیندی به نام Transpilation به JavaScript تبدیل بشن تا توسط مرورگر قابل اجرا باشن.

این تبدیل TypeScript به JavaScript یک نقطه‌ ضعف کوچک داره: همیشه باید یک مرحله‌ی کامپایل انجام بشه تا کد به JavaScript قابل اجرا توسط مرورگر تبدیل بشه.

انواع داده در TypeScript

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

any

• نوع پیش‌فرض زمانی که برای متغیر هیچ نوعی تعریف نکرده باشید.

• این نوع کاملاً داینامیکه و می‌تونه به هر نوع داده‌ای تبدیل بشه.

• اما استفاده از any در تضاد با هدف اصلی TypeScript یعنی "ایمنی نوع" هست.

برای جلوگیری از استفاده‌ی ناخواسته از any، می‌تونید در فایل tsconfig.json گزینه‌ی noImplicitAny = true رو فعال کنید.

const iDontKnowWhatTypeIAm: any;

✅ پیشنهاد می‌شه تا حد امکان از any استفاده نکنید.

unknown

• نوعی برای داده‌هایی با نوع نامشخص.

• مشابه any عمل می‌کنه، اما با یک تفاوت مهم:
  باید قبل از استفاده از مقدار، بررسی نوع (Type Check) یا اعلان نوع (Type Assertion) انجام بدید.

• بنابراین، unknown امن‌تر از any در نظر گرفته می‌شه و ترجیح داده می‌شه.

let value: unknown = 10;
let num: number = value as number;

never

نوع never نشان‌دهنده‌ی وضعیتی است که هیچ‌گاه مقدار بازگشتی وجود ندارد.

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

• یا هرگز تموم نمی‌شن (مثل یک حلقه‌ی بی‌نهایت)

• یا همیشه خطا پرتاب می‌کنن و اجازه نمی‌دن ادامه‌ی کد اجرا بشه

با استفاده از never، کامپایلر متوجه می‌شه که هیچ کدی بعد از این تابع اجرا نخواهد شد، و اون کدها رو خاکستری (غیرفعال) نمایش می‌ده.

function processEvents(): never {
    while(true) {

    }
}

processEvents();

function throwError(): never {
    throw new Error('boo');
}

throwError();

Enum
یه مجموعه از مقدارهای ثابته که هر کدوم یه اسم دارن.

نکته: اگه  enum رو به‌صورت ثابت (const) تعریف کنی، TypeScript موقع تبدیل به JavaScript، کد جمع‌وجورتری تولید می‌کنه.

const enum Country {
    UK = 1,
    France = 2,
    Germany = 3
}

console.log(Country.UK); // 1
console.log(Country.France); // 2
console.log(Country.Germany); // 3

Tuple
یه نوع آرایه‌ست که طولش مشخصه و نوع داده‌های داخلش هم از قبل تعیین شده.

در واقع، ساختار و تعداد مشخصی از نوع داده‌ها رو توی آرایه تعریف می‌کنه.

برای وقتی که فقط دوتا مقدار داری خیلی کاربردیه، ولی اگه بیشتر بشه، خوندنش سخت و گیج‌کننده می‌شه.

const userId = 1;
const userName = 'goku';

let user: [number, string] = [userId, userName];

Union Types
این امکان رو به یه متغیر یا پارامتر تابع می‌ده که چندین نوع مختلف داشته باشه.

برای تعریفش از علامت | (خط عمودی) استفاده می‌کنیم.

function kgToLbs(weight: number | string): number {
    if (typeof weight === 'number') return weight * 2.2;
    return parseInt(weight) * 2.2;
}

console.log(kgToLbs(10));
console.log(kgToLbs('10KG'));

Intersection Types
شبیه به unionاست.

چندین نوع مختلف رو با هم ترکیب می‌کنه تا متغیر یا پارامتر تابع بتونه به تمام ویژگی‌های انواع ترکیب‌شده دسترسی پیدا کنه.

مثلاً توی این کد ما دو نوع Draggable و Resizable رو تعریف کردیم.

بعد می‌تونیم این رفتارها رو با استفاده از intersection به نوع UIWidget اضافه کنیم.

در این صورت مطمئنیم که نوع UIWidget باید این ویژگی‌های Draggable و Resizable رو داشته باشه.

type Draggable = {
    drag: () => void
};

type Resizable = {
    resize: () => void
}

// My UI Widget requires all methods/properties of Draggable & Resizable
type UIWidget = Draggable & Resizable
let textBox: UIWidget = {
    drag: () => console.log('Item is dragged'),
    resize: () => console.log('Item is resized')
}

Type Aliases

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

Type Aliases این امکان رو می‌ده که برای انواع پیچیده، نام‌های دلخواه تعریف کنیم.

این کار به درد استفاده مجدد و نگهداری راحت‌تر می‌خوره.

در مثال زیر، ما یک نوع سفارشی به اسم Employee داریم که شامل شناسه (id)، نام (name)، نقش (role) و کلید/مقدار بازنشستگی (retire) هست.

وقتی شیء employee رو تعریف می‌کنیم، کامپایلر انتظار داره که این انواع رو داخلش پیدا کنه.

type Employee = {
    readonly id: number,
    name: string,
    role: string,
    retire: (date: Date) => void
}

let employee: Employee = { 
    id: 1,
    name: '',
    role: '',
    retire: (date: Date) => console.log(date)
};

ویژگی‌های TypeScript

Interfaces
Interface یعنی یه نوع قرارداد که مشخص می‌کنه یک شیء باید چه شکلی باشه.

مثلاً من یه interface به اسم IGridData دارم که ساختار شیء رو مشخص می‌کنه.

حالا هر شیئی که این interface رو پیاده‌سازی کنه، باید دقیقا همون ساختاری رو که توی interface گفته، داشته باشه.

interface IGridData {
    [key: string]: string | number;
    name: string;
    companyName: string;
    price: number;
    change: number;
    chgPercent: string;
    mktCap: string;
}

Type Assertion
Type Assertion یعنی وقتی که خودمون می‌خواهیم به TypeScript بگیم نوع یه مقدار چیه. در واقع داریم بهش می‌گیم که ما مطمئنیم این مقدار چه نوعیه و نوع پیش‌فرض رو نادیده می‌گیریم.

مثلاً اگه بدونیم یه مقدار، یه المان HTML هست، می‌تونیم با استفاده از کلمه as این رو مشخص کنیم.

let phone = document.getElementById('phone') as HTMLInputElement;
phone.value;

می‌تونیم به جای as از براکت زاویه‌ای (<>) هم استفاده کنیم. یعنی اینطوری:

let phone = <HTMLInputElement>document.getElementById('phone');
phone.value;

Type Narrowing
با استفاده از union type می‌تونیم نوع متغیر رو محدود کنیم. یعنی می‌تونیم مشخص کنیم که فقط مقادیر خاصی به یه متغیر داده بشه.

مثلاً فرض کن یه آیکون داریم و می‌خواهیم مطمئن بشیم فقط آیکون‌های موجود به متغیرمون نسبت داده بشن.

type Icon = 'blank-template' | '1 Col';
let icon: Icon = '1 Col';

اینجا می‌تونیم مطمئن باشیم که فقط می‌تونیم “blank-template” یا “1 col” رو اعمال کنیم.

چرا باید از TypeScript به جای JavaScript استفاده کنیم؟
همونطور که قبلاً گفته شد، TypeScript یه نسخه گسترده تر از JavaScript هست.

TypeScript از روی JavaScript ساخته شده و چند تا قانون و رفتار مفید بهش اضافه می‌کنه.

TypeScript تایپ استاتیک رو اجباری می‌کنه و اشتباهات مربوط به نوع داده رو در حین توسعه شناسایی می‌کنه. این یعنی TypeScript یه شبکه ایمنی از نوع داده‌ها ایجاد می‌کنه که JavaScript فاقد این ویژگیه و باعث می‌شه خطاهای کمتری در حین تست یا در تولید (production) پیش بیاد.

انوتیشن‌های تایپ باعث می‌شه کد واضح بشه و خوانایی رو بالا می‌بره، مخصوصاً در پروژه‌های بزرگ کیفیت کد بهتر می‌شه.

ابزارهای تحلیل استاتیک TypeScript به شناسایی اشکالات زودتر کمک می‌کنه که این باعث افزایش کیفیت کد و کاهش خطاهای زمان اجرا می‌شه.

پشتیبانی از ابزارها برای TypeScript بیشتره. TypeScript پشتیبانی عالی از ویرایشگرها داره، امکاناتی مثل پیشنهاد خودکار کد، ابزارهایی (refactor و IntelliSense) برای ویرایش راحت‌تر کد و راهنمایی بهتر موقع نوشتن، که باعث می‌شن سریع‌تر و راحت‌تر کار کنی.

نگهداری پروژه‌ها در TypeScript راحت‌تره. با تایپ‌های استاتیک و interface ها، کدهای TypeScript معمولاً به‌مرور زمان قابل نگهداری‌تر از کدهای JavaScript می‌شن. این موضوع مخصوصاً در پروژه‌های بزرگ خودشو نشون می‌ده، چون خوانایی بهتری داره و قراردادهای سخت‌گیرانه‌تری داره.

تنها نکته منفی که قبلاً گفته شد، نیاز به مرحله کامپایل برای تبدیل TypeScript به JavaScript هست.

ولی این نکته منفی در برابر همه مزایای که TypeScript داره، واقعاً چیز خاصی نیست.

در نهایت، با این مزایا راحت میشه فهمید چرا باید از TypeScript به جای JavaScript استفاده کرد. گفته می‌شه که TypeScript برای پروژه‌های متوسط و بزرگ توصیه می‌شه، چون مزایای زیادی در زمینه نگهداری و تایپ استاتیک داره که کمک می‌کنه باگ‌های کمتری پیش بیاد.

خلاصه
در بالا توضیح دادیم که TypeScript چیه؟، انواع TypeScript چطور کار می‌کنه ؟و چرا باید از TypeScript به جای JavaScript استفاده کنیم؟

TypeScript یه superset از JavaScript هست.

ویژگی‌های اضافی مثل چک کردن تایپ استاتیک و بررسی خطاها در زمان کامپایل رو فراهم می‌کنه که در فرآیند توسعه مفیده ، همچنین تکمیل کد و نشانه‌گذاری کوتاه با IntelliSense رو هم ارائه می‌ده.

تنها ایراد TypeScript همون مرحله کامپایل برای تبدیل TypeScript به JavaScript هست.

در نهایت، TypeScript باید برای پروژه‌های متوسط یا بزرگ استفاده بشه چون مزایای زیادی در زمینه نگهداری و تایپ استاتیک داره که باعث می‌شه باگ‌ها کمتر بشه.

مرسی که وقت گذاشتی و این مطلب رو خوندی! امیدوارم برات مفید بوده باشه و کمک کرده باشه بهتر با TypeScript آشنا بشی.😊