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



visibility  
mode_comment   ۲

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

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

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

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

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

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

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

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

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

استفاده از Interface

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back

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

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

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

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

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

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

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

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

انواع null و undefined و union

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

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

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

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

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

انواع مخصوص TypeScript

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

Enum:

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

Any:

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

Void:

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

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

comment دیدگاه کاربران
علی رضوی

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

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

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

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.