در بخش اول اشاره کردیم که چرا باید از TypeScript استفاده کنیم و چطور از TypeScript توسط Node.js استفاده کنیم. در این مقاله قصد داریم تا بررسی کنیم چطور از TypeScript در ویژوال استادیو 2015 به روز رسانی سوم استفاده کنیم.

در ویژوال استادیو نیازی نیست تا شما بخواهید TypeScript را نصب کنید به این خاطر که بصورت پیش فرض برروی ویژوال استادیو قرار گرفته است. همچنین خوشبختانه Intellisense آن هم به خوبی کار می کند.

شما می توانید عکس آن را در زیر مشاهده کنید.

برای استفاده از TypeScript در ویژوال استادیو مراحل زیر را طی کنید:

File -> New -> Project

درست مانند عکس زیر:

اکنون یک پروژه ASP.NET Web Application بسازید و نام آن را TypeScriptProject قرار دهید.

یک قالب برای آن انتخاب کنید و سپس بر روی OK کلیک کنید:

حالا بر روی پروژه کلیک راست کنید و گزینه Add سپس New Item را انتخاب نمایید:

یک فایل TypeScript مانند زیر بسازید:

اگر popup از شما برای TypeScript Typings سوال کرد، بر روی "Yes" کلیک کنید.

الان شما می توانید یک فایل index.ts را باز کنید و کد زیر را در آن بنویسید.  در این مرحله فقط می خواهیم یک پیغام دریافت کنیم. بنابراین کد زیر را می نویسیم:

alert("First TypeScript Program");

مانند بالا یک کد HTML به فایل پروژه اضافه می کنیم.

یک صفحه HTML با نام Index.html مانند عکس زیر می سازیم.

حال شما می توانید فایل index.html را باز نمایید و فایل index.ts را به index.html درگ(Drag) کنید (البته در بخش head کد HTML تان) و ما خواهیم دید که src با نام index.js به جای index.ts قرار گرفته است در تگ script. این اتفاق به این دلیل می افتد که مرورگر نمی تواند فایل .ts را بشناسد و آن تنها جاوا اسکریپت را می شناسد به همین سبب کد شما از TypeScript به جاوا اسکریپت تبدیل می شود.

هرزمان که پروژه را بسازی و فایل TypeScript را ذخیره کنید، مترجم TypeScript فایل .ts شما را ترجمه می کند و فایل جاوا اسکریپت با همان نام می سازد. سپس آن فایل جاوا اسکریپت را در index.html بارگذاری می کند.

زمانی که بر روی ShowAllFiles در بخش SolutionExplorer در نرم افزار ویژوال استادیو کلیک کنیم، شما می توانید همه فایل های پنهان شده و به علاوه فایل جاوا اسکریپت را ببینید.

اکنون زمان این رسیده تا خروجی را مشاهده کنید: