در این مقاله ما نحوه استفاده از TypeScript در ASP.NET MVC 5 را بجای استفاده از JavaScript بررسی خواهیم کرد. TypeScript را میتوان با هرکدام از برنامه های موجود یا جدید MVC 5 web application استفاده نمود.

Typescript یکی از پرطرفدارترین برنامه های open source است که در حال حاضر در مقیاس وسیع به کار گرفته شده است. البته در این مقاله ما قصد نداریم به اصول اولیه Typescript بپردازیم.

عنوان مقاله بیان کننده جایگزینی (TypeScript (TS بجای JavaScript  می باشد اما نه بصورت 100% است. (TypeScript (TS یک مجموعه فوق العاده JS است که همه چیز را به JS منتقل میکند. استفاده از TS طبیعتا نوع static را افزایش میدهد، در زمان نگارش خطاها یا هشدارها را نمایش میدهد و از مفاهیم OOP، کلاس ها و رابطه ها استفاده میکند.

اکنون با استفاده از TypeScript میتوانید در ASP.NET MVC 5 برنامه های MVC 5  در Visual Studio 2015 یا 2017 ایجاد و استفاده نمایید.

TypeScript را میتوانید از لینک دانلود نصب کنید، که تمام ابزار های VS IDE را دارا است.

tsconfig.json

ما هروقت از TypeScript در ASP.NET MVC 5 (در هر کدام از برنامه های Angular، Ionic، NodeJS، ASP.NET Core) استفاده می کنیم باید فایل tsconfig.json را ایجاد کنیم. این فایل به کامپایلر TS میگوید چه کاری باید با کد TypeScript کامپایل شده انجام شود.

پوشه tsScripts در پروژه های MVC5، tsScripts به عنوان دایرکتوری ریشه برای پروژه های TS عمل میکند. سپس با راست کلیک روی پوشه tsScripts به اضافه کردن فایل های پیکربندی TypeScript میپردازیم.

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",    
    "outDir": "../appScriptsJS"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

TS :outDir خروجی کامپایل شده TS را به JS در پوشه appScriptsJS میفرستد.
Target: ماژول ها بصورت استاندارد es5 هستند.
sourceMap: این فایل به debug کدهای TS در مرورگر کمک میکند.

فایل اول TypeScript: app.ts

تمام فایل های TypeScript با پسوند *.TS مشخص میشوند. فایل TS به نام app.ts در پوشه tsScripts ایجاد کنید. و کد زیر را در آن وارد کنید.

function Welcome(person: string) {
    return "<h2>سلام " + person + "<br /> به وب سایت آموزش TypeScript خوش آمدید.</h2>";
}
 
function ClickMeButton() {
    let user:string = "رضا رضایی";
    document.getElementById("divMsg").innerHTML = Welcome(user);
} 

تابع Welcome با خروجی string را مشاهده نمایید. چه چیز خاصی در آن وجود دارد؟ با کمی نگاه به کد شی به نام person مواجه خواهید شد. که اولین نکته در TypeScript است.

تابع ClickMeButton یک مثال معمول از اضافه کردن رشته HTML به DOM است. توجه کنید user رشته ای است که به متد Welcome منتقل میشود.

سعی کنید رشته را به یک عدد تغییر دهید با یک خط قرمز نشان میدهد که شما نمیتوانید یک عدد را به یک رشته اختصاص دهید.

استفاده از TypeScript در ASP.NET MVC 5

هنگامی که شما برنامه را ایجاد میکنید پوشه appScripts ایجاد میشود.نام و مکان پوشه با توجه به نیاز شما میتواند متفاوت باشد.

اکنون این فایل JS است که ما میتوانیم از آن در فایل های HTML یا cshtml استفاده کنیم. _Layout.cshtml را باز کرده و تگ SCRIPT برای فایل app.js را قرار دهید یا از BUNDLE به این منظور استفاده نمایید.

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/appscripts")
@RenderSection("scripts", required: false)

بصورت فوری از فایل های TS و JS از ساختار پروژه فایل های TS به فایل های JS کامپایل میشوند.

فراخوانی متد TypeScript از HTML

در حال حاضر ما متد JS از ()ClickMeButton را در TypeScript با استفاده از کد زیر در فایل cshtml جدید فراخوانی خواهیم کرد.

<div id="divMsg"></div>
<br />
<button type="button" class="btn btn-primary btn-md" onclick="ClickMeButton()">
    نمایش پیام من
</button>

با کلیک روی "نمایش پیام من" پیام ما در div با شناسه divMsg نمایش داده میشود. برنامه را اجرا نمایید سپس به صفحه مورد نظر بروید. روی دکمه کلیک کنید و نتیجه را مشاهده نمایید.

Debug کردن کد TypeScript

هنگام اجرای برنامه F12 را فشار دهید تا کنسول توسعه را ببنید. به تب sources بروید، پوشه ای به نام tsScripts حاوی فایل app.ts را باز کرده و در قسمت Debugging روی تابع و سپس روی دکمه UI کلیک کنید تا نقطه اشکال زدایی را بدون اشکال مشاهده نمایید.

نتیجه کار مشابه زیر خواهد بود.

آموزش asp.net mvc