اشتراکها
اشتراکها
بررسی تازههای TypeScript 3.0
اشتراکها
انتشار TypeScript 1.5 Alpha
یکی از موارد مشکل ساز حین استفاده از T-SQL ، مقدار دهی اولیه متغیرها به نال است و اگر اسکریپت تهیه شده کمی طولانی باشد، خطایابی مشکلات مرتبط با آن بسیار مشکل میشود. برای مثال:
Declare
@x int,
@y int
Set @x = 1
If (@x + @y = 1)
BEGIN
print 'yes!'
End
Set @y = (select sum(id) from Account)
If @x + @y = 1
BEGIN
print 'yes!'
End
کد فوق بدون هیچگونه خطایی اجرا میشود و هیچ وقت هم yes را چاپ نمیکند. مشکل هم همینجا است. خطایابی قسمت دوم این اسکریپت کمی مشکلتر از حالت قبل است. چون در اینجا به نظر متغیر y صریحا مقدار دهی شده است؛ اما در عمل ممکن است برای مثال به دلیل عدم وجود رکوردی در جدول Account، باز هم null به آن نسبت داده شود.
بنابراین سؤال این است که چگونه این نوع مشکلات را در یک پروژه با تعداد زیادی رویه ذخیره شده، تابع و غیره میتوان تشخیص داد؟
پاسخ:
در این مورد قبلا مطلبی در این سایت منتشر شده [+] (البته اگر از نگارش کامل VS 2010 استفاده میکنید نیازی به نصب چیزی نخواهید داشت) و نکتهی آن بررسی SR0007 است.
اگر برنامه نویس NET. باشید، پس از مدتی کار با LINQ، در سایر زبانهای دیگر نیز به دنبال این قابلیت فوق العادهی functional یا تابعی خواهید گشت. در این مطلب، خلاصهای از متدهای توکار جاوا اسکریپت را که میتوانند معادلهایی برای متدهای LINQ to Objects دات نت باشند، بررسی خواهیم کرد.
تدارک ساختار ابتدایی این مطلب
در اینجا اینترفیسی را که بیانگر ساختار شیء شخص است، به صورت ذیل ایجاد میکنیم:
سپس آرایهای را بر اساس این شیء تدارک خواهیم دید:
در ادامه تمام اعمال مدنظر را بر روی این آرایه انجام میدهیم.
همچنین سه متد ذیل را نیز برای لاگ کردن عنوان آزمایش، نمایش محتوای آرایهی اصلی و نمایش نتیجهی آزمایش، به این کلاس اضافه میکنیم:
معادل متد Where در TypeScript
متد filter که جزو متدهای توکار ES5 است، میتواند معادلی برای متد Where، جهت فیلتر کردن عناصر بر اساس یک خاصیت، یا چندین خاصیت باشد:
با این خروجی
در اینجا نحوهی استفادهی از arrow functions ES6 را نیز جهت ساده سازی تعریف callback متد filter مشاهده میکنید که نمایش آن بسیار شبیه به عبارات LINQ در دات نت است.
معادل متد Any در TypeScript
متد some که جزو متدهای توکار ES5 است، میتواند معادلی برای متد Any باشد. اگر یکی از عناصر آرایه، بر اساس شرط تعیین شده یافت شود، این متد مقدار true را باز میگرداند:
با این خروجی:
در مثال اول، بررسی شدهاست که آیا شخصی با سن کمتر از 40 در این لیست وجود دارد؟
در مثال دوم، جستجویی بر روی تمام خواص شیء شخص انجام شدهاست. در اینجا توسط متد Object.keys، لیست خواص شیء یافت شدهاست. سپس بر روی این لیست توسط متد some، بررسی شدهاست که آیا خاصیت رشتهای وجود دارد که مساوی عبارت filterBy باشد؟ حاصل این بررسی به عنوان شرط متد filter جهت بازگشت آرایهی متناظری از اشخاص یافت شده، استفاده شدهاست.
معادل متد Contains در TypeScript
متد includes که جزو متدهای توکار ES7 است، میتواند معادلی برای متد Contains باشد و کار آن بررسی وجود عنصری در یک لیست است:
در اینجا باید دقت داشت که اگر آرایهی مدنظر رشتهای و یا عددی باشد، متد includes نتیجهی مطلوبی را بازگشت میدهد. اما چون در اینجا وجود یک شیء را در لیست اشخاص بررسی میکنیم، این مقایسه بر اساس ارجاع عناصر خواهد بود و نتیجهی نهایی یافت شدن آن، منفی است (شیء searchElement هیچ ارجاعی را در آرایهی اشخاص ندارد، هرچند ظاهر آن شبیه به یکی از عناصر آن است). حتی متد indexOf نیز به همین صورت عمل میکند.
یکی از روشهای مقایسهی بر اساس تمام مقادیر خواص یک شیء، استفاده از متد JSON.stringify است که اگر آنرا با متد some ترکیب کنیم، میتوان به نتیجهی مطلوبی رسید:
معادل متد All در TypeScript
متد every که جزو متدهای توکار ES5 است، میتواند معادلی برای متد All باشد و کار آن بررسی صحت شرط اعمالی، بر روی تک تک عناصر لیست است. اگر این بررسی با موفقیت صورت گرفت، مقدار true را بازگشت میدهد:
با این خروجی:
معادل متدهای First و FirstOrDefault در TypeScript
میتوان از متدهای filter و یا find بومی ES5 و ES 6 برای شبیه سازی متدهای First (یافتن اولین عنصر درخواستی در یک لیست) و FirstOrDefault استفاده کرد:
متد filter، در صورت برآورده نشدن شرط آن، یک آرایهی خالی را بازگشت میدهد که مقدار [0] آن، undefined است. بنابراین ترکیب آن با null ||، سبب بازگشت نال، در صورت خالی بودن آرایه میشود؛ یا همان حالت OrDefault (یا بازگشت مقدار پیش فرض، یا نال در اینجا). متد find نیز در صورت نیافتن عنصر درخواستی، مقدار undefined را بازگشت میدهد.
معادل متد FindIndex در TypeScript
متد findIndex که جزو متدهای توکار ES6 است، میتواند معادلی برای متد FindIndex در جهت یافتن ایندکس عنصری در یک لیست، بر اساس شرط درخواستی، باشد.
با این خروجی:
معادل متد Select در TypeScript
متد map که جزو متدهای توکار ES5 است، میتواند معادلی برای متد Select، برای تغییر شکل نهایی خروجی یک لیست باشد:
برای مثال در اینجا در لیست اشخاص، تنها خاصیت name آنها، انتخاب و بازگشت داده شدهاست:
معادل متد Aggregate در TypeScript
متد reduce که جزو متدهای توکار ES5 است، میتواند شبیه به متد Aggregate عمل کند و لیستی از عناصر را به یک مقدار کاهش دهد:
با این خروجی:
معادل متد ForEach در TypeScript
متد forEach که جزو متدهای توکار ES5 است، میتواند معادلی برای متد ForEach باشد که روشی functional برای پیمودن عناصر یک لیست است:
با این خروجی:
معادل متد OrderBy در TypeScript
متد sort که جزو متدهای توکار ES5 است، میتواند معادلی برای متد OrderBy باشد که جهت مرتب سازی عناصر یک لیست از آن استفاده میشود:
متد sort یک callback را میپذیرد و هر بار دو آیتم در حال مرتب سازی را به آن ارسال میکند. در این حالت اگر خروجی این callback:
- مساوی صفر باشد، تغییری را به وجود نمیآورد.
- کمتر از صفر باشد، اولین عنصر را قبل از دومین عنصر قرار میدهد.
- بیشتر از صفر باشد، دومین عنصر را پس از اولین عنصر قرار میدهد.
منطق مقایسهی فوق را به صورت ذیل نیز میتوان خلاصه کرد:
با این خروجی:
و یا اگر بخواهیم این لیست را بر اساس نام اشخاص مرتب سازی کنیم، به منطق ذیل خواهیم رسید:
با این خروجی:
نکتهی مهم: همانطور که ملاحظه میکنید، متد sort نه فقط یک خروجی مرتب شده را بازگشت دادهاست، بلکه اصل آرایه را نیز درجا مرتب سازی کردهاست و ترتیب عناصر این آرایه، دیگر با آرایهی قبلی و اصلی یکی نیست.
امکان ترکیب زنجیروار متدهای کار بر روی لیستها در TypeScript
همانند LINQ، در اینجا نیز میتوان متدهای فوق را به صورت زنجیروار بر روی یک لیست فراخوانی و اجرا کرد:
با این خروجی:
در اینجا ابتدا اشخاص بالای 30 سال فیلتر شدهاند. سپس فقط خاصیت رشتهای نام آنها انتخاب شدهاست و در آخر این نامها به صورت نزولی مرتب شدهاند.
معادل متد Skip در TypeScript
متد splice که جزو متدهای توکار ES5 است، میتواند شبیه به متد Skip عمل کند. این متد آرایهای را بازگشت میدهد که حاوی عناصری است که پس از تعداد ذکر شده، در آرایهی اصلی وجود دارند:
با این خروجی:
کار واقعی متد splice، حذف عناصر باقیماندهی در آرایهاست و خروجی آن دقیقا لیست موارد حذف شدهاست. به همین جهت است که در نتیجهی فوق، اکنون آرایهی اصلی تنها دارای دو عضو باقیمانده است (و دیگر با آرایهی اصلی و ابتدایی یکی نیست).
تدارک ساختار ابتدایی این مطلب
در اینجا اینترفیسی را که بیانگر ساختار شیء شخص است، به صورت ذیل ایجاد میکنیم:
export interface Person { name: string; age: number; }
export class LinqTestsComponent { people: Person[] = [ { name: "User 4", age: 27 }, { name: "User 5", age: 42 }, { name: "User 6", age: 8 }, { name: "User 1", age: 20 }, { name: "User 2", age: 35 }, { name: "User 3", age: 78 } ]; }
همچنین سه متد ذیل را نیز برای لاگ کردن عنوان آزمایش، نمایش محتوای آرایهی اصلی و نمایش نتیجهی آزمایش، به این کلاس اضافه میکنیم:
logTitle(title: string) { console.log(`%c${title}`, "background: #222; color: #bada55"); } logOriginalArray() { console.log(`original this.people:${JSON.stringify(this.people)}`); } logResult(message: string, result: any) { console.log(`${message}:${JSON.stringify(result)}`); }
معادل متد Where در TypeScript
متد filter که جزو متدهای توکار ES5 است، میتواند معادلی برای متد Where، جهت فیلتر کردن عناصر بر اساس یک خاصیت، یا چندین خاصیت باشد:
equivalentToWhere() { const youngerThan40 = this.people.filter(person => person.age < 40); // ECMAScript 5 this.logResult("People younger than 40", youngerThan40); // Filtering on Multiple Criteria const youngsters = this.people.filter( person => person.age < 40 && person.name.toLocaleLowerCase().indexOf("user") !== -1); this.logResult("Users younger than 40", youngsters); }
People younger than 40:[ {"name":"User 4","age":27}, {"name":"User 6","age":8}, {"name":"User 1","age":20}, {"name":"User 2","age":35} ] Users younger than 40:[ {"name":"User 4","age":27}, {"name":"User 6","age":8}, {"name":"User 1","age":20}, {"name":"User 2","age":35} ]
معادل متد Any در TypeScript
متد some که جزو متدهای توکار ES5 است، میتواند معادلی برای متد Any باشد. اگر یکی از عناصر آرایه، بر اساس شرط تعیین شده یافت شود، این متد مقدار true را باز میگرداند:
equivalentToAny() { const anyUnder40 = this.people.some(person => person.age < 40); // ECMAScript 5 this.logResult("Are any people under 40?", anyUnder40); // true // Filtering on Criteria Matching any Object Properties const filterBy = "user"; const anyUsers = this.people.filter(person => Object.keys(person).some(property => { let value = (<any>person)[property]; if (typeof value === "string") { value = value.toLocaleLowerCase(); } return value.toString().indexOf(filterBy) !== -1; }) ); this.logResult("anyUsers", anyUsers); }
Are any people under 40?:true anyUsers:[ {"name":"User 4","age":27}, {"name":"User 5","age":42}, {"name":"User 6","age":8}, {"name":"User 1","age":20}, {"name":"User 2","age":35}, {"name":"User 3","age":78} ]
در مثال دوم، جستجویی بر روی تمام خواص شیء شخص انجام شدهاست. در اینجا توسط متد Object.keys، لیست خواص شیء یافت شدهاست. سپس بر روی این لیست توسط متد some، بررسی شدهاست که آیا خاصیت رشتهای وجود دارد که مساوی عبارت filterBy باشد؟ حاصل این بررسی به عنوان شرط متد filter جهت بازگشت آرایهی متناظری از اشخاص یافت شده، استفاده شدهاست.
معادل متد Contains در TypeScript
متد includes که جزو متدهای توکار ES7 است، میتواند معادلی برای متد Contains باشد و کار آن بررسی وجود عنصری در یک لیست است:
equivalentToContains() { const searchElement: Person = { name: "User 4", age: 27 }; const containsUser4 = this.people.includes(searchElement); // ECMAScript 2016 = ECMAScript 7 this.logResult("Contains searchElement", containsUser4); // false -> only compares by reference and not by value. const indexOfUser4 = this.people.indexOf(searchElement); // ECMAScript 5 this.logResult("indexOfUser4", indexOfUser4); // -1 -> only compares by reference and not by value. const stringifiedObj = JSON.stringify(searchElement); const includesUser4 = this.people.some(person => JSON.stringify(person) === stringifiedObj); this.logResult("includesUser4", includesUser4); // true -> compares by by value. }
یکی از روشهای مقایسهی بر اساس تمام مقادیر خواص یک شیء، استفاده از متد JSON.stringify است که اگر آنرا با متد some ترکیب کنیم، میتوان به نتیجهی مطلوبی رسید:
Contains searchElement:false indexOfUser4:-1 includesUser4:true
معادل متد All در TypeScript
متد every که جزو متدهای توکار ES5 است، میتواند معادلی برای متد All باشد و کار آن بررسی صحت شرط اعمالی، بر روی تک تک عناصر لیست است. اگر این بررسی با موفقیت صورت گرفت، مقدار true را بازگشت میدهد:
equivalentToAll() { const allUnder30 = this.people.every(person => person.age < 30); // ECMAScript 5 this.logResult("Are all people under 30?", allUnder30); // false }
Are all people under 30?:false
معادل متدهای First و FirstOrDefault در TypeScript
میتوان از متدهای filter و یا find بومی ES5 و ES 6 برای شبیه سازی متدهای First (یافتن اولین عنصر درخواستی در یک لیست) و FirstOrDefault استفاده کرد:
equivalentToFirstOrDefault() { const vahidOrDefault = this.people.filter(item => item.name === "Vahid")[0] || null; // ECMAScript 5 this.logResult("vahidOrDefault", vahidOrDefault); const user1OrDefault = this.people.find(item => item.name === "User 1") || null; // ECMAScript 2015 = ECMAScript 6 this.logResult("user1OrDefault", user1OrDefault); }
معادل متد FindIndex در TypeScript
متد findIndex که جزو متدهای توکار ES6 است، میتواند معادلی برای متد FindIndex در جهت یافتن ایندکس عنصری در یک لیست، بر اساس شرط درخواستی، باشد.
equivalentToFindIndex() { const index = this.people.findIndex(person => person.age === 8); // ECMAScript 2015 = ECMAScript 6 this.logResult("index of the user with age 8", index) }
index of the user with age 8:2
معادل متد Select در TypeScript
متد map که جزو متدهای توکار ES5 است، میتواند معادلی برای متد Select، برای تغییر شکل نهایی خروجی یک لیست باشد:
equivalentToSelect() { const names = this.people.map(person => person.name); // ECMAScript 5 this.logResult("Selected the names of people", names); }
Selected the names of people:["User 4","User 5","User 6","User 1","User 2","User 3"]
معادل متد Aggregate در TypeScript
متد reduce که جزو متدهای توکار ES5 است، میتواند شبیه به متد Aggregate عمل کند و لیستی از عناصر را به یک مقدار کاهش دهد:
equivalentToAggregate() { // ECMAScript 5 const aggregate = this.people.reduce((person1, person2) => { return { name: "", age: person1.age + person2.age }; }); this.logResult("Aggregate age", aggregate.age); // { age: 210 } }
Aggregate age:210
معادل متد ForEach در TypeScript
متد forEach که جزو متدهای توکار ES5 است، میتواند معادلی برای متد ForEach باشد که روشی functional برای پیمودن عناصر یک لیست است:
equivalentToForEach() { // ECMAScript 5 this.people.forEach(person => { this.logResult("person", person); }); }
person:{"name":"User 4","age":27} person:{"name":"User 5","age":42} person:{"name":"User 6","age":8} person:{"name":"User 1","age":20} person:{"name":"User 2","age":35} person:{"name":"User 3","age":78}
معادل متد OrderBy در TypeScript
متد sort که جزو متدهای توکار ES5 است، میتواند معادلی برای متد OrderBy باشد که جهت مرتب سازی عناصر یک لیست از آن استفاده میشود:
// ECMAScript 5 let orderedByAgeAscending = this.people.sort((person1, person2) => { const a = person1.age; const b = person2.age; return a > b ? 1 : -1; }); this.logResult("Ordered by age ascending", orderedByAgeAscending);
- مساوی صفر باشد، تغییری را به وجود نمیآورد.
- کمتر از صفر باشد، اولین عنصر را قبل از دومین عنصر قرار میدهد.
- بیشتر از صفر باشد، دومین عنصر را پس از اولین عنصر قرار میدهد.
منطق مقایسهی فوق را به صورت ذیل نیز میتوان خلاصه کرد:
orderedByAgeAscending = this.people.sort((person1, person2) => person1.age - person2.age); this.logResult("Ordered by age ascending", orderedByAgeAscending);
Ordered by age ascending:[ {"name":"User 6","age":8}, {"name":"User 1","age":20}, {"name":"User 4","age":27}, {"name":"User 2","age":35}, {"name":"User 5","age":42}, {"name":"User 3","age":78} ]
const orderedByName = this.people.sort((person1, person2) => { // name1.localeCompare(name2) // is case insensitive // or use toUpperCase() to ignore character casing const name1 = person1.name.toUpperCase(); const name2 = person2.name.toUpperCase(); return name1 > name2 ? 1 : -1; }) this.logResult("Ordered by name", orderedByName); this.logOriginalArray();
Ordered by name:[ {"name":"User 1","age":20}, {"name":"User 2","age":35}, {"name":"User 3","age":78}, {"name":"User 4","age":27}, {"name":"User 5","age":42}, {"name":"User 6","age":8} ] original this.people:[ {"name":"User 1","age":20}, {"name":"User 2","age":35}, {"name":"User 3","age":78}, {"name":"User 4","age":27}, {"name":"User 5","age":42}, {"name":"User 6","age":8} ]
امکان ترکیب زنجیروار متدهای کار بر روی لیستها در TypeScript
همانند LINQ، در اینجا نیز میتوان متدهای فوق را به صورت زنجیروار بر روی یک لیست فراخوانی و اجرا کرد:
chainFunctionCalls() { const namesOfPeopleOver30OrderedDesc = this.people .filter(person => person.age > 30) .map(person => person.name) .sort((name1, name2) => { // name1.localeCompare(name2) // is case insensitive // or use toUpperCase() to ignore character casing name1 = name1.toUpperCase(); name2 = name2.toUpperCase(); return name2 > name1 ? 1 : -1; }); this.logResult("the names of all people over 30 ordered by name descending", namesOfPeopleOver30OrderedDesc); }
the names of all people over 30 ordered by name descending:["User 5","User 3","User 2"]
معادل متد Skip در TypeScript
متد splice که جزو متدهای توکار ES5 است، میتواند شبیه به متد Skip عمل کند. این متد آرایهای را بازگشت میدهد که حاوی عناصری است که پس از تعداد ذکر شده، در آرایهی اصلی وجود دارند:
equivalentToSkip() { const skip2 = this.people.splice(2); // ECMAScript 5 this.logResult("skip2 -> the deleted elements", skip2); this.logOriginalArray(); }
skip2 -> the deleted elements:[ {"name":"User 3","age":78}, {"name":"User 4","age":27}, {"name":"User 5","age":42}, {"name":"User 6","age":8} ] original this.people:[ {"name":"User 1","age":20}, {"name":"User 2","age":35} ]
مرورگرهای جدید تحت زیر مجموعهای به نام Content Security Policy، قابلیتهای توکاری را اضافه کردهاند تا حملاتی مانند XSS را حتی در برنامهی وبی که برای این نوع حملات تمهیداتی را درنظر نگرفتهاست، خنثی کنند. این قابلیتها به صورت پیش فرض فعال نبوده و نیاز است برنامه نویس صراحتا درخواست فعال شدن آنها را از طریق افزودن تعدادی هدر مشخص به Response، ارائه دهد. در ادامه این هدرها را بررسی خواهیم کرد.
غیرفعال کردن اجرای اسکریپتهای inline
عمدهی حملات XSS زمانی قابلیت اجرا پیدا میکنند که مهاجم بتواند به طریقی (ورودیهای اعتبارسنجی نشده)، اسکریپتی را به درون صفحهی جاری تزریق کند. بنابراین اگر ما به مرورگر اعلام کنیم که دیگر اسکریپتهای inline را پردازش نکن، سایت را تا حد زیادی در مقابل حملات XSS مقاوم کردهایم. این قابلیت به صورت پیش فرض خاموش است؛ چون به طور قطع فعال سازی آن بسیاری از سایتهایی را که عادت کردهاند اسکریپتهای خود را داخل صفحات وب مدفون کنند، از کار میاندازد. این نوع سایتها باید به روز شده و اسکریپتها را از طریق فایلهای خارجی js، به سایت و صفحات خود الحاق کنند.
برای فعال سازی این قابلیت، فقط کافی است هدرهای زیر به Response اضافه شوند:
سطر اول به زودی تبدیل به یک استاندارد W3 خواهد شد؛ اما فعلا فقط توسط کروم 25 به بعد پشتیبانی میشود. سطر دوم توسط مرورگرهایی که از موتور WebKit استفاده میکنند، پشتیبانی میشود و سطر سوم مخصوص فایرفاکس است و IE 10 به بعد.
بعد از فعال شدن این قابلیت، فقط اسکریپتهایی که از طریق دومین شما به صفحه الحاق شدهاند، قابلیت اجرا را خواهند یافت و کلیه اسکریپتهای مدفون شده داخل صفحات، دیگر اجرا نخواهد شد. در این حالت اگر از CDN برای الحاق اسکریپتی استفاده میکنید، مثلا مانند الحاق jQuery به صفحه، نیاز است مسیر آنرا صراحتا در این هدر ذکر کنید:
علاوه بر آن حتی میشود پردازش تمام منابع مورد استفاده را نیز مانند تصاویر، شیوهنامهها، فایلهای فلش و غیره، به دومین جاری محدود کرد:
بدیهی است پس از آشنایی با این مورد، احتمالا در پروژههای جدید خود از آن استفاده کنید (چون inline scriptهای فعلی شما را کاملا از کار میاندازد).
نحوهی اضافه کردن هدرهای Content Security Policy به برنامههای ASP.NET
روشی که با هر دو برنامههای وب فرم و MVC کار میکند، تهیه یک HTTP module است؛ به شرح ذیل:
و یا در برنامههای ASP.NET MVC میتوان یک فیلتر جدید را تعریف کرد و سپس آنرا به صورت عمومی معرفی نمود:
در ماژول تهیه شده چند مورد دیگر را نیز مشاهده میکنید:
الف) X-XSS-Protection مربوط است به IE 8 به بعد
ب) تنظیم هدر X-Frame-Options به SameOrigin سبب میشود تا صفحات سایت شما دیگر توسط Iframeها در سایتهای دیگر قابل نمایش نباشد و فقط در سایت جاری بتوان صفحهای را از همان دومین در صورت نیاز توسط Iframeها نمایش داد.
ج) تنظیم X-Content-Type-Options به nosniff سبب میشود تا IE سعی نکند با اجرای یک محتوا سعی در تشخیص mime-type آن کند و به این ترتیب امنیت دسترسی و مشاهده اشیاء قرار گرفته در صفحه (و یا تزریق شده توسط مهاجمین) به شدت بالا خواهد رفت.
برای مطالعه بیشتر
Security through HTTP response headers
پروژهی کاملی مخصوص افزودن هدرهای یاد شده
https://nwebsec.codeplex.com/
یک نکته تکمیلی
توصیه شدهاست تا دیگر از روال رویدادگردان PreSendRequestHeaders برای ارسال هدرها استفاده نکنید؛ چون با پردازشهای غیرهمزمان تداخل ایجاد میکند.
غیرفعال کردن اجرای اسکریپتهای inline
عمدهی حملات XSS زمانی قابلیت اجرا پیدا میکنند که مهاجم بتواند به طریقی (ورودیهای اعتبارسنجی نشده)، اسکریپتی را به درون صفحهی جاری تزریق کند. بنابراین اگر ما به مرورگر اعلام کنیم که دیگر اسکریپتهای inline را پردازش نکن، سایت را تا حد زیادی در مقابل حملات XSS مقاوم کردهایم. این قابلیت به صورت پیش فرض خاموش است؛ چون به طور قطع فعال سازی آن بسیاری از سایتهایی را که عادت کردهاند اسکریپتهای خود را داخل صفحات وب مدفون کنند، از کار میاندازد. این نوع سایتها باید به روز شده و اسکریپتها را از طریق فایلهای خارجی js، به سایت و صفحات خود الحاق کنند.
برای فعال سازی این قابلیت، فقط کافی است هدرهای زیر به Response اضافه شوند:
Content-Security-Policy: script-src 'self' X-WebKit-CSP: script-src 'self' X-Content-Security-Policy: script-src 'self'
بعد از فعال شدن این قابلیت، فقط اسکریپتهایی که از طریق دومین شما به صفحه الحاق شدهاند، قابلیت اجرا را خواهند یافت و کلیه اسکریپتهای مدفون شده داخل صفحات، دیگر اجرا نخواهد شد. در این حالت اگر از CDN برای الحاق اسکریپتی استفاده میکنید، مثلا مانند الحاق jQuery به صفحه، نیاز است مسیر آنرا صراحتا در این هدر ذکر کنید:
Content-Security-Policy: script-src 'self' https://youcdn.com X-WebKit-CSP: script-src 'self' https://yourcdn.com X-Content-Security-Policy: script-src 'self' https://yourcdn.com
Content-Security-Policy: default-src 'self' https://youcdn.com X-WebKit-CSP: default-src 'self' https://yourcdn.com X-Content-Security-Policy: default-src 'self' https://yourcdn.com
نحوهی اضافه کردن هدرهای Content Security Policy به برنامههای ASP.NET
روشی که با هر دو برنامههای وب فرم و MVC کار میکند، تهیه یک HTTP module است؛ به شرح ذیل:
using System; using System.Web; namespace AntiXssHeaders { public class SecurityHeadersConstants { public static readonly string XXssProtectionHeader = "X-XSS-Protection"; public static readonly string XFrameOptionsHeader = "X-Frame-Options"; public static readonly string XWebKitCspHeader = "X-WebKit-CSP"; public static readonly string XContentSecurityPolicyHeader = "X-Content-Security-Policy"; public static readonly string ContentSecurityPolicyHeader = "Content-Security-Policy"; public static readonly string XContentTypeOptionsHeader = "X-Content-Type-Options"; } public class ContentSecurityPolicyModule : IHttpModule { public void Dispose() { } public void Init(HttpApplication app) { app.BeginRequest += AppBeginRequest; } void AppBeginRequest(object sender, EventArgs e) { var app = (HttpApplication)sender; var response = app.Context.Response; setHeaders(response); } private static void setHeaders(HttpResponse response) { response.Headers.Set(SecurityHeadersConstants.XFrameOptionsHeader, "SameOrigin"); // For IE 8+ response.Headers.Set(SecurityHeadersConstants.XXssProtectionHeader, "1; mode=block"); response.Headers.Set(SecurityHeadersConstants.XContentTypeOptionsHeader, "nosniff"); //todo: Add /Home/Report --> public JsonResult Report() { return Json(true); } const string cspValue = "default-src 'self';"; // For Chrome 16+ response.Headers.Set(SecurityHeadersConstants.XWebKitCspHeader, cspValue); // For Firefox 4+ response.Headers.Set(SecurityHeadersConstants.XContentSecurityPolicyHeader, cspValue); response.Headers.Set(SecurityHeadersConstants.ContentSecurityPolicyHeader, cspValue); } } }
//// RegisterGlobalFilters -> filters.Add(new ContentSecurityPolicyFilterAttribute()); public class ContentSecurityPolicyFilterAttribute : ActionFilterAttribute { public override void OnActionExecuting(ActionExecutingContext filterContext) { var response = filterContext.HttpContext.Response; response.AddHeader("Content-Security-Policy", "script-src 'self'"); // the rest ... base.OnActionExecuting(filterContext); } }
الف) X-XSS-Protection مربوط است به IE 8 به بعد
ب) تنظیم هدر X-Frame-Options به SameOrigin سبب میشود تا صفحات سایت شما دیگر توسط Iframeها در سایتهای دیگر قابل نمایش نباشد و فقط در سایت جاری بتوان صفحهای را از همان دومین در صورت نیاز توسط Iframeها نمایش داد.
ج) تنظیم X-Content-Type-Options به nosniff سبب میشود تا IE سعی نکند با اجرای یک محتوا سعی در تشخیص mime-type آن کند و به این ترتیب امنیت دسترسی و مشاهده اشیاء قرار گرفته در صفحه (و یا تزریق شده توسط مهاجمین) به شدت بالا خواهد رفت.
برای مطالعه بیشتر
Security through HTTP response headers
پروژهی کاملی مخصوص افزودن هدرهای یاد شده
https://nwebsec.codeplex.com/
یک نکته تکمیلی
توصیه شدهاست تا دیگر از روال رویدادگردان PreSendRequestHeaders برای ارسال هدرها استفاده نکنید؛ چون با پردازشهای غیرهمزمان تداخل ایجاد میکند.
مطالب
چرا TypeScript؟
زبان TypeScript به عنوان superset زبان JavaScript ارائه شدهاست و هدف آن، strong typing و ارائهی قابلیتهای پیشرفتهی زبانهای شیءگرا، جهت نوشتن برنامههای کلاینت و سرور، با کمترین میزان خطاها است. زبان TypeScript چندسکویی و سورس باز است و در نهایت به نگارشی از JavaScript کامپایل میشود که با تمام مرورگرهای فعلی سازگاری دارد و یا در سمت سرور بدون مشکلی توسط NodeJS قابل درک است.
- 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 را فعال میکند:
محتوای پیش فرض و ابتدایی این فایل را در قطعه کد فوق مشاهده میکنید. این فایل json را جهت تنظیمات کامپایلر TypeScript پروژهی جاری، ویرایش خواهیم کرد. در این فایل دکمهی ctrl+space را بفشارید. بلافاصله منوی تکمیل کنندهی این فایل ظاهر میشود. از ترکیب ctrl+space در قسمتهای مختلف این فایل جهت دریافت توصیههای بیشتری نیز میتوان استفاده کرد.
در اینجا قسمتی که نیاز به تنظیم دارد، خاصیت args است. مقادیر آن، پارامترهایی هستند که به کامپایلر typescript ارسال میشوند. برای نمونه آنرا به صورت ذیل تغییر دهید:
پارامتر و سوئیچ target مشخص میکند که خروجی تولیدی باید با فرمت ES 5 باشد. همچنین فایلهای js تولیدی را در پوشهی js در ریشهی پروژه یا پوشهی جاری قرار دهد. پارامتر sourceMap مشخص میکند که علاوه بر فایلهای js، فایلهای map که بیانگر نگاشت بین فایلهای ts و js هستند نیز تولید شوند. این فایلها برای دیباگ برنامه بسیار مفید هستند. پارامتر watch، کلیهی تغییرات پوشهی جاری را تحت نظر قرار داده و به صورت خودکار کار کامپایل را انجام میدهد. در آخر نیز فایل و یا فایلهای ts مدنظر ذکر میشوند.
برای اجرای کامپایلر، ابتدا از منوی view گزینهی toggle output را انتخاب کنید تا بتوان خروجی نهایی کامپایلر را مشاهده کرد. سپس گزینهی view->command pallet و اجرا tasks< را انتخاب کنید. در ادامه همانند مرحلهی قبل، یعنی گزینهی run build task را اجرا کنید (که خلاصهی این عملیات ctrl+shift+B است).
به این ترتیب پوشهی js که در خاصیت args مشخص کردیم، تولید میشود:
البته این خطا هم در قسمت output نمایش داده میشود:
علت اینجا است که در تنظیمات فوق، خاصیت 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 تنظیم شده) ، پیام ذیل مشاهده میشود:
به این معنا که اینبار پارامتر watch را شناسایی کردهاست و دیگر از کامپایلر قدیمی tsc استفاده نمیکند. برای آزمایش آن، از منوی view گزینهی split editor را انتخاب کنید و سپس در سمت چپ فایل test.ts و در سمت راست، فایل test.js کامپایل شده را باز کنید:
در اینجا چون پارامتر 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
- 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