انواع مختلف موجود در TypeScript برای افراد مبتدی - شروع کار با TypeScript

دسته بندی: آموزش
زمان مطالعه: 6 دقیقه
۰۹ آذر ۱۳۹۷

فهرست محتوای این مقاله

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

    همونطور که میدونین TypeScript این امکان رو در اختیارتون قرار میده که بتونین برای متغیرهای مختلف، انواع مختلف قرار بدین و ورودی و خروجی‌ها رو با استفاده از اون چک کنید.

    برای شروع کار با TypeScript باید یک Compiler رو بر روی سیستم خودتون نصب کنید و این Compiler با استفاده از npm نصب میشه. برای راهنمای مقدماتی و شروع سریع کار با TypeScript میتونین این لینک رو مطالعه کنید. در نظر داشته باشید که کدهای TypeScript رو باید در فایلهای با پسوند .ts قرار بدین و با استفاده از tsc کدهاتون رو به Javascript کامپایل کنید.

    انواع اولیه یا Primitive

    TypeScript انواع مختلفی مثل string و number و boolean رو پشتیبانی میکنه. برای اینکه نوع یک متغیر رو مشخص کنید، باید بعد از نام متغیر یک : یا colon قرار بدین و بعد از اون نوع مورد نظرتون رو مشخص کنید. مثالهای زیر رو ببینید:

    let isActive: boolean = true;
    let secretToLife: number = 42;
    let firstName: string = 'mohammad';

    TypeScript همچنین در زمانی که دارید متغیر رو برای اولین بار مقداردهی میکنید، متوجه میشه که نوع متغیر چه چیزی هست. مثلا در مثال بالا لازم نیست که firstName رو بصورت String قرار بدیم و همین که یک رشته رو برای متغیر firstName قرار دادیم، TypeScript متوجه میشه که این متغیر از نوع رشته‌ای می‌باشد. بصورت زیر:

    let firstName = 'mohammad';

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

    const sayHello = (name: string) => {
      return `Hello, ${name.trim()}`;
    };

    همونطور که میبینید نوع ورودی name رو string قرار دادیم و هر چیزی جز رشته به تابع sayHello فرستاده بشه، compiler ارور خواهد داد و جلوی اون گرفته میشه.

    با استفاده از TypeScript به راحتی میتونین نوع آرایه‌ها رو مدیریت کنید. فرض کنید که یک آرایه دارید که همه اعضای اون رشته هستند. برای اینکه این نوع رو در TypeScript مشخص کنید در ابتدا string قرار میدیم و بعد از اون یک براکت یا [] قرار میدیم تا مشخص کنیم که یک آرایه ار رشته‌ها مدنظرمون هست. مثال‌های زیر رو ببینید:

    const arrayOfString: string[] = ['a', 'b', 'c'];
    const arrayOfNumbers: number[] = [1, 2, 3];
    const arrayOfBooleans: boolean[] = [false, true];

    استفاده از Interface

    همونطور که میدونین Object یا شئ یکی از اصلی‌ترین موارد موجود در Javascript هست. با استفاده از اشیاء میتونین مجموعه‌ای از اطلاعات رو با استفاده از کلید و ویژگی تعریف کنید. شما با استفاده از interface ها میتونین نوع ویژگی‌های اشیاء رو مشخص کنید. مثلا فرض کنید که یک interface برای محصولات یا Product به وجود بیاریم:

    interface Product {
      id: number;
      name: string;
      price: number;
      url: string;
      active: boolean;
      tags: string[];
      getRoundedPrice: (price: number) => number;
    }

    همونطور که میبینید سینتکس interface ها مثل اشیاء هست. همونطور که میبینید کلمه interface رو قبل از نام Product قرار دادیم. بعد از نام interface هم = رو قرار ندادیم. در آخر هر خط هم اونا رو با , یا کاما جدا نکردیم و از ; یا semicolon استفاده کردیم.

    وقتی که یک تابع رو در interface مشخص میکنید، باید نوع ورودی و نوع خروجی رو مشخص کنید. همونطور که میبینید در تابع getRoundedPrice ورودی و خروجی رو برابر با number قرار دادیم.

    برای مشخص کردن یک آرایه از اشیاء، باید نام interface رو قرار بدین و بعد از اون هم براکت یا [] رو قرار بدین. مثلا اگر بخوایم یک آرایه از Product ها رو تعریف کنیم، بصورت زیر عمل میکنیم:

    const getProductNames = (products: Product[]) => products.map(p => p.name);

    بعضی مواقع پیش میاد که شما بخواید یک interface پایه رو به وجود بیارید و بعد از روی اون چیزای دیگه رو بسازید و اونا رو برای اهداف خاصی مورد استفاده قرار بدین. برای مثال در interface بالا ویژگی‌های اصلی که برای محصولات مورد نیاز هست رو مشخص کردیم. حالا فرض کنید که محصولات ویژه‌ای داشته باشید که علاوه بر داشتن ویژگی‌های اصلی Product، ویژگی‌های خاص دیگه‌ای رو نیز داشته باشه. این کار رو با استفاده از کلمه کلیدی extends انجام میدیم و ویژگی‌های Product رو به ارث خواهد برد.

    فرض کنید که بخوایم یک محصول بنام Computer رو تعریف کنیم. برای اینکار بصورت زیر عمل میکنیم:

    interface Computer extends Product {
      brand: string;
      size: number;
      processor: string;
    }

    با اینکار interface مربوط به Computer همه موارد مربوط به Product رو داره و ویژگی‌های مربوط به خودش رو نیز خواهد داشت.

    با استفاده از extends میتونین کدهای تکراری رو کاهش بدین و حرفه‌ای‌تر کدنویسی کنید.

    انواع null و undefined و union

    شما با استفاده از انواع undefined و null میتونین این انواع رو در TypeScript مشخص کنید. برای اینکار بصورت زیر عمل میکنیم:

    let u: undefined = undefined;
    let n: null = null;

    این دو نوع به تنهایی خیلی کاربردی نیستند اگرچه شما میتونین با استفاده از union نوع‌های مختلف رو با هم ترکیب کنید. union رو بصورت | نشون میدن. مثال زیر رو ببینید:

    let favoriteBook: string | null;

    در این حالت نوع متغیر favoriteBook میتونه هم رشته باشه و هم میتونه null باشه.

    از اونجایی که مقادیر undefined در Javascript متداول هست، یک سینتکس خاص برای ویژگی‌های دلخواه تعریف شده که با استفاده از ? مشخص میکنید که یک ویژگی optional هست. برای اینکار بصورت زیر عمل میکنیم:

    interface Recipe {
      name: string;
      servingSize: number;
      spiceLevel?: number;
    }
    
    const cake: Recipe = {
      name: 'cake',
      servingSize: 8,
    };

    همونطور که میبینید ویژگی spiceLevel دلخواه هست و با اینکه اون رو در شئ cake تعریف نکردیم، هیچ اروری نمایش داده نشده است.

    انواع مخصوص TypeScript

    TypeScript انواعی رو اضافه کرده که در Javascript اصلا وجود ندارند ولی به شما کمک میکنه که کدهای قدرتمندتر و حرفه‌ای‌تر به وجود بیارید.

    Enum:

    با استفاده از Enum میتونین یک map از نام‌ها رو مشخص کنید. مثال زیر رو ببینید:

    enum Key {
      Backspace = 8,
      Tab = 9,
      Enter = 13,
    }
    
    const keyPress = 13 // simulate enter key press
    
    if (keyPress === Key.Enter) {
      // Handle enter being pressed
    }

    Any:

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

    let notSure: any = 4;
    notSure = 'maybe string';
    notSure = false;

    Void:

    void مخالف any هست و مقدار هیچ نوعی رو نداره. void در اکثر مواقع برای توابعی که هیچ چیزی رو return نمیکنند مورد استفاده قرار میگیره. مثال زیر رو ببینید:

    const printName = (name: string) : void => {
      console.log(name);
    };

    این موارد نوع‌های ساده در TypeScript بودند که همه افرادی که میخوان کار با TypeScript رو شروع کنند، باید بلد باشند. در آینده مطالب پیشرفته‌تری رو برای تایپ‌اسکریپت در اختیارتون قرار میدم.

    نویسنده
    بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

    نظرات کاربران

    علی رضوی

    با عرض سلام چرا شما اموزش جاوا اسکریپت مثل typescript
    js E6
    javascript E5
    React
    Angular 4
    React Netive

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

    محمد اسفندیاری

    شما لطف دارید ولی فعلا به دلیل کمبود زمان، امکانش نیست
    در سایت 7learn مقالاتی رو برای ES6 و ES7 بصورت نوشته قرار دادم و میتونه کمکتون کنه.
    موفق باشید

    ارسال دیدگاه
    خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

     
    گزارش مشکل