اشتراکها
Bootstrap 4.1 منتشر شد
اشتراکها
معرفی MVC 6 Cache Tag Helper
دیت پیکرهای گوناگونی توسط افراد مختلف نوشته شدهاند که هر یک مشکلات خاص خود را دارند. در این مطلب به چگونگی استفاده از یکی از سازگارترین دیت پیکرهای جاوا اسکریپتی که توسط آقای امیرمسعود ایرانی نوشته شده است در Blazor خواهیم پرداخت.
حال برای استفاده از دیت پیکر در کامپوننتها از تگ input به شکل زیر استفاده میکنیم:
Id آن مهم است زیرا توسط آن به تابع جاوااسکریپتی معرفی میشود. میتوان هر اسمی را اختیار کرد فقط بهتر است تمامی دیت پیکرهای موجود در صفحه یک اسم داشته باشند اما با ایندکسهای مختلف مانند pcal1، pcal2 و ... . دلیل آن این است که میتوان تمامی دیت پیکرهای را توسط یک حلقه به تابع مربوطه معرفی کرد.
حال فقط کافیست اسکریپت CallAmib را ایجاد کرده و به _layout اضافه نمود.
بنابراین فایل _layout برنامه الان چیزی شبیه به زیر خواهد بود:
تا اینجای کار اگر پروژه را اجرا کنیم، دیت پیکری مانند زیر را خواهیم داشت: مشکل!!
توضیحات اسکریپت بالا:
این تابع بایستی با صفت [JSInvokable] مزین شود و حتما هم استاتیک باشد.
مهمترین ویژگی این دیت پیکر امکان ورود تاریخ به صورت دستی توسط کاربر است.
فرمتهای قابل قبول برای ورود تاریخ عبارتند از:
۹۰۰۸۱۴ ۱۴۰۸۹۰ ۱۳۹۰۰۸۱۴ ۱۴/۸/۹۰ ۹۰/۸/۱۴ ۱۴/۸/۱۳۹۰ ۱۳۹۰/۸/۱۴ ۱۴-۸-۹۰ ۹۰-۸-۱۴ ۱۴-۸-۱۳۹۰ ۱۳۹۰-۸-۱۴
و فرمتهای ویژه:
۰۸۱۴ ۱۴۰۸ ۱۴-۸ ۸-۱۴ ۱۴/۸ ۸/۱۴ ۱۴
در فرمتهای ویژه که سال و ماه وارد نشدهاند، سال و ماه فعلی به حساب خواهد آمد.
در فرمتهایی که سال مشخص نشده باشد، دو رقم ابتدایی در صورت امکان روز محاسبه خواهند شد.
بنابراین قادر خواهیم بود که در خروجی یک فرمت استاندارد داشته باشیم حتی با فرمتهای مختلفی که کاربر وارد خواهد کرد.
روش به کارگیری تقویم در Blazor
در ابتدا فایلهای مورد نیاز را دانلود کرده (AMIB_jsPersianCal_0.2.1.rar) و به پروژه اضافه میکنیم.
سپس به _layout رفته و ارجاعات زیر را برای افزودن فایلهای css و js به پروژه اضافه میکنیم:
<link href="css/js-persian-cal.css" rel="stylesheet"/>
<script src="js/js-persian-cal.min.js"></script>
<input type="text" id="pcal1" />
همانطور که میدانید برای استفاده از توابع جاوا اسکریپتی در Blazor از JSRuntime استفاده میشود. بنابراین به شکل زیر عمل خواهیم کرد.
protected override async Task OnAfterRenderAsync(bool firstRender) { int dateFieldCount = 1; if (firstRender) { for (int i = 1; i <= dateFieldCount; i++) { await JsRuntime.InvokeVoidAsync("CallAmib", "pcal" + i.ToString()); } } }
توسط حلقه for تمامی تگهای input موجود در کامپوننت را که Id آنها با pcal شروع میشود به دیت پیکر تبدیل خواهیم نمود. فقط مقدار متغیر dateFieldCount را باید به تعداد تگهای دیت پیکر موجود در کامپوننت تنظیم نمود.
لازم به ذکر است که باید در ابتدای کامپوننت، JSRuntime را به شکل زیر تزریق نمود.
@inject IJSRuntime JsRuntime
window.CallAmib = (objCal1) => { new AMIB.persianCalendar(objCal1); }
@using Microsoft.AspNetCore.Components.Web @namespace ShamsiDatePickerBlazor.Pages @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <base href="~/" /> <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /> <link href="css/site.css" rel="stylesheet" /> <link href="css/js-persian-cal.css" rel="stylesheet" /> <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" /> </head> <body> @RenderBody() <div id="blazor-error-ui"> <environment include="Staging,Production"> An error has occurred. This application may no longer respond until reloaded. </environment> <environment include="Development"> An unhandled exception has occurred. See browser dev tools for details. </environment> <a href="">Reload</a> <a>🗙</a> </div> <script src="js/js-persian-cal.min.js"></script> <script src="js/CallAmib.js"></script> <script src="_framework/blazor.server.js"></script> </body> </html>
مشکل!!
برای بایند کردن مقدار تاریخ انتخاب شده نمیتوان از bind-value به طور معمول استفاده کرد؛ زیرا در حقیقت تغییرات input با جاوا اسکریپت انجام میگیرد و حالت صفحه تغییری نمیکند. برای مرتفع کردن این مشکل نیاز است که در اسکریپت CallAmib متد onchange به شکل زیر صدا زده شده و مقدار تاریخ انتخابی به یک متد داخل کامپوننت ارسال گردیده و در آنجا به یک فیلد منتسب شود.
window.CallCall = (objCal1) => { new AMIB.persianCalendar(objCal1,{ onchange: function(pdate) { DotNet.invokeMethodAsync('ShamsiDatePickerBlazor', 'DateChanged', pdate.toString()).then( (date) => { console.log(data); } ); } }); }
متغیر pdate به صورت توکار مربوط به AMIB.persianCalendar می باشد و مقدار تاریخ انتخابی را در بر دارد.
متد DotNet.invokeMethodAsync یک متد توکار دات نت میباشد و برای فراخوانی متدهای سی شارپی از داخل توابع جاوا اسکریپتی به کار میرود. آرگومان اول آن در حقیقت نام اسمبلی پروژه میباشد. آرگومان دوم آن نام تابع سی شارپیاست که باید فراخوانی شود و در نهایت آرگومان سوم آن تاریخ انتخاب شده میباشد.
در پایان باید متد DateChanged، به شکل زیر در کامپوننت index نوشته شود:
static string selectedDate; [JSInvokable] public static void DateChanged(string pdate) { selectedDate = pdate; }
برای دیدن مقدار جدید selectedDate کافی است روی دکمه ShowNewValue یکبار کلیک نمایید.
نکته: میتوان به جای input، از InputText مربوط به EditForm هم استفاده نمود. فقط باید یک Id هم به آن انتساب داد. همچنین برای انتساب مقدار دیت پیکر به مدل، باید در متد DateChanged، فیلد مورد نظر از مدل را بجای متغیر selectedDate گذاشت.
شما میتوانید در اینجا کدهای کامل این مطلب را ملاحظه نمایید.
A free data masking and/or anonymizer library for Sql Server written in .NET
If you've ever needed to pull down databases from a live environment to stage or even dev you'll need to think about masking any personal information. There are options out there paid and free, however the free ones I've found do not provide genuine data and the paid options are too pricey when it's only a few tables.
در این حالت حالت توسعه برخی مواقع حین build پروژه ممکن است با خطای:
مواجه شوید که علتش طولانی شدن پروسهی build هست.برای رفع این مشکل در نگارش جدید بستهی نیوگت Microsoft.AspNetCore.SpaServices.Extensions میتوان این زمان پیش فرض را حین توسعه تغییر داد.
System.TimeoutException: The Angular CLI process did not start listening for requests within the timeout period of 50 seconds.
app.UseSpa(spa => { spa.Options.SourcePath = "ClientApp"; if (env.IsDevelopment()) { spa.Options.StartupTimeout = new TimeSpan(0, 0, 80); spa.UseAngularCliServer(npmScript: "start"); } });
- انجام عملی بعد از Resize شدن کامل window | mojtabasahraei.blogfa.com
- دسترسی قانونی و تقریباً رایگان به MSDN با استفاده از BizSpark | blog.afsharm.com
- نسخهٔ دوم صفحهکلید استاندارد فارسی ویندوز | persianlanguage.ir
- .NET 4.5 now includes the core AntiXSS functions | idunno.org
- .NET Gets a New Lease of Life | www.ciprianjichici.ro
- A few facts about Microsoft’s new Windows Runtime | www.itwriting.com
- Anders Hejlsberg Session on C#/VB Future Directions | www.cookcomputing.com
- BUILD keynote day 1–Metro experience with Jupiter, XAML and HTML5/JS | davidburela.wordpress.com
- BUILD keynote day 2–Windows Server 8 and developer tools | davidburela.wordpress.com
- Is the iTextSharp DLL free to use and redistribute with my web application project? | stackoverflow.com
- Microsoft Build: Developer topics to watch | www.zdnet.com
- Microsoft codename 'Redhawk' lives... in Windows 8 | www.zdnet.com
- Microsoft splits up its XAML team: What's the fallout? | www.zdnet.com
- More on Microsoft 'Jupiter' and what it means for Windows 8 | www.zdnet.com
- Paint.NET v3.5.9 Beta (build 4278) is now available | blog.getpaint.net
- Premature cries of Silverlight / WPF skill loss. Windows 8 supports all programming models | davidburela.wordpress.com
- RMS: 'Is Android Really Free Software?' | rss.slashdot.org
- Silverlight Developers Have the Smoothest Road to Metro | www.softinsight.com
- What’s new in WCF 4.5? Configuration tooltips and intellisense in config files | blogs.microsoft.co.il
حدود یک سال قبل کامپیوتری را که داشتم (اینتل پنتیوم 4) به یک AMD دوهستهای ارتقاء دادم و هفتهی اول پس از ارتقاء، روزگار من سیاه شد! روزهای اول 2 بار کرش ویندوز و مشاهده صفحه آبی و روزهای بعد تا 7 بار این اتفاق تکرار میشد. حتی تا تعویض مادربرد جدید هم پیش رفتم ولی تاثیری نداشت. تست رم و غیره هم انجام شد، مشکلی نبود. خلاصه اینجا بود که از سر ناچاری به این فکر افتادم که آیا این پیغامهای صفحهی آبی ویندوز را میشود تفسیر کرد؟ مشکل دقیقا از کجاست؟ چون در این موارد به هر کسی که مراجعه کنید بر اساس تجربه قبلی یک نسخه برای شما خواهد پیچید. رمت خرابه! بایوست رو ارتقاء بده! (این مورد تاثیر داشت! ولی تعداد کرشها صفر نشد) مادربردت مشکل داره و ...
تمام اینها بر اساس تجربیات قبلی این افراد است و ارزشمند. ولی آیا این جوابها قانع کننده هستند؟ چرا باید رم را عوض کرد؟ از کجا فهمیدید مادربرد مشکل داره؟
شرکتهایی مثل apple برای اینکه با این نوع مشکلات مواجه نشوند، به صورت انحصاری با تولید کنندگان سخت افزار قرار داد میبندند و در نتیجه سیستم عاملی هم که تولید میکنند بسیار پایدار خواهد بود چون بر اساس سخت افزاری کاملا مشخص، طراحی و تست شده است. اما در مورد ویندوز اینطور نیست.
ضمنا هیچ الزامی هم ندارد که این صفحه آبی ویندوز بدلیل مشکلات سخت افزاری حاصل شود (وجود سخت افزار معیوب). ضعف برنامه نویسی و خصوصا درایورهای مشکل دار هم میتوانند سبب ایجاد این نوع صفحات آبی شوند که مشکل من هم دقیقا همین مورد بود که در ادامه نحوه بررسی آنرا توضیح خواهم داد. (البته سطح این مطلب را مقدماتی در نظر بگیرید)
در ویندوز این امکان وجود دارد که پس از هر بار کرش سیستم عامل و مشاهده صفحه آبی یک دامپ کرنل نیز به صورت خودکار حاصل شود. این فایل دامپ را میتوان پس از راه اندازی مجدد سیستم با یک سری ابزار آنالیز کرد و علت دقیق کرش ویندوز را بدست آورد.
برای اینکه این فایلهای دامپ تولید شوند باید مراحل زیر مطابق تصویر طی شوند:
اکنون بعد از هر کرش و صفحه آبی ویندوز یک فایل دامپ در دایرکتوری C:\WINDOWS\Minidump تشکیل میشود. برای آنالیز این فایلها به صورت زیر میشود عمل کرد:
ابتدا برنامه زیر را دانلود کنید:
Debugging Tools for Windows
پس از نصب، Debugging Tools for Windows را خواهید داشت که جهت دیباگ کردن سیستم و آنالیز فایلهای دامپ و غیره کاربرد دارد.
سپس مطالعه مقاله زیر در مورد نحوه استفاده از این ابزار بسیار مفید است:
http://support.microsoft.com/kb/315263
به صورت خلاصه :
یک فایل bat درست کنید با محتویات زیر و دقیقا به همین شکل:
c:\windbg\kd -y srv*c:\symbols*http://msdl.microsoft.com/download/symbols -i c:\windows\i386 -z %1
در این دستور سه مورد قابل ملاحظه است:
الف) مسیر فایل kd.exe که توسط پکیج Debugging Tools for Windows نصب میشود. (مطابق سیستم خودتان آنرا اصلاح کنید)
ب) مسیر c:\windows\i386 بدین معنا است که دایرکتوری i386 سی دی ویندوز را در این مسیر کپی کردهاید یا خواهید کرد (نیاز به یک ویندوز تر و تازه و نصب نشده خواهد بود).
ج) مسیر c:\symbols خودبخود ایجاد خواهد شد و فایلهای مربوطه از سایت مایکروسافت توسط برنامه kd.exe دانلود میشود (بنابراین باید دسترسی به اینترنت نیز داشت).
فرض کنید نام این فایل را test.bat گذاشتهاید.
برای آنالیز فایل Mini102607-07.dmp در دایرکتوری مینی دامپ ویندوز (07 در اینجا یعنی هفتمین کرش روز مربوطه!) دستور زیر را در خط فرمان صادر کنید:
test.bat C:\WINDOWS\Minidump\Mini102607-07.dmp
نتیجه یک نمونه از این آنالیزهای سیستم من به صورت زیر بود:
BAD_POOL_CALLER (c2)
The current thread is making a bad pool request. Typically this is at a bad IRQL level or double freeing the same allocation, etc.
Arguments:
Arg1: 00000007, Attempt to free pool which was already freed
Arg2: 00000cd4, (reserved)
Arg3: 02060008, Memory contents of the pool block
Arg4: 88b4a118, Address of the block of pool being deallocated
Debugging Details:
------------------
POOL_ADDRESS: 88b4a118
FREED_POOL_TAG: TCPc
BUGCHECK_STR: 0xc2_7_TCPc
CUSTOMER_CRASH_COUNT: 4
DEFAULT_BUCKET_ID: COMMON_SYSTEM_FAULT
PROCESS_NAME: System
LAST_CONTROL_TRANSFER: from 8054a583 to 804f9deb
STACK_TEXT:
ba4f3874 8054a583 000000c2 00000007 00000cd4 nt!KeBugCheckEx+0x1b
ba4f38c4 b043d3ff 88b4a118 00000000 ba4f390c nt!ExFreePoolWithTag+0x2a3
ba4f38d4 b043cca3 883ae760 883ae7f4 883ae7f4 tcpip!TCPClose+0x16
ba4f390c b02f3161 8a74fe20 883ae760 b02f2a6d tcpip!TCPDispatch+0x101
WARNING: Stack unwind information not available. Following frames may be wrong.
ba4f3984 b03e2046 00000001 00000000 ba4f39d8 vsdatant+0x45161
ba4f39d8 b03e921c 00000008 ba4f3aac 00000000 ipnat!NatpRedirectQueryHandler+0x250
ba4f3a70 00000000 8837d8e8 0000000d 000005ee ipnat!NatpDirectPacket+0xd2
STACK_COMMAND: kb
FOLLOWUP_IP:
vsdatant+45161
b02f3161 ?? ???
SYMBOL_STACK_INDEX: 4
SYMBOL_NAME: vsdatant+45161
FOLLOWUP_NAME: MachineOwner
MODULE_NAME: vsdatant
IMAGE_NAME: vsdatant.sys
DEBUG_FLR_IMAGE_TIMESTAMP: 46e0766a
FAILURE_BUCKET_ID: 0xc2_7_TCPc_vsdatant+45161
BUCKET_ID: 0xc2_7_TCPc_vsdatant+45161
Followup: MachineOwner
به لاگ حاصل از دو دیدگاه میتوان پرداخت: الف) اگر من برنامه نویس مربوطه باشم، با trace موجود در لاگ فایل، مشخص میشود که کجای کار مشکل داشته است ، ب) یا اینکه خیر. بنده توسعه دهنده درایور نیستم. حداقل اسم دقیق درایور یا پروسه مشکلزا را میتوان از این لاگ بدست آورد.
خوب! تا اینجا مشخص شد که دلیل کرش، درایور vsdatant.sys است. با جستجو در اینترنت مشخص شد که این درایور مربوط به فایروال زون آلارم است! (همین عبارت بالا یا نام درایور ذکر شده را مستقیما در گوگل جستجو کنید)
پس از آن زون آلارم را با outpost firewall جایگزین کردم و تا الان کرشی حاصل نشده است (حتی یکبار از سال قبل تا به امروز). جدا زندگی من مختل شده بود. تصور کنید سیستم شما روزی 7 بار کرش کند!! و چه تصورات نامربوطی را نسبت به فروشنده سخت افزار در ذهن خود مرور کرده باشید!
خلاصهی کلام:
صفحات آبی ویندوز قابل تفسیر هستند. پدید آمدن آنها الزاما بدلیل وجود سخت افزار معیوب نیست و به صرف اینکه شخصی به شما گفته "رمت خرابه!" اکتفا نکنید.
پ.ن.
لاگ فوق مربوط به یک سال قبل است و احتمالا شاید زون آلارمهای جدید این مشکل را نداشته باشند.
تا اینجا «نحوهی نصب و راه اندازی TypeScript را در VSCode» به همراه «تنظیمات کامپایلر TypeScript» و «دریافت فایلهای d.ts. را توسط بستههای NodeJS» بررسی کردیم. در ادامه قصد داریم این تنظیمات را به نگارش کامل VS.NET نیز اعمال کنیم.
به روز رسانی وابستگیهای VS.NET
برای دریافت آخرین نگارش TypeScript نیاز است افزونههای آنرا از سایت رسمی زبان TypeScript دریافت و نصب کرد:
به علاوه نصب افزونهی Web Essentials نیز جهت تکمیل امکانات کار با TypeScript مانند امکان مشاهدهی خروجی جاوا اسکریپت تولیدی، در حین کار با فایل TypeScript فعلی توصیه میشود. همچنین TSLint را نیز نصب میکند.
افزودن فایل تنظیمات tslint
افزونهی Web Essentials که Web Analyzer نیز اکنون جزئی از آن است، به همراه TSLint هم هست که کار آن ارائه راهنماهایی جهت تولید کدهای با کیفیت TypeScript است. گزینههای آنرا در منوی Tools -> Options میتوانید مشاهده کنید:
برای بازنویسی تنظیمات آن (در صورت نیاز) فایل جدیدی را به نام tslint.json به ریشهی پروژه (کنار فایل web.config) اضافه کنید. فایل پیش فرض آن چنین شکلی را دارد:
settings-defaults/tslint.json
و یک نمونهی اصلاح شدهی آن به صورت ذیل است که میتواند به ریشهی پروژه کپی شود:
tslint.json
تنظیمات کامپایلر TypeScript در VS.NET
هرچند قالب افزودن یک پروژهی جدید TypeScript نیز به همراه نصب بستههای TypeScript به لیست پروژههای موجود اضافه میشود، اما عموما نیاز است تا فایلهای ts. را به یک پروژهی وب موجود اضافه کرد. بنابراین، یک پوشهی جدید را به برای مثال به نام TypeScript ایجاد کرده و بر روی آن کلیک راست کنید. سپس گزینهی Add->new item را انتخاب کرده و در اینجا TypeScript را جستجو کنید:
پس از اضافه شدن اولین فایل ts. به پروژه، دیالوگ زیر نیز ظاهر خواهد شد:
در اینجا جستجوی فایلهای d.ts. را پیشنهاد میدهد. فعلا بر روی No کلیک کنید. اینکار را در ادامه انجام خواهیم داد.
پس از افزودن اولین فایل ts. به پروژه، اگر به خواص پروژهی جاری مراجعه کنید، برگهی جدید تنظیمات کامپایلر TypeScript را مشاهده خواهید کرد:
با این تنظیمات در مطلب «تنظیمات کامپایلر TypeScript» پیشتر آشنا شدهاید. برای مثال فرمت خروجی جاوا اسکریپت آن ES 5 باشد و یا در اینجا نوعهای any که به صورت صریح any تعریف نشدهاند، ممنوع شدهاست (تیک پیش فرض آنرا بردارید). نوع ماژولهای تولیدی نیز به commonjs تنظیم شدهاست.
همچنین در اینجا میتوانید گزینهی redirect JavaScript output to directory را هم مثلا به پوشهی Scripts واقع در ریشهی پروژه تنظیم کنید تا فایلهای js. نهایی را در آنجا قرار دهد.
پس از این تنظیمات اولیه، به منوی tools->options مراجعه کرده و گزینهی کامپایل فایلهای ts. ایی را که به solution explorer اضافه نشدهاند، نیز فعال کنید:
اعمال این تنظیمات نیاز به یکبار بستن و گشودن مجدد پروژه را دارد.
فعال سازی کامپایل خودکار فایلهای ts. پس از ذخیرهی آنها
پس از اعمال تغییرات فوق، اگر فایل ts. ایی را تغییر داده و ذخیره کردید و بلافاصله خروجی js. آنرا مشاهده نکردید (این فایلها در پوشهی TypeScriptOutDir تنظیمات ذیل ذخیره میشوند و برای مشاهدهی آنها باید گزینهی show all files را در solution explorer فعال کنید)، فایل csproj پروژهی جاری را در یک ادیتور متنی باز کرده و مداخل تنظیمات تنظیم شدهی در قسمت قبل را پیدا کنید. در اینجا نیاز است مدخل جدید TypeScriptCompileOnSaveEnabled را به صورت دستی اضافه کنید:
پس از این تغییرات بدیهی است یکبار باید پروژه را بسته و مجددا بارگذاری نمائید.
رفع مشکل عدم کامپایل پروژه
زمانیکه افزونههای TypeScript را نصب کنید و تنظیمات فوق را اعمال نمائید، در دو حالت ذخیرهی یک فایل ts و یا کامپایل کل پروژه، فایلهای js تولید خواهند شد. اما ممکن است نگارش نصب شدهی بر روی سیستم شما ناقص باشد و چنین خطایی را در حین کامپایل پروژه دریافت کنید:
اگر این خطا را دریافت کردید، سریعترین راه رفع آن به صورت زیر است:
الف) ابتدا به تمام مسیرهای ذیل (در صورت وجود) مراجعه کرده و پوشهی TypeScript را تغییر نام دهید (یا کلا آنرا حذف کنید):
ب) سپس نصاب افزونهی TypeScript را مجددا اجرا کنید. اینبار گزینهی repair ظاهر میشود. با ترمیم صورت گرفته، مشکل فوق برطرف خواهد شد. این گزینهی repair را در کنترلپنل و قسمت add/remove programs هم میتوانید پیدا کنید (اگر فایل نصاب افزونه را حذف کردهاید).
اصلاح شماره نگارش کامپایلر TypeScript خط فرمان ویژوال استودیو
در فایل C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\Tools\VsDevCmd.bat که مربوط به خط فرمان VS.NET است، شماره نگارش TypeScript به 1.5 تنظیم شدهاست که نیاز به اصلاح دستی دارد؛ برای مثال تنظیم آن به نگارش 1.8 به صورت زیر است:
اگر از VS 2013 استفاده میکنید، چنین تنظیمی در فایل C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\Tools\VsDevCmd.bat آن نیز وجود دارد که به نگارش 1 تنظیم شدهاست و این مورد هم باید اصلاح شود (تنظیمات آن دقیقا مانند تنظیم فوق است).
تداخل ReSharper با شماره نگارش TypeScript نصب شده
برای نمونه اگر بخواهیم از decorators استفاده کنیم، یک چنین خطایی نمایش داده میشود:
هرچند در ابتدای بحث، آخرین نگارش TypeScript برای دریافت معرفی شدهاست، اما پس از نصب آن، ممکن است هنوز خطای استفاده از نگارش قدیمی 1.4 را مشاهده کنید. علت آن به نصب بودن ReSharper بر میگردد:
به منوی ReSharper و سپس گزینهی Options آن مراجعه کنید.
در اینجا میتوان نگارش TypeScript مورد استفاده را تغییر داد. این شمارهها، نگارشهایی هستند که ReSharper از آنها پشتیبانی میکند و نه شمارهای که نصب شدهاست.
و یا حتی میتوان به صورت کامل فایلهای ts را از کنترل ReSharper خارج کرد:
این مورد زمانی مفید خواهد بود که شماره نگارش فعلی TypeScript، از شماره نگارش پشتیبانی شدهی توسط ReSharper بالاتر باشد. در این حالت ممکن است syntaxهای جدید زبان TypeScript را ReSharper به صورت خطا اعلام کند که اشتباه است. بنابراین باید به ReSharper اعلام کرد که از این فایلها صرفنظر کند. برای نمونه در زمان نگارش این مطلب، جهت کار با decorators، حتما نیاز است ReSharper را جهت حذف بررسی فایلهای ts تنظیم کرد و گرنه ذیل کدهای مرتبط، خطوط قرمز نمایش خطا را مشاهده خواهید کرد که با توجه به کامپایلر جدید موجود، بیمورد است.
افزودن فایل tsconfig.json به پروژه
همانطور که در مطلب «تنظیمات کامپایلر TypeScript» نیز مطالعه کردید، روش دیگری نیز برای ذکر تنظیمات ویژهی کامپایلر، خصوصا مواردی که در برگهی خواص پروژه هنوز اضافه نشدهاند، با استفاده از افزودن فایل ویژهی tsconfig.json وجود دارد.
پشتیبانی کاملی از فایلهای tsconfig.json در پروژههای VS 2015 با ASP.Core 1.0 وجود دارد و حتی گزینهای در منوی add->new item برای آن درنظر گرفته شدهاست.
اگر گزینهی فوق را در لیست موارد add->new item پیدا نمیکنید (تحت عنوان TypeScript JSON Configuration File)، مهم نیست. تنها کافی است فایل جدیدی را به نام tsconfig.json به ریشهی پوشهی فایلهای ts خود اضافه کنید؛ با این محتوا:
حتی اگر از VS 2013 هم استفاده میکنید، این فایل توسط کامپایلر tsc شناسایی شده و استفاده میشود. برای آزمایش آن، گزینهای غیرمتعارف را به گزینههای موجود اضافه کرده و سپس پروژه را کامپایل کنید. بلافاصله خطایی را در لیست خطاهای کامپایل پروژه دریافت خواهید کرد.
در اینجا نیازی به استفاده از گزینهی watch نیست و ممکن است سبب بروز خطای JsErrorScriptException (0x30001) شود. قرار است این مشکل در نگارشهای بعدی افزونهی TypeScript مخصوص VS.NET برطرف شود.
افزودن فایلهای d.ts. از طریق نیوگت
به ازای هر کتابخانهی جاوا اسکریپتی معروف، یک بستهی نیوگت تعاریف نوعهای TypeScript آن هم وجود دارد.
یک مثال: فرض کنید میخواهیم فایل d.ts. کتابخانهی jQuery را اضافه کنیم. برای این منظور jquery.typescript را در بین بستههای نیوگت موجود، جستجو کنید:
برای سایر کتابخانهها نیز به همین صورت است. نام کتابخانه را به همراه typescript جستجو کنید.
به روز رسانی وابستگیهای VS.NET
برای دریافت آخرین نگارش TypeScript نیاز است افزونههای آنرا از سایت رسمی زبان TypeScript دریافت و نصب کرد:
به علاوه نصب افزونهی Web Essentials نیز جهت تکمیل امکانات کار با TypeScript مانند امکان مشاهدهی خروجی جاوا اسکریپت تولیدی، در حین کار با فایل TypeScript فعلی توصیه میشود. همچنین TSLint را نیز نصب میکند.
افزودن فایل تنظیمات tslint
افزونهی Web Essentials که Web Analyzer نیز اکنون جزئی از آن است، به همراه TSLint هم هست که کار آن ارائه راهنماهایی جهت تولید کدهای با کیفیت TypeScript است. گزینههای آنرا در منوی Tools -> Options میتوانید مشاهده کنید:
برای بازنویسی تنظیمات آن (در صورت نیاز) فایل جدیدی را به نام tslint.json به ریشهی پروژه (کنار فایل web.config) اضافه کنید. فایل پیش فرض آن چنین شکلی را دارد:
settings-defaults/tslint.json
و یک نمونهی اصلاح شدهی آن به صورت ذیل است که میتواند به ریشهی پروژه کپی شود:
tslint.json
تنظیمات کامپایلر TypeScript در VS.NET
هرچند قالب افزودن یک پروژهی جدید TypeScript نیز به همراه نصب بستههای TypeScript به لیست پروژههای موجود اضافه میشود، اما عموما نیاز است تا فایلهای ts. را به یک پروژهی وب موجود اضافه کرد. بنابراین، یک پوشهی جدید را به برای مثال به نام TypeScript ایجاد کرده و بر روی آن کلیک راست کنید. سپس گزینهی Add->new item را انتخاب کرده و در اینجا TypeScript را جستجو کنید:
پس از اضافه شدن اولین فایل ts. به پروژه، دیالوگ زیر نیز ظاهر خواهد شد:
در اینجا جستجوی فایلهای d.ts. را پیشنهاد میدهد. فعلا بر روی No کلیک کنید. اینکار را در ادامه انجام خواهیم داد.
پس از افزودن اولین فایل ts. به پروژه، اگر به خواص پروژهی جاری مراجعه کنید، برگهی جدید تنظیمات کامپایلر TypeScript را مشاهده خواهید کرد:
با این تنظیمات در مطلب «تنظیمات کامپایلر TypeScript» پیشتر آشنا شدهاید. برای مثال فرمت خروجی جاوا اسکریپت آن ES 5 باشد و یا در اینجا نوعهای any که به صورت صریح any تعریف نشدهاند، ممنوع شدهاست (تیک پیش فرض آنرا بردارید). نوع ماژولهای تولیدی نیز به commonjs تنظیم شدهاست.
همچنین در اینجا میتوانید گزینهی redirect JavaScript output to directory را هم مثلا به پوشهی Scripts واقع در ریشهی پروژه تنظیم کنید تا فایلهای js. نهایی را در آنجا قرار دهد.
پس از این تنظیمات اولیه، به منوی tools->options مراجعه کرده و گزینهی کامپایل فایلهای ts. ایی را که به solution explorer اضافه نشدهاند، نیز فعال کنید:
اعمال این تنظیمات نیاز به یکبار بستن و گشودن مجدد پروژه را دارد.
فعال سازی کامپایل خودکار فایلهای ts. پس از ذخیرهی آنها
پس از اعمال تغییرات فوق، اگر فایل ts. ایی را تغییر داده و ذخیره کردید و بلافاصله خروجی js. آنرا مشاهده نکردید (این فایلها در پوشهی TypeScriptOutDir تنظیمات ذیل ذخیره میشوند و برای مشاهدهی آنها باید گزینهی show all files را در solution explorer فعال کنید)، فایل csproj پروژهی جاری را در یک ادیتور متنی باز کرده و مداخل تنظیمات تنظیم شدهی در قسمت قبل را پیدا کنید. در اینجا نیاز است مدخل جدید TypeScriptCompileOnSaveEnabled را به صورت دستی اضافه کنید:
<PropertyGroup Condition="'$(Configuration)' == 'Debug'"> <TypeScriptModuleKind>commonjs</TypeScriptModuleKind> <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled> <TypeScriptOutDir>.\Scripts</TypeScriptOutDir> <TypeScriptNoImplicitAny>True</TypeScriptNoImplicitAny> <TypeScriptTarget>ES5</TypeScriptTarget> <TypeScriptRemoveComments>false</TypeScriptRemoveComments> <TypeScriptOutFile></TypeScriptOutFile> <TypeScriptGeneratesDeclarations>false</TypeScriptGeneratesDeclarations> <TypeScriptSourceMap>true</TypeScriptSourceMap> <TypeScriptMapRoot></TypeScriptMapRoot> <TypeScriptSourceRoot></TypeScriptSourceRoot> <TypeScriptNoEmitOnError>true</TypeScriptNoEmitOnError> </PropertyGroup>
رفع مشکل عدم کامپایل پروژه
زمانیکه افزونههای TypeScript را نصب کنید و تنظیمات فوق را اعمال نمائید، در دو حالت ذخیرهی یک فایل ts و یا کامپایل کل پروژه، فایلهای js تولید خواهند شد. اما ممکن است نگارش نصب شدهی بر روی سیستم شما ناقص باشد و چنین خطایی را در حین کامپایل پروژه دریافت کنید:
Your project file uses a different version of the TypeScript compiler and tools than is currently installed on this machine. No compiler was found at C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.8\tsc.exe. You may be able to fix this problem by changing the <TypeScriptToolsVersion> element in your project file.
الف) ابتدا به تمام مسیرهای ذیل (در صورت وجود) مراجعه کرده و پوشهی TypeScript را تغییر نام دهید (یا کلا آنرا حذف کنید):
C:\Program Files (x86)\Microsoft SDKs C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v11.0\ C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v12.0\ C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\
اصلاح شماره نگارش کامپایلر TypeScript خط فرمان ویژوال استودیو
در فایل C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\Tools\VsDevCmd.bat که مربوط به خط فرمان VS.NET است، شماره نگارش TypeScript به 1.5 تنظیم شدهاست که نیاز به اصلاح دستی دارد؛ برای مثال تنظیم آن به نگارش 1.8 به صورت زیر است:
@rem Add path to TypeScript Compiler @if exist "%ProgramFiles%\Microsoft SDKs\TypeScript\1.8" set PATH=%ProgramFiles%\Microsoft SDKs\TypeScript\1.8;%PATH% @if exist "%ProgramFiles(x86)%\Microsoft SDKs\TypeScript\1.8" set PATH=%ProgramFiles(x86)%\Microsoft SDKs\TypeScript\1.8;%PATH%
تداخل ReSharper با شماره نگارش TypeScript نصب شده
برای نمونه اگر بخواهیم از decorators استفاده کنیم، یک چنین خطایی نمایش داده میشود:
هرچند در ابتدای بحث، آخرین نگارش TypeScript برای دریافت معرفی شدهاست، اما پس از نصب آن، ممکن است هنوز خطای استفاده از نگارش قدیمی 1.4 را مشاهده کنید. علت آن به نصب بودن ReSharper بر میگردد:
به منوی ReSharper و سپس گزینهی Options آن مراجعه کنید.
ReSharper -> Options -> Code Editing -> TypeScript -> Inspections -> Typescript language level
در اینجا میتوان نگارش TypeScript مورد استفاده را تغییر داد. این شمارهها، نگارشهایی هستند که ReSharper از آنها پشتیبانی میکند و نه شمارهای که نصب شدهاست.
و یا حتی میتوان به صورت کامل فایلهای ts را از کنترل ReSharper خارج کرد:
Tools -> Options -> ReSharper Options -> Code Inspection -> Settings -> File Masks to Skip -> add *.ts
افزودن فایل tsconfig.json به پروژه
همانطور که در مطلب «تنظیمات کامپایلر TypeScript» نیز مطالعه کردید، روش دیگری نیز برای ذکر تنظیمات ویژهی کامپایلر، خصوصا مواردی که در برگهی خواص پروژه هنوز اضافه نشدهاند، با استفاده از افزودن فایل ویژهی tsconfig.json وجود دارد.
پشتیبانی کاملی از فایلهای tsconfig.json در پروژههای VS 2015 با ASP.Core 1.0 وجود دارد و حتی گزینهای در منوی add->new item برای آن درنظر گرفته شدهاست.
اگر گزینهی فوق را در لیست موارد add->new item پیدا نمیکنید (تحت عنوان TypeScript JSON Configuration File)، مهم نیست. تنها کافی است فایل جدیدی را به نام tsconfig.json به ریشهی پوشهی فایلهای ts خود اضافه کنید؛ با این محتوا:
{ "compilerOptions": { "target": "es5", "outDir": "../Scripts", "module": "commonjs", "sourceMap": true, //"watch": true, // JsErrorScriptException (0x30001) //"compileOnSave": true, // https://github.com/Microsoft/TypeScript/issues/7362#issuecomment-196586037 "experimentalDecorators": true, "emitDecoratorMetadata": true } }
در اینجا نیازی به استفاده از گزینهی watch نیست و ممکن است سبب بروز خطای JsErrorScriptException (0x30001) شود. قرار است این مشکل در نگارشهای بعدی افزونهی TypeScript مخصوص VS.NET برطرف شود.
افزودن فایلهای d.ts. از طریق نیوگت
به ازای هر کتابخانهی جاوا اسکریپتی معروف، یک بستهی نیوگت تعاریف نوعهای TypeScript آن هم وجود دارد.
یک مثال: فرض کنید میخواهیم فایل d.ts. کتابخانهی jQuery را اضافه کنیم. برای این منظور jquery.typescript را در بین بستههای نیوگت موجود، جستجو کنید:
برای سایر کتابخانهها نیز به همین صورت است. نام کتابخانه را به همراه typescript جستجو کنید.
نظرات مطالب
خلاصه اشتراکهای روز جمعه 4 آذر 1390
من از یادگیری Silverlight اصلا ضرر نکردم و ناراضی نیستم. طراحی WinRT از بسیاری از جهات شبیه به Silverlight است همچنین دید بهتری نسبت به WPF پیدا کردم. خلاصه همین فردا هم اگر بگن ما سیلورلایت رو دیگه ادامه نمیدیم ... مهم نیست.
ضمنا HTML5 تا سال 2022 کار داره برای پخته شدن. همچنین تهیه ابزارهای مناسب برای توسعه آن، آموزش و غیره. به علاوه مرورگرهایی با پشتیبانی کامل از آن به همراه وفق یافتن سازمانها که همیشه یک تا دو سال به عمد از جریانات روز عقب هستند و همیشه سیستمهای پایدار رو نصب میکنند تا اینکه مثلا هیجان زده هر روز فایرفاکس را به روز کنند. این یک واقعیت سازمانی است.
در کل هدف اصلی Silverlight هیچ وقت توسعه وب سایت نبوده. هدفش توسعه «برنامه»های غنی وب بوده. مثلا عمده کاربرد آن برای مایکروسافت تابحال درست کردن کنترل پنلهای مدیریتی یک سری از برنامههای سرور اصلی خودش بوده مثلا lync server مثلا windows intune و غیره. یکبار مثالش رو در سایت زدم. بگردید هست.
ضمنا HTML5 تا سال 2022 کار داره برای پخته شدن. همچنین تهیه ابزارهای مناسب برای توسعه آن، آموزش و غیره. به علاوه مرورگرهایی با پشتیبانی کامل از آن به همراه وفق یافتن سازمانها که همیشه یک تا دو سال به عمد از جریانات روز عقب هستند و همیشه سیستمهای پایدار رو نصب میکنند تا اینکه مثلا هیجان زده هر روز فایرفاکس را به روز کنند. این یک واقعیت سازمانی است.
در کل هدف اصلی Silverlight هیچ وقت توسعه وب سایت نبوده. هدفش توسعه «برنامه»های غنی وب بوده. مثلا عمده کاربرد آن برای مایکروسافت تابحال درست کردن کنترل پنلهای مدیریتی یک سری از برنامههای سرور اصلی خودش بوده مثلا lync server مثلا windows intune و غیره. یکبار مثالش رو در سایت زدم. بگردید هست.