در بخش گذشته به مقدمه و معرفی اولیهی زبان قدرتمند تایپ اسکریپت پرداختیم. سپس مباحث مربوط به انواع داده و سینتکس و ساختار تعریف آنها را بررسی کردیم. در این جلسه به توضیح دقیق کلاس ها در TypeScript و همچنین متدها، سازندهها، ویژگیها و مفاهیم ارثبری میپردازیم تا پروندهی زبان تایپ اسکریپت را در حد کار با انگولار ۲ به اتمام برسانیم.
کلاس ها در TypeScript
در جاوا اسکریپت ES5 برنامهنویسی شیءگرایی با استفاده از اشیاء مبتنی بر نمونه اولیه (prototype-base) اجرا میشد. این مدل بهجای استفاده از کلاسها از نمونههای اولیه استفاده میکرد. روشهای بسیار مطلوبی توسط انجمن جاوا اسکریپت برای جبران کمبود کلاسها اجرا شده است. بسیار از این نمونههای موفق را میتوانید در آدرس Mozilla Developer Network’s JavaScript Guide دریافت کنید. با این حال ES6 بر مبنای کلاسها ایجاد شد.
برای تعریف کلاس ها در TypeScript از کلمهی کلیدی class استفاده و پس از آن نام کلاس آورده میشود:
کلاس ها در TypeScript ممکن است ویژگیها (properties)، متدها (methods) و سازندهها (constructors) داشته باشند.
ویژگیها (properties)
ویژگیها دادههای متصل به یک نمونه از کلاس را تعریف میکنند. برای مثال، یک کلاس با نام Person را درنظر بگیرید که ویژگیهایی مانند first_name و last_name و همچنین age داشته باشد. هر یک از این ویژگیها میتوانند به صورت دلخواه نوع مشخصی داشته باشند. مثلا میتوان اطلاع داد که ویژگیهای last_name و first_name از نوع string هستند و ویژگی age از نوع number.
برای تعریف کلاس Person از کلاس زیر استفاده میکنیم:
متدها (Methods)
متدها همان توابع هستند که داخل یک شیء اجرا میشوند. برای فراخوانی یک متد روی یک شیء باید ابتدا یک نمونه از آن شیء در اختیار داشته باشید. برای ایجاد یک نمونه از یک کلاس از کلمهی کلیدی new و ترکیب آن با نام کلاس به همراه پرانتز به صورت new Person() استفاده میشود.
مثلا اگر ما بخواهیم یک متد به کلاس Person در مثال قبل با عنوان greet (خوشآمد گویی) اضافه کنیم به صورت زیر عمل خواهیم کرد:
توجه دارید که برای دستیابی به ویژگی first_name در کلاس جاری Person باید از کلمهی کلیدی this استفاده کرد.
برای اینکه بتوانید از متد greet استفاده کنید باید ابتدا یک نمونه از کلاس Person ایجاد نمایید. به مثال زیر توجه کنید:
توجه داشته باشید که برای سهولت کار میتوان تعریف متغییر و ایجاد یک شیء جدید از کلاس Person را در یک خط انجام داد:
سازندهها (Constructurs)
یک سازنده (constructor) در واقع یک متد ویژه است که در ابتدای ساخت یک شیء جدید از کلاس، ایجاد میشود. معمولا سازندهها برای مقداردهی اولیه کلاسها مورد استفاده قرار میگیرند. متدهای سازنده باید با عنوان constructor در کلاس ایجاد شوند. آنها میتوانند پارامترهایی را به عنوان ورودی دریافت کنند اما هرگز نمیتوانند مقداری را برگشت دهند (Return ندارند). بنابراین آنها بیشتر مواقع برای مقداردهی اولیه مورد استفاده قرار میگیرند.
اگر برای کلاس خود سازندهای ایجاد نکنیم، به هنگام ساخت یک شیء جدید از آن کلاس، سازنده به صورت خودکار ساخته میشود:
سازندهها میتوانند پارامترهایی را به عنوان ورودی دریافت کنند و هنگام ساخت شیء از روی کلاس باید پارامترهای ورودی به شیء ساخته شده متصل شوند. به عنوان مثال در کلاس Person سازنده ما دارای سه ورودی first_name و last_name و age است:
برای استفاده از این کلاس به صورت زیر عمل میکنیم:
ارثبری
یکی از مهمترین مفاهیم موجود در برنامهنویسی شیءگرایی استفاده از مفهوم ارثبری است. ارثبری راهی برای دریافت برخی از خصوصیات کلاسهای فرزند از کلاسهای والد است. بنابراین ما میتوانیم به بازنویسی و اصلاح و یا تغییر کلاسهای جدید با رفتارهای به ارث برده شده بپردازیم.
زبان تایپ اسکریپت به صورت کامل مفاهیم ارثبری را پشتیبانی میکند. چون هستهی تایپ اسکریپت نیز از ارثبری استفاده کرده است. برای به ارثبردن خصوصیات یک کلاس از کلاس دیگر از کلیدواژهی extends استفاده میشود.
به عنوان مثال یک کلاس Report ایجاد میکنیم:
در کلاس Report یک ویژگی به نام data از نوع آرایه رشتهای داریم. هنگامیکه متد run فراخوانی میشود برای تک تک المانهای data مقدار در خروجی console نمایش داده میشود.
بنابراین برای نمایش خروجی این کلاس از دستور زیر استفاده میکنیم:
خروجی کنسول شما دو مقدار Roxo.ir و ask.Roxo.ir را به شما نمایش میدهد.
حال ما یک کلاس با نام TabbedReport ایجاد میکنیم که خصوصیات و رفتار موجود در کلاس Report را به ارث ببرد، بنابراین داریم:
بنابراین برای استفاده از کلاس نیز داریم:
کاربردپذیر بودن
ES6 و زبان تایپ اسکریپت تعدادی سینتکس دارند که استفاده از آنها را لذتبخش کرده است. دو سینتکس مهم آنها عبارتند از:
- سینتکس <= برای توابع
- قالب رشتهها یا template string
سینتکس <= برای توابع
علامت <= به عنوان یک اختصار برای نوشتن توابع مورد استفاده قرار میگیرد. در ES5، برای استفاده از یک تابع باید کلمهی function به همراه { } استفاده کرد. به عنوان مثال:
حال در ES6 و TypeScript میتوان از سینتکس <= استفاده نمود و تابع بالا را به صورت زیر خلاصه کرد:
همچنین از سینتکس <= میتوان برای یک عبارت (expression) نیز استفاده کرد:
یا به عنوان یک جمله مانند:
از ویژگیهای بارز و مهم سینتکس <= به اشتراکگذاری عبارت this در تمام کد است. هنگامیکه یک تابع را در جاوا اسکریپت ایجاد کنید این ویژگی مهم و متفاوت رخ خواهد داد. یعنی هنگامیکه معمولا شما یک تابع در جاوا اسکریپت ایجاد میکنید آن تابع درون خودش نیز با this قابل دسترس خواهد بود. در جاوا اسکریپت گاهی اوقات به کدهایی مشابه کد زیر برخورد کردهاید:
با استفاده از سینتکس <= میتوان عبارت this را در سرتاسر کد مورد استفاده قرار داد:
استفاده از رشتهها در قالبها
در ES6 و تایپ اسکریپت رشتهها را میتوان داخل قالبها و تگهای html تعریف کرد. دو ویژگی مهم رشتهها در قالبها به شرح زیر است:
- متغییرها درون عبارتهای رشتهای
- رشتههای چندخطی
متغییرها درون عبارتهای رشتهای
این ویژگی با عنوان «درج یا الحاق رشته» یا به اصطلاح string interpolation معرفی میشود. بدین معنیست که شما میتوانید متغییرها را درون عبارتهای رشتهای مورد استفاده قرار دهید. در اینجا چند نمونه آورده شده است:
رشتههای چندخطی
ویژگی بسیار جالب و مهم استفاده از علامت بک تیک یا backtick استفاده از هر رشته درون یک خط مجزا به همراه استفاده از تگهای html است:
در طی آموزشهای مربوط به بخش ۲-۱ و ۲-۲، مفاهیم اولیه و مقدماتی زبان قدرتمند تایپ اسکریپت را بررسی کردیم. همانطور که ملاحظه فرمودید این زبان ساختاری بسیار منسجم و منظم دارد و کار آن به سادگی هر چه تمام میباشد. هیچ ضرری نکردید! یک زبان قدرتمند با پشتیبانی گوگل و ماکروسافت قطعا آیندهی درخشانی خواهد داشت. پس از مطالعهی این دو بخش به انگولار باز خواهیم گشت و آموزشهای اساسی و اصولی انگولار را از سر میگیریم. با ما همراه باشید.
برای افزایش تمرکز کاربران عزیز و جلوگیری از طولانی شدن مطالب، هر بخش را به قسمتهای کوچکتری تبدیل کردهایم. در لیست زیر تمام بخشها و زیربخشهای آموزشی مجموعهی انگولار ۲ در اختیار شما قرار گرفته است.
توجه: دوستان عزیز آموزش ویدیویی انگولار ۵ از مقدماتی تا پیشرفته به زبان فارسی را میتوانید با کلیک روی اینجا یاد بگیرید. (این دوره در حال برگزاری است)
فصل ۱
- بخش ۱-۱: معرفی مفاهیم اولیه به همراه آموزش فارسی نصب انگولار ۲
- بخش ۱-۲: برنامهنویسی و اجرای اولین پروژه با انگولار ۲
- بخش ۱-۳: کار با کامپوننتها و ارسال دادهها در انگولار ۲
- بخش ۱-۴: طراحی و برنامهنویسی سایت نظرسنجی با انگولار ۲
- بخش ۱-۵: طراحی پیشرفته سایت نظرسنجی با انگولار ۲
فصل ۲
- بخش ۲-۱: مقدمه و شروع کار با زبان TypeScript
- بخش ۲-۲: کار با کلاسها، متدها، ویژگیها و … در TypeScript
فصل ۳
فصل ۴
- بخش ۴-۱: آشنایی با فرمها (NgForm و NgModel) در انگولار ۲
- بخش ۴-۲: اعتبارسنجی FormBuilder و ngModel در انگولار ۲
فصل ۵
فصل ۶
منبع: روکسو