آموزش جامع تایپ اسکریپت | بخش اول – راه اندازی اولین پروژه تایپ اسکریپت
نصب تایپ اسکریپت
تایپ اسکریپت را در مقاله معرفی سری آموزش 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 آشنا می شویم.
سلام
منتظر وعده ای که در گروه های انگولاری دادید هستیم — امیدوارم آموزش های خوبی باشن
در ضمن یه پیشنهاد دارم کارد هایی که ساختید بسیار بزرگن با تیترهای بزرگ ، باید شیش متر فاصله بگیریم از مانیتور تا بخونیمشون
یه ار تفاع ثابت هم بهشون بدید که یکی بالا یکی پایین نباشه
تشکر
سلام
آموزش ها در حال ساخت است با روشی تازه و متفاوت
ممنون بابت نکته ای که اشاره کردید حتما درست می شود