@"<script>alert('xss')</script><div onload=""alert('xss')""" + @"style=""background-color: rgba(0, 0, 0, 1)"">Test<img src=""test.png""" + @"style=""background-image: url(javascript:alert('xss')); margin: 10px""></div>";
- اگر با به روز رسانی وابستگیها، خطای «Invalid module name in augmentation, module '../../Observable' cannot be found» را دریافت کردید، چند نگارش پایینتر rxjs را نیز امتحان کنید.
به علاوه مطمئن شوید که تعاریف typings مناسب را در فایل main.ts ذکر کردهاید:
/// <reference path="../typings/es6-shim.d.ts" /> import { bootstrap } from '@angular/platform-browser-dynamic';
<script src="~/systemjs.config.js"></script>
خطا هنگام ایجاد هدر سفارشی با html
[0] = {"Object reference not set to an instance of an object."} [1] = {"The document has no pages."}
PdfReport pdfrpt = new PdfReport(); pdfrpt.DocumentPreferences(doc => { doc.RunDirection(PdfRunDirection.RightToLeft); doc.Orientation(PageOrientation.Portrait); doc.PageSize(PdfPageSize.A4); doc.DocumentMetadata(new DocumentMetadata { Author = "Hovze", Application = "PdfRpt", Keywords = "Report", Subject = "Test Rpt", Title = "Report" }); doc.Compression(new CompressionSettings { EnableCompression = true, EnableFullCompression = true }); doc.PrintingPreferences(new PrintingPreferences { ShowPrintDialogAutomatically = true }); }) .DefaultFonts(fonts => { fonts.Path(fontPath + "\\BNAZANIN.ttf", fontPath + "\\BNAZNNBD.ttf"); fonts.Size(13); }) .PagesFooter(footer => { footer.DefaultFooter(PersianDate.ToPersianDateTime(DateTime.Now, "/", false, false)); }) .PagesHeader(header => { header.HtmlHeader(rptheader => { rptheader.PageHeaderProperties(new HeaderBasicProperties { RunDirection = PdfRunDirection.RightToLeft, ShowBorder = true }); rptheader.AddPageHeader(pageHeader => { var message = "باسمه تعالی " + "</br>" + "حوزه علمیه امیر المومنین (ع) - معاونت آموزش - کارنامه تحصیلی طلبه"; var image = string.Format("<img src='{0}' />", imgPath); return string.Format(@"<table style='width: 100%;font-size:9pt;font-family:BNAZANIN;'> <tr> <td align='center'>{0}</td> </tr> <tr> <td align='center'><b>{1}</b></td> </tr> <tr> <td align='center'>{2}</td> </tr> </table>", image, message, " تاریخ " + PersianDate.ToPersianDateTime(DateTime.Now.Date, "/", false)); }); }); }) .MainTableTemplate(template => { template.BasicTemplate(BasicTemplate.SilverTemplate); }) .MainTablePreferences(table => { table.ColumnsWidthsType(TableColumnWidthType.Relative); table.NumberOfDataRowsPerPage(0); table.GroupsPreferences(new GroupsPreferences { GroupType = GroupType.HideGroupingColumns, RepeatHeaderRowPerGroup = true, ShowOneGroupPerPage = true, SpacingBeforeAllGroupsSummary = 10f, }); }) .MainTableDataSource(dataSource => { dataSource.DataTable(dt); }) .MainTableSummarySettings(summarySettings => { summarySettings.PreviousPageSummarySettings("نقل از صفحه قبل"); }) .MainTableColumns(columns => { columns.AddColumn(column => { column.PropertyName("سال"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Center); column.IsVisible(true); column.Order(0); column.Width(2); column.HeaderCell("سال تحصیلی"); }); columns.AddColumn(column => { column.PropertyName("نیمسال"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(1); column.Width(1); column.HeaderCell("نیمسال"); }); columns.AddColumn(column => { column.PropertyName("پایه"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(2); column.Width(1); column.HeaderCell("پایه"); }); columns.AddColumn(column => { column.PropertyName("درس"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(3); column.Width(1); column.HeaderCell("درس"); }); for (int i = 6; i < countScore + 6; i++) { columns.AddColumn(column => { column.PropertyName(dt.Columns[i].ToString()); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(i - 2); column.Width(1); column.HeaderCell(dtTitle.Rows[0][i - 5].ToString()); }); } columns.AddColumn(column => { column.PropertyName("FinalScore1"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(countScore + 4); column.Width(1); column.HeaderCell("نمره نهایی"); }); columns.AddColumn(column => { column.PropertyName("t_term1"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(countScore+5); column.Width(1); column.HeaderCell("نمره تجدیدی"); }); columns.AddColumn(column => { column.PropertyName("t_term11"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(countScore + 6); column.Width(1); column.HeaderCell("نمره استادیاری"); }); columns.AddColumn(column => { column.PropertyName("tabestan1"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(countScore + 10); column.Width(1); column.HeaderCell("نمره تابستان"); }); columns.AddColumn(column => { column.PropertyName("viewTermic"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(countScore + 11); column.Width(1); column.HeaderCell("ترم نمایشی"); }); columns.AddColumn(column => { column.PropertyName("Ghabol"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(countScore + 12); column.Width(1); column.HeaderCell("قبول"); }); }); return pdfrpt.MainTableEvents(events => { events.DataSourceIsEmpty(message: "داده ای برای نمایش وجو د ندارد"); events.MainTableAdded(args => { var taxTable = new PdfPTable(1); // Create a clone of the MainTable's structure taxTable.RunDirection = 3; //taxTable.SetWidths(new float[] { 3, 3, 3 }); taxTable.WidthPercentage = 100f; taxTable.SpacingBefore = 10f; taxTable.AddSimpleRow( (data, cellProperties) => { data.Value = "مهر و امضای مدیر"; cellProperties.ShowBorder = false; cellProperties.HorizontalAlignment = HorizontalAlignment.Left; cellProperties.PdfFont = args.PdfFont; }); args.PdfDoc.Add(taxTable); }); }) .Export(export => { // export.ToExcel(); }) .Generate(data => data.AsPdfFile(fo.Name)); }
فقط با استفاده از CSS هم میشه
input[type=text]:required + span::after { content: "*"; color: red; font-size: large; }
مروری بر قابلیت جدید ASP.NET FriendlyUrls
<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
آشنایی با مفهوم Indexer در C#.NET
در حالت عادی میشود بر روی یک وهله از کلاس، Index اعمال کرد. اگر نخواهیم روی کل وهله اعمال شود چطور؟ برای مثال فقط روی یک خاصیت خاص.
پیاده سازی آن یک نکته کوچک دارد که به شرح زیر است:
using System; namespace IndexedProperties { public class Data { private int[] _localArray; private ArrayIndexer _arrayIndexer; public Data() { _localArray = new int[10]; for (int i = 0; i < 10; i++) _localArray[i] = i + 1; _arrayIndexer = new ArrayIndexer(this); } public ArrayIndexer Number { get { return _arrayIndexer; } } public class ArrayIndexer { private Data _arrayOwner; public ArrayIndexer(Data arrayOwner) { _arrayOwner = arrayOwner; } public int this[int index] { get { return _arrayOwner._localArray[index]; } } public int Length { get { return _arrayOwner._localArray.Length; } } } } class Program { static void Main(string[] args) { var data = new Data(); for (int i = 0; i < 10; i++) Console.WriteLine(data.Number[i]); } } }
به این ترتیب تعاریف آرایه مورد استفاده نیازی نیست مستقیما در معرض دید قرار گیرد و همچنین read-only هم تعریف شده است. به علاوه اینکه indexerها محدود به int نیستند و برای مثال میتوان از string و غیره نیز استفاده کرد.
public interface ICalculator<T> { T Add(T operand1, T operand2); } public class Calculator<T> : ICalculator<T> { public T Add(T operand1, T operand2) { return operand1 + operand2; } }
Operator '+' cannot be applied to operands of type 'T' and 'T'
روش اول: واگذار کردن استراتژی عملیات ریاضی به یک کلاس خارجی
این راه حلی است که توسط اعضای تیم سیشارپ در روزهای ابتدایی معرفی جنریکها مطرح شدهاست. فرض کنید میخواهیم لیستی از جنریکها را با هم جمع بزنیم:
public class Calculator2<T> { public T Sum(List<T> list) { T sum = 0; for (int i = 0; i < list.Count; i++) sum += list[i]; return sum; } }
public interface ICalculator<T> { T Add(T operand1, T operand2); } public class Int32Calculator : ICalculator<int> { public int Add(int operand1, int operand2) { return operand1 + operand2; } } public class AlgorithmLibrary<T> where T : new() { private readonly ICalculator<T> _calculator; public AlgorithmLibrary(ICalculator<T> calculator) { _calculator = calculator; } public T Sum(List<T> items) { var sum = new T(); for (var i = 0; i < items.Count; i++) { sum = _calculator.Add(sum, items[i]); } return sum; } }
var result = new AlgorithmLibrary<int>(new Int32Calculator()).Sum(new List<int> { 1, 2, 3 });
البته این نوع پیاده سازی را که کار اصلی آن واگذاری عملیات جمع، به یک کلاس خارجی است، توسط Func نیز میتوان خلاصهتر کرد:
public class Algorithms<T> where T : new() { public T Calculate(Func<T, T, T> add, IEnumerable<T> numbers) { var sum = new T(); foreach (var number in numbers) { sum = add(sum, number); } return sum; } }
var result = new Algorithms<int>().Calculate((a, b) => a + b, new[] { 1, 2, 3 });
روش دوم: استفاده از واژهی کلیدی dynamic
با استفاده از واژهی کلیدی dynamic میتوان بررسی نوع دادهها را به زمان اجرا موکول کرد. به این ترتیب دیگر کامپایلر مشکلی با کامپایل قطعه کد ذیل نخواهد داشت:
public class Calculator<T> : ICalculator<T> { public T Add(T operand1, T operand2) { return (dynamic)operand1 + operand2; } }
var test = new Calculator<int>().Add(1, 2);
روش فوق نسبت به حالتی که بر اساس نوع T تصمیمگیری شود و از عملگر + متناظری استفاده گردد، خوانایی بهتری دارد:
public T Add(T t1, T t2) { if (typeof(T) == typeof(double)) { var d1 = (double)t1; var d2 = (double)t2; return (T)(d1 + d2); } else if (typeof(T) == typeof(int)){ var i1 = (int)t1; var i2 = (int)t2; return (T)(i1 + i2); } else ... }
روش سوم: استفاده از Expression Trees
روش زیر بسیار شبیه است به حالتیکه از Func در روش اول استفاده شد. در اینجا این Func به صورت پویا تولید و سپس صدا زده میشود:
using System; using System.Linq.Expressions; namespace GenericsArithmetic { public class Solution3 { public T Add<T>(T a, T b) { var paramA = Expression.Parameter(typeof(T), "a"); var paramB = Expression.Parameter(typeof(T), "b"); var body = Expression.Add(paramA, paramB); var add = Expression.Lambda<Func<T, T, T>>(body, paramA, paramB).Compile(); return add(a, b); } } }
به کمک کتابخانهی Generic Operators، کدهای جمع زدن اعضای یک لیست جنریک به صورت ذیل خلاصه میشوند:
public static T Sum<T>(this IEnumerable<T> source) { T sum = Operator<T>.Zero; foreach (T value in source) { sum = Operator.Add(sum, value); } return sum; }
بررسی C# Object Notation
چندی پیش در سایت جاری چند مقاله خوب توسط یکی از دوستان درباره Qunit منتشر شد. Qunit یک ابزار قدرتمند و مناسب برای تست کدهای جاوااسکریپت است و در اثبات صحت این گفته همین کافیست که بدانیم برای تست کدهای نوشته شده در پروژههای متن بازی هم چون Backbone.Js و JQuery از این فریم ورک استفاده شده است. اما به احتمال قوی در ذهن شما این سوال مطرح شده است که خب! در صورت آشنایی با Qunit چه نیاز به یادگیری Jasmine یا خدای نکرده Mocha و FuncUnit است؟ هدف صرفا معرفی یک ابزار غیر برای تست کد است نه مقایسه و نتیجه گیری برای تعیین میزان برتری این ابزارها. اصولا مهمترین دلیل برای انتخاب، علاوه بر امکانات و انعطاف پذیری، فاکتور راحتی و آسان بودن در هنگام استفاده است که به صورت مستقیم به شما و تیم توسعه نرم افزار بستگی دارد.
اما به عنوان توسعه دهنده نرم افزار که قرار است از این ابزار استفاده کنیم بهتر است با تفاوتها و شباهتهای مهم این دو فریم ورک آشنا باشیم:
»Jasmine یک فریم ورک تست کدهای جاوا اسکریپ بر مبنای Behavior-Driven Development است در حالی که Qunit بر مبنای Test-Driven Development است و همین مسئله مهمترین تفاوت بین این دو فریم ورک میباشد.
»اگر قصد دارید که از Qunit نیز به روش BDD استفاده نمایید باید از ترکیب Pavlov به همراه Qunit استفاده کنید.
»Jasmine از مباحث مربوط به Spies و Mocking به خوبی پشتیبانی میکند ولی این امکان به صورت توکار در Qunit فراهم نیست. برای اینکه بتوانیم این مفاهیم را در Qunit پیاده سازی کنیم باید از فریم ورکهای دیگر نظیر SinonJS به همراه Qunit استفاده کنیم.
»هر دو فریم ورک بالا به سادگی و راحتی کار معروف هستند
»تمام موارد مربوط به الگوهای Matching در هر دو فریم ورک به خوبی تعبیه شده است
» هر دو فریم ورک بالا از مباحث مربوط به Asynchronous Testing برای تست کدهای Ajax ای به خوبی پشتیبانی میکنند.
بررسی چند مفهوم
قبل از شروع، بهتر است که با چند مفهوم کلی و در عین حال مهم این فریم ورک آشنا شویم
describe('JavaScript addition operator', function () { it('adds two numbers together', function () { expect(1 + 2).toEqual(3); }); });
در تابع it کد بالا شما میتوانید کدهای مربوط بدنه توابع تست خود را بنویسید. برای پیاده سازی Assert در توابع تست مفهوم expectationها وجود دارد. در واقع expect برای بررسی مقادیر حقیقی با مقادیر مورد انتظار مورد استفاده قرار میگیرد و شامل مقادیر true یا false خواهد بود.
برای Setup و Teardown توابع تست خود باید از توابع beforeEach و afterEach که بدین منظور تعبیه شده اند استفاده کنید.
describe("A spec (with setup and tear-down)", function() { var foo; beforeEach(function() { foo = 0; foo += 1; }); afterEach(function() { foo = 0; }); it("is just a function, so it can contain any code", function() { expect(foo).toEqual(1); }); it("can have more than one expectation", function() { expect(foo).toEqual(1); expect(true).toEqual(true); }); });
اگر در کد تست خود قصد دارید که یک تابع describe یا it را غیر فعال کنید کافیست یک x به ابتدای آنها اضافه کنید و دیگر نیاز به هیچ کار اضافه دیگری برای comment کردن کد نیست.
xdescribe("A spec", function() { var foo; beforeEach(function() { foo = 0; foo += 1; }); xit("is just a function, so it can contain any code", function() { expect(foo).toEqual(1); }); });
درادامه قصد پیاده سازی یک مثال را با استفاده از Jasmine و RequireJs در پروژه Asp.Net MVC دارم.
- فولدر lib شامل فایلها کدهای Jasmine برای setup و tear down و spice و تست کدهای شما میباشد.
- فایل specRunner.html به واقع یک فایل برای نمایش فایلهای تست و همچنین نمایش نتیجه تست است.
- فولدر spec نیز شامل کدهای Jasmine برای کمک به نوشتن تست میباشد.
در این مثال قصد داریم فایلهای player.js و song.js که به عنوان نمونه به همراه این فریم ورک قرار دارد را در قالب یک پروژه MVC به همراه RequireJs، تست نماییم. در نتیجه این فایلها را از فولدر src انتخاب نمایید و آنها را در قسمت Scripts پروژه اصلی خود کپی کنید(ابتدا بک پوشه به نام App بسازید و فایلها را در آن قرار دهید)
برای استفاده از requireJs باید دستور define را در ابتدا این فایلها اضافه نماییم. در نتیجه فایلهای Player.js و Song.js را باز کنید و تغییرات زیر را در ابتدای این فایلها اعمال نمایید.
Song.js
define(function () { function Song() { } Song.prototype.persistFavoriteStatus = function (value) { // something complicated throw new Error("not yet implemented"); }; });
define(function () { function Player() { } Player.prototype.play = function (song) { this.currentlyPlayingSong = song; this.isPlaying = true; }; Player.prototype.pause = function () { this.isPlaying = false; }; Player.prototype.resume = function () { if (this.isPlaying) { throw new Error("song is already playing"); } this.isPlaying = true; }; Player.prototype.makeFavorite = function () { this.currentlyPlayingSong.persistFavoriteStatus(true); }; });
baseUrl در پیکر بندی requireJs به مسیر فایلهای پروژه که در پروژه اصلی MVC قرار دارد اشاره میکند. paths برای تعیین مسیر فایلهای تست که در پوشه spec در پروژه تست قرار دارد اشاره میکند. اگر دقت کرده باشید به دلیل اینگه تگهای script مربوط به لود فایلهای SpecHelper.js و PlayerSpec.js به صورت comment در آمده اند در نتیجه این فایلها لود نخواهند شد و خروجی مورد نظر مشاهده نمیشود. در این جا باید از مکانیزم AMD موجود در RequireJs استفاده نماییم و فایلهای مربوطه را لود کنیم. برای این کار نیاز به اضافه کردن دستور require در ابتدای تگ script به صورت زیر در این فایل است. در نتیجه فایلهای PlayerSpec و SpecHelper نیز توسط RequireJs لود خواهند شد.
نیاز به یک تغییر کوچک دیگر نیز وجود دارد. فایل PlayerSpec را باز نمایید و وابستگی فایلهای آن را تعیین نمایید. از آن جا که این فایل برای تست فایلهای Player , Song ایجاد شده است در نتیجه باید از define برای تعیین این وابستگیها استفاده نماییم.
یادآوری:
»دستور describe در فایل بالا برای تعریف تابع تست است. همان طور که میبینید بک نام به آن داده میشود به همراه بدنه تابع تست.
»دستور beforeEach برای آماده سازی مواردی است که قصد داریم در تست مورد استفاده قرار گیرند. همانند متدهای Setup در UnitTest.
» دستور expect نیز معادل Assert در UnitTest است و برای بررسی صحت عملکرد تست نوشته میشود.
اگر
فایل SpecRunner.html را دوباره در مرورگر خود باز نمایید تصویر زیر را
مشاهده خواهید کرد که به عنوان موفقیت آمیز بودن پیکر بندی پروژه و تستهای آن میباشد.
چرا TypeScript؟
- TypeScript زبان توصیه شدهی توسعهی برنامههای AngularJS 2 است و همچنین با سایر کتابخانههای معروف جاوا اسکریپتی مانند ReactJS و jQuery نیز سازگاری دارد. بنابراین اگر قصد دارید به AngularJS 2 مهاجرت کنید، اکنون فرصت خوبی است تا زبان TypeScript را نیز بیاموزید. همچنین WinJS نیز با TypeScript نوشته شدهاست.
- superset زبان JavaScript بودن به این معنا است که تمام کدهای جاوا اسکریپتی موجود، به عنوان کد معتبر TypeScript نیز شناخته میشوند و همین مساله مهاجرت به آنرا سادهتر میکند. زبانهای دیگری مانند Dart و یا CoffeeScript ، نسبت به JavaScript بسیار متفاوت به نظر میرسند؛ اما Syntax زبان TypeScript شباهت بسیار زیادی به جاوا اسکریپت و خصوصا ES 6 دارد. در اینجا تنها کافی است پسوند فایلهای js را به ts تغییر دهید و از آنها به عنوان کدهای معتبر TypeScript استفاده کنید.
- strong typing و معرفی نوعها، کدهای نهایی نوشته شده را امنتر میکنند. به این ترتیب کامپایلر، پیش از اینکه کدهای شما در زمان اجرا به خطا بر بخورند، در زمان کامپایل، مشکلات موجود را گوشزد میکند. همچنین وجود نوعها، سرعت توسعه را با بهبود ابزارهای مرتبط با برنامه نویسی، افزایش میدهند؛ از این جهت که مفهوم مهمی مانند Intellisense، با وجود نوعها، پیشنهادهای بهتر و دقیقتری را ارائه میدهد. همچنین ابزارهای Refactoring نیز در صورت وجود نوعها بهتر و دقیقتر عمل میکنند. این موارد مهمترین دلایل طراحی TypeScript جهت توسعه و نگهداری برنامههای بزرگ نوشته شدهی با JavaScript هستند.
- Syntax زبان TypeScript به شدت الهام گرفته شده از زبان سیشارپ است. به همین جهت اگر با این زبان آشنایی دارید، درک مفاهیم TypeScript برایتان بسیار ساده خواهد بود.
- بهترین قسمت TypeScript، کامپایل شدن آن به ES 5 است (به این عملیات Transpile هم میگویند). در زبان TypeScript به تمام امکانات پیشرفتهی ES 6 مانند کلاسها و ماژولها دسترسی دارید، اما کد نهایی را که تولید میکند، میتواند ES 5 ایی باشد که هم اکنون تمام مرورگرهای عمده آنرا پشتیبانی میکنند. با تنظیمات کامپایلر TypeScript، امکان تولید کدهای ES 3 تا ES 5 و همچنین ES 6 نیز وجود دارد. نمونهی آنلاین این ترجمه را در TypeScript playground میتوانید مشاهده کنید.
- TypeScript چندسکویی است. امکانات و کامپایلر این زبان، برای ویندوز، مک و لینوکس طراحی شدهاند.
- TypeScript سورس باز است. طراحان اصلی آن، همان طراحان زبان سیشارپ در مایکروسافت هستند و هم اکنون این زبان به صورت سورس باز توسط این شرکت توسعه داده شده و در GitHub نگهداری میشود.
آماده سازی محیطهای کار با TypeScript
برای کار با TypeScript، یک ادیتور متنی ساده، به همراه کامپایلر آن کفایت میکند. اما همانطور که عنوان شد، یکی از مهمترین دلایل وجودی TypeScript، بهبود ابزارهای برنامه نویسی مرتبط با JavaScript است و اگر قرار باشد صرفا از یک ادیتور متنی ساده استفاده شود، فلسفهی وجودی آن زیر سؤال میرود.
نصب TypeScript در ویژوال استودیو
در نگارشهای جدید ویژوال استودیو، از VS 2013 Update 2 به بعد، قسمت ویژهی TypeScript نیز قابل مشاهدهاست. البته این قسمت با به روز رسانیهای TypeScript، نیاز به به روز رسانی دارد. به همین جهت به سایت رسمی آن مراجعه کرده و بستههای جدید مخصوص VS 2013 و یا 2015 آنرا دریافت و نصب کنید.
همچنین افزونهی Web Essentials نیز امکانات بیشتری را جهت کار با TypeScript به همراه دارد و امکان مشاهدهی خروجی جاوا اسکریپت تولیدی را در حین کار با فایل TypeScript فعلی میسر میکند. در سمت چپ صفحه TypeScript را خواهید نوشت و در سمت راست، خروجی JavaScript نهایی را بلافاصله مشاهده میکنید.
تصویر فوق مربوط به VS 2015 است. همچنین گزینهی افزودن یک فایل و آیتم جدید نیز امکان افزودن فایلهای TS را به همراه دارد.
نصب و تنظیم TypeScript در ویژوال استودیو کد
ویژوال استودیو کد، نگارش رایگان، سورس باز و چندسکویی ویژوال استودیو است که بر روی ویندوز، مک و لینوکس قابل اجرا است. ویژوال استودیو کد نیز به همراه پشتیبانی بسیار خوبی از TypeScript است، تا حدی که تمام ارائههای معرفی Anugular 2 توسط تیم مربوطهی آن از گوگل، توسط ویژوال استودیو کد و یکپارچگی آن با TypeScript انجام شدند.
ویژوال استودیو کد بر مبنای فولدرها کار میکند و با گشودن یک پوشه در آن (با کلیک بر روی دکمهی open folder آن)، امکان کار کردن با آن پوشه و فایلهای موجود در آن را خواهیم یافت.
نکتهی مهم اینجا است که پس از نصب VS Code، برای فایلهای با پسوند ts بلافاصله Intellisense مرتبط نیز مهیا است و نیاز به هیچگونه تنظیم اضافهتری ندارد. همچنین قابلیتهای type safety این زبان نیز در این ادیتور به نحو واضحی مشخص هستند:
در ادامه ابتدا یک پوشهی جدید خالی را ایجاد کنید و سپس این پوشه را در VS Code باز نمائید (از طریق منوی فایل، گزینهی گشودن پوشه). سپس ماوس را بر روی نام این پوشه حرکت دهید:
همانطور که مشاهده میکنید، دکمهی new file ظاهر میشود. در اینجا میتوانید فایل جدیدی را به نام test.ts اضافه کنید.
در ادامه با فشردن دکمههای ctrl+shift+p، امکان انتخاب یک task runner را جهت کامپایل فایلهای ts خواهیم داشت:
در اینجا ابتدا عبارت task< را وارد کنید و سپس از منوی باز شده، گزینهی rub build task را انتخاب کنید:
پس از آن، در بالای صفحه مشاهده خواهید کرد که عنوان شده: «هنوز هیچ task runner ایی برای اینکار تنظیم نشدهاست»
برای این منظور بر روی دکمهی configure task runner تصویر فوق که با رنگ آبی مشخص شدهاست، کلیک کنید. به این ترتیب یک فایل جدید به نام task.json ایجاد میشود که در پوشهای به نام vscode. در ریشهی پروژه (یا همان پوشهی جاری) قرار میگیرد:
فایل task.json دارای تعاریفی است که کامپایلر TypeScript یا همان tsc را فعال میکند:
{ "version": "0.1.0", // The command is tsc. Assumes that tsc has been installed using npm install -g typescript "command": "tsc", // The command is a shell script "isShellCommand": true, // Show the output window only if unrecognized errors occur. "showOutput": "silent", // args is the HelloWorld program to compile. "args": ["HelloWorld.ts"], // use the standard tsc problem matcher to find compile problems // in the output. "problemMatcher": "$tsc" }
در اینجا قسمتی که نیاز به تنظیم دارد، خاصیت args است. مقادیر آن، پارامترهایی هستند که به کامپایلر typescript ارسال میشوند. برای نمونه آنرا به صورت ذیل تغییر دهید:
"args": [ "--target", "ES5", "--outdir", "js", "--sourceMap", "--watch", "test.ts" ],
برای اجرای کامپایلر، ابتدا از منوی view گزینهی toggle output را انتخاب کنید تا بتوان خروجی نهایی کامپایلر را مشاهده کرد. سپس گزینهی view->command pallet و اجرا tasks< را انتخاب کنید. در ادامه همانند مرحلهی قبل، یعنی گزینهی run build task را اجرا کنید (که خلاصهی این عملیات ctrl+shift+B است).
به این ترتیب پوشهی js که در خاصیت args مشخص کردیم، تولید میشود:
البته این خطا هم در قسمت output نمایش داده میشود:
error TS5023: Unknown option 'watch' Use the '--help' flag to see options.
علت اینجا است که در تنظیمات فوق، خاصیت command به tsc تنظیم شدهاست و همانطور که در کامنت آن عنوان شدهاست، کامپایلر typescript را از طریق دستور npm install -g typescript دریافت میکند و نیازی به ذکر مسیر آن در اینجا نیست. بنابراین لازم است تا با npm و نصب typescript از طریق آن آشنا شد و به این ترتیب کامپایلر آنرا به روز کرد تا دستور watch را شناسایی کند.
نصب TypeScript از طریق npm
همانطور که عنوان شد، TypeScript چندسکویی است و این مورد را از طریق npm یا NodeJS package manager انجام میدهد. برای این منظور به آدرس https://nodejs.org/en مراجعه کرده و فایل نصاب آنرا مخصوص سیستم عامل خود دریافت و سپس نصب کنید. Node.js یک runtime سمت سرور اجرای برنامههای جاوا اسکریپتی است. از آنجائیکه TypeScript در نهایت به JavaScript تبدیل میشود، استفاده از node.js انتخاب مناسبی جهت اجرا و توزیع آن در تمام سیستم عاملها بودهاست.
پس از نصب node.js، از package manager آن که npm نام دارد، جهت نصب TypeScript استفاده میشود. چون node.js به Path و مسیرهای اصلی ویندوز اضافه میشود، تنها کافی است دستور npm install -g typescript را در خط فرمان صادر کنید. در اینجا سوئیچ g به معنای global و دسترسی عمومی است.
همانطور که در این تصویر مشخص است، پس از صدور دستور نصب TypeScript، نگارش 1.8.9 آن نصب شدهاست. اما زمانیکه کامپایلر tsc را با پارامتر version اجرا میکنیم، شماره نگارش قدیمی 1.0.3.0 را نمایش میدهد. برای رفع این مشکل به مسیر C:\Program Files (x86)\Microsoft SDKs\TypeScript مراجعه کرده و پوشهی 1.0 را به 1.0-old تغییر نام دهید.
اکنون اگر مجددا بررسی کنیم، نگارش صحیح قابل مشاهده است:
پس از این تغییرات اگر مجددا به VS Code باز گردیم و ctrl+shift+B را صادر کنیم (جهت اجرای مجدد task runner و اجرای tsc تنظیم شده) ، پیام ذیل مشاهده میشود:
15:33:52 - Compilation complete. Watching for file changes.
در اینجا چون پارامتر watch فعال شدهاست، هر تغییری که در فایل ts داده شود، بلافاصله کامپایل شده و در فایل js منعکس خواهد شد.
تنظیم VS Code جهت دیباگ کدهای TypeScript
در نوار ابزار کنار صفحهی VS Code، بر روی دکمهی دیباگ کلیک کنید:
سپس بر روی دکمهی چرخدندهی موجود که کار انجام تنظیمات را توسط آن میتوان ادامه داد، کلیک کنید. بلافاصله منویی ظاهر میشود که درخواست انتخاب محیط دیباگ را دارد:
در اینجا node.js را انتخاب کنید. با اینکار فایل جدیدی دیگری به نام launch.json به پوشهی vscode. اضافه میشود. اگر به این فایل دقت کنید دو خاصیت name به نامهای Launch و Attach در آن موجود هستند. این نامها در یک دراپ داون، در کنار دکمهی start دیباگ نیز ظاهر میشوند:
- در فایل launch.json، باید خاصیت "program": "${workspaceRoot}/app.js" را ویرایش کرد و app.js آنرا به test.ts مثال جاری تغییر داد.
- سپس خاصیت "sourceMaps" آن نیز باید تغییر کرده و جهت استفادهی از source mapهای تولیدی به true تنظیم شود.
- در آخر باید مسیر پوشهی خروجی js را نیز تنظیم کرد: "outDir": "${workspaceRoot}/js"
همچنین باید دقت داشت چون externalConsole به false تنظیم شدهاست، خروجی این کنسول به output ویژوال استودیوکد منتقل میشود.
اکنون اگر بر روی دکمهی سبز رنگ start کلیک کنید (دکمهی F5)، امکان دیباگ سطر به سطر کد TypeScript را خواهید یافت:
فایلهای نهایی json یاد شدهی در متن را از اینجا میتوانید دریافت کنید:
VSCodeTypeScript.zip