Warning: Use of undefined constant ‘display_errors’ - assumed '‘display_errors’' (this will throw an Error in a future version of PHP) in /home/h158088/domains/webkar.net/public_html/wp-config.php on line 163

Warning: Use of undefined constant ’Off’ - assumed '’Off’' (this will throw an Error in a future version of PHP) in /home/h158088/domains/webkar.net/public_html/wp-config.php on line 163

Warning: Use of undefined constant ‘WP_DEBUG’ - assumed '‘WP_DEBUG’' (this will throw an Error in a future version of PHP) in /home/h158088/domains/webkar.net/public_html/wp-config.php on line 165

Warning: Use of undefined constant ‘WP_DEBUG_DISPLAY’ - assumed '‘WP_DEBUG_DISPLAY’' (this will throw an Error in a future version of PHP) in /home/h158088/domains/webkar.net/public_html/wp-config.php on line 166

Warning: Use of undefined constant KNAPI_FILE - assumed 'KNAPI_FILE' (this will throw an Error in a future version of PHP) in /home/h158088/domains/webkar.net/public_html/wp-content/plugins/kavenegarapi/kavenegarapi.php on line 23
آموزش جامع تایپ اسکریپت | بخش اول - راه اندازی اولین پروژه تایپ اسکریپت | وبکار

آموزش جامع تایپ اسکریپت | بخش اول – راه اندازی اولین پروژه تایپ اسکریپت

نصب تایپ اسکریپت

 

تایپ اسکریپت را در مقاله معرفی سری آموزش typescript تعریف کردیم و می خواهیم حالا روی سیستم خودمان نصب و راه اندازی کنیم. قبل از شروع جهت کار با npm (سیستم مدیریت پکیج های نود) باید nodejs در سیستم شما نصب باشد. برای دانلود طبق سیستم عامل خود به وب سایت nodejs  مراجعه کنید و آن را در سیستم خود نصب کنید. برای اطمینان از اینکه نصب شده است در محیط ترمینال سیستم خود به صورت زیر عمل کنید:


# node --version
v10.13.0

# npm --version
6.4.1

ورژن دانلودی شما ممکن است فرق کند اما باید خروجی به همین شکل باشد که ورژن نود و  npm  را چاپ کند. بعد از آن تایپ اسکریپت را به صورت عمومی (global) در سیستم خود نصب کنید:



# npm install -g typescript
//جهت دیدن ورژن نصب شده تایپ اسکریپت
# tsc -v
Version 3.4.5

من در این سری از آموزش ها از (Visual Studio Code (VsCode به عنوان ادیتور خودم استفاده می کنم و شما می توانید از هر کدام که خواستید استفاده کنید. این ادیتور به طور پیش فرض از تایپ اسکریپت پشتیبانی می کند و بسیار سبک و عالی برای کار است.

 

ساخت اولین فایل ts

 

یک فایل با پسوند ts درست کنید(greeter.ts). و آن را با ادیتور خود باز کنید. در این فایل تایپ اسکریپت فعلا کد جاوا اسکریپت می نویسیم که هم ببینید به درستی اجرا می شود و هم اینکه فرق بین آن را با نسخه پیشرفته تر آن یعنی تایپ اسکریپت ببینید.


function greeter(person) {
    return "Hello, " + person;
}

let user = "John";

document.body.innerHTML = greeter(user);

کامپایل typescript

برای کامپایل این فایل در ترمیتال سیستم خود وارد پوشه مورد نظر شوید یا توسط ترمینال تعبیه شده در vscode  دستور زیر را تایپ کنید:


tsc greeter.ts

گرچه هیچ بازخوردی در ترمینال مشاهده نمی کنید اما کامپایلرِ تایپ اسکریپت کدها را گرفته و در یک فایل با فرمت js به صورت جاوا اسکریپت ذخیره می کند. اگر فایل js

را باز کنید می بینید که دقیقا به همان صورت فایل ts  است و این به این خاطر است که در فایل ts کدها را به صورت جاوا اسکریپت نوشتیم.

برای مشاهده نتیجه کار شما می توانید یک فایل با فرمت html درست کنید و فایل js  تولید شده را به آن اضافه کنید: index.html

 





    
    
    
    


    <script src="greater.js"></script>



و این فایل را با مرورگر خود باز کنید می بینید Hello John  چاپ شد است.

بازنویسی کد با ویژگی ts

حالا وارد مبحث اصلی تایپ اسکریپت میشم و کم کم با قابلیت و ویژگی های آن آشنا می شویم. این ویژگی ها را به صورت منظم در مقالات آتی بررسی می کنیم، اما برای نمونه کد پیشین را به صورت بهتر به این صورت می نوسیم:

 


function greeter(person: string) {
    return "Hello, " + person;
}

let user = "John";

document.body.innerHTML = greeter(user);

تغییری که ما ایجاد کردیم اضافه کردن تایپ به پارامتر person است.  به این صورت که می گویم این پارامتر از نوع string  می باشد. حالا اگر به غیر string به تابع ()greater آرگومانت دیگری پاس دهیم موقع کامپایل به خطا برمی خوریم.(اگر از ادیتور vscode یا هر ادیتوری که از تایپ اسکریپت پشتیبانی می کند استفاده کنید به محض اشتباه کردن در تعریف متغیر به شما خطا نشان می دهد).

در مقاله بعد با با انواع تایپ در typescript  آشنا می شویم.

Aboutخالد رستم پور
Front-end Developer | Cross-Platform Developer | UI/UX Developer

Comments (02)

  1. حسین
    آگوست 9, 2019

    سلام
    منتظر وعده ای که در گروه های انگولاری دادید هستیم — امیدوارم آموزش های خوبی باشن
    در ضمن یه پیشنهاد دارم کارد هایی که ساختید بسیار بزرگن با تیترهای بزرگ ، باید شیش متر فاصله بگیریم از مانیتور تا بخونیمشون
    یه ار تفاع ثابت هم بهشون بدید که یکی بالا یکی پایین نباشه

    تشکر

    Reply
    • آگوست 29, 2019

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

      Reply

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *