موقعیکه از دستور -optimize استفاده میشود، کد IL تولید شده شامل تعداد زیادی از دستورات بدون دستورالعمل No Operation یا به اختصار NOP و پرش‌های شاخه‌ای به خط کد بعدی می‌باشد. این دستور العمل‌ها ما را قادر میسازند تا ویژگی edit & Continue را برای دیباگ کردن و یک سری دستورالعمل‌ها را برای کدنویسی راحت‌تر برای دیباگ کردن و ایجاد break pointها داشته باشیم.
موقعی که کد IL بهینه شده تولید شود، این خصوصیات اضافه حذف خواهند شد و دنبال کردن خط به خط کد، کار سختی میشود. ولی در عوض فایل نهایی exe یا dll، کوچکتر خواهد شد. بهینه سازی IL توسط JIT حذف خواهد شد و برای کسانی که دوست دارند کدهای IL را تحلیل و آنالیز کنند، خواندنش ساده‌تر و آسان‌تر خواهد بود.
نکته‌ی بعدی اینکه موقعیکه شما از سوئیچ (/debug(+/full/pdbonly استفاده می‌کنید، یک فایل PDB یا Program Database ایجاد میشود. این فایل به دیباگرها کمک می‌کند تا متغیرهای محلی را شناسایی و به کدهای IL متصل شوند. کلمه‌ی full بدین معنی است که JIT میتواند دستورات بومی را ردیابی کند تا مبداء آن کد را پیدا کند. سبب میشود که ویژوال استودیو به یک دیباگر متصل شده تا در حین اجرای پروسه، آن را دیباگ کند. در صورتی که این سوئیچ را استفاده نکنید، به طور پیش فرض پروسه اجرا و مصرف حافظه کمتر میشود. اگر شما پروسه‌ای را اجرا کنید که دیباگر به آن متصل شود، به طور اجباری JIT مجبور به انجام عملیات ردیابی خواهد شد؛ مگر اینکه گزینه‌ی suppress jit optimization on module load را غیرفعال کرده باشید.
موقعیکه در ویژوال استودیو دو حالت دیباگ و ریلیز را انتخاب می‌کنید، در واقع تنظیمات زیر را اجرا می‌کنید:
//debug /optimize /debug:full //======================= //Release /optimize+ /debug:pdbonly
if (numberOfCPUs > 1) {
...
}
npx create-react-app tssample --template typescript
import React from "react";
export const Head = () => {
return (
<div>
<h1>Hello</h1>
</div>
);
}; import { Head } from "./components/Head";
// ...
function App() {
return (
<div className="App">
<Head />
// ...
</div>
);
}
export default App; import React from "react";
export const Head = ({ title, isActive }) => {
return (
<div>
<h1>{title}</h1>
{isActive && <h3>Active</h3>}
</div>
);
}; 
{
"compilerOptions": {
"strict": true /* Enable all strict type-checking options. */
}
} {
"compilerOptions": {
"strict": true,
"noImplicitAny": false
}
} type Props = {
title: string;
isActive: boolean;
}; export const Head = ({ title, isActive }: Props) => { Head.propTypes = {
title: PropTypes.string,
isActive: PropTypes.bool
} 
<Head title="Hello" isActive={true} /> 
شاید ساده‌ترین تعریف برای Saltarelle این باشد که «کامپایلریست که کدهای C# را به جاوا اسکریپت تبدیل می‌کند». محاسن زیادی را می‌توان برای اینگونه کامپایلر‌ها نام برد؛ مخصوصا در پروژههای سازمانی که نگهداری از کدهای جاوا اسکریپت بسیار سخت و گاهی خارج از توان است و این شاید مهمترین عامل ظهور ابزارهای جدید از قبیل Typescript باشد.
در هر صورت اگر حوصله و وقت کافی برای تجهیز تیم نرم افزاری، به دانش یک زبان جدید مانند Typescript نباشد، استفاده از توان و دانش تیم تولید، از زبان C# ساده‌ترین راه حل است و اگر ابزاری مطمئن برای استفاده از حداکثر قدرت JavaScript همراه با امکانات نگهداری و توسعه کدها وجود داشته باشد، بی شک Saltarelle یکی از بهترین‌های آنهاست.
قبلا کامپایلر هایی از این دست مانند Script# وجود داشتند، اما فاقد همه امکانات C# بوده وعملا قدرت کامل C# در کد نویسی وجود نداشت. اما با توجه به ادعای توسعه دهندگان این کامپایلر سورس باز در استفادهی حداکثری از کلیه ویژگی‌های C# 5 و با وجود Library های متعدد می‌توان Saltarelle را عملا یک کامپایلر موفق در این زمینه دانست.
برای استفاده از Saltarelle در یک برنامه وب ساده باید یک پروژه Console Application به Solution اضافه کرد و پکیج Saltarelle.Compiler را از nuget نصب نمایید. بعد از نصب این پکیج، کلیه Reference ها از پروژه حدف می‌شوند و هر بار Build توسط کامپایلر Saltarelle انجام میشود. البته با اولین Build، مقداری Error را خواهید دید که برای از بین بردنشان نیاز است پکیج Saltarelle.Runtime را نیز در این پروژه نصب نمایید:
PM> Install-Package Saltarelle.Compiler PM> Install-Package Saltarelle.Runtime
در صورتیکه کماکان Build نهایی با Error همرا بود، یکبار این پروژه را Unload و سپس مجددا Load نمایید
UI یک پروژه وب MVC است و Client یک Console Application که پکیج‌های مورد نیاز Saltarelle روی آن نصب شده است.
در صورتیکه پروژه را Build نماییم و نگاهی به پوشه‌ی Debug بیاندازیم، یک فایل JavaScript همنام پروژه وجود دارد:
برای اینکه بعد از هر بار Build ، فایل اسکریپت به پوشه‌ی مربوطه در پروژه UI منتقل شود کافیست کد زیر را در Post Build پروژه Client بنویسیم:
copy "$(TargetDir)$(TargetName).js" "$(SolutionDir)SalratelleSample.UI\Scripts"
اکنون پس از هر بار Build ، فایل اسکریپت مورد نظر در پوشه‌ی Scripts پروژه UI آپدیت میشود:
در ادامه کافیست فایل اسکریپت را به layout اضافه کنیم.
<script src="~/Scripts/SaltarelleSample.Client.js"></script>
در پوشه‌ی Saltarelle.Runtime در پکیج‌های نصب شده، یک فایل اسکریپت به نام mscorlib.min.js نیز وجود دارد که حاوی اسکریپت‌های مورد نیاز Saltarelle در هنگام اجراست. آن را به پوشه اسکریپت‌های پروژه UI کپی نمایید و سپس به Layout اضافه کنید.
<script src="~/Scripts/mscorlib.min.js"></script> <script src="~/Scripts/SaltarelleSample.Client.js"></script>
حال نوبت به اضافه نمودن libraryهای مورد نیازمان است. برای دسترسی به آبجکت هایی از قبیل document, window, element و غیره در جاوااسکریپت می‌توان پکیج Saltarelle.Web را در پروژه‌ی Client نصب نمود و برای دسترسی به اشیاء و فرمانهای jQuery، پکیج Salratelle.jQuery را نصب نمایید.
> Install-Package Saltarelle.Web > Install-Package Saltarelle.jQuery
به این libraryها imported library می‌گویند. در واقع، در زمان کامپایل، برای این libraryها فایل اسکریپتی تولید نمی‌شود و فقط آبجکت‌های #C هستند که که هنگام کامپایل تبدیل به کدهای ساده اسکریپت می‌شوند که اگر اسکریپت مربوط به آنها به صفحه اضافه نشده باشد، اجرای اسکریپت با خطا مواجه میشود.
به طور ساده‌تر وقتی از jQuery library استفاده می‌کنید هیچ فایل اسکریپت اضافه‌ای تولید نمی‌شود، اما باید اسکریپت jQuery به صفحه شما اضافه شده باشد.
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
مثال ما یک اپلیکیشن ساده برای خواندن فید‌های همین سایت است. ابتدا کدهای سمت سرور را در پروژه UI می نویسیم.
کلاس‌های مورد نیاز ما برای این فید ریدر:
public class Feed
{
public string FeedId { get; set; }
public string Title { get; set; }
public string Address { get; set; }
}
public class Item
{
public string Title { get; set; }
public string Link { get; set; }
public string Description { get; set; }
} و یک کلاس برای مدیریت منطق برنامه
public class SiteManager
{
private static List<Feed> _feeds;
public static List<Feed> Feeds
{
get
{
if (_feeds == null)
_feeds = CreateSites();
return _feeds;
}
}
private static List<Feed> CreateSites()
{
return new List<Feed>() {
new Feed(){
FeedId = "1",
Title = "آخرین تغییرات سایت",
Address = "https://www.dntips.ir/rss.xml"
},
new Feed(){
FeedId = "2",
Title = "مطالب سایت",
Address = "https://www.dntips.ir/feeds/posts"
},
new Feed(){
FeedId = "3",
Title = "نظرات سایت",
Address = "https://www.dntips.ir/feeds/comments"
},
new Feed(){
FeedId = "4",
Title = "خلاصه اشتراک ها",
Address = "https://www.dntips.ir/feed/news"
},
};
}
public static IEnumerable<Item> GetNews(string id)
{
XDocument feedXML = XDocument.Load(Feeds.Find(s=> s.FeedId == id).Address);
var feeds = from feed in feedXML.Descendants("item")
select new Item
{
Title = feed.Element("title").Value,
Link = feed.Element("link").Value,
Description = feed.Element("description").Value
};
return feeds;
}
} کلاس SiteManager فقط یک لیست از فید‌ها دارد و متدی که با گرفتن شناسه‌ی فید ، یک لیست از آیتم‌های موجود در آن فید ایجاد می‌کند.
حال دو ApiController برای دریافت داده‌ها ایجاد می‌کنیم
public class FeedController : ApiController
{
// GET api/<controller>
public IEnumerable<Feed> Get()
{
return SiteManager.Feeds;
}
}
public class ItemsController : ApiController
{
// GET api/<controller>/5
public IEnumerable<Item> Get(string id)
{
return SiteManager.GetNews(id);
}
} در View پیش‌فرض که Index از کنترلر Home است، یک Html ساده برای
فرم صفحه اضافه می‌کنیم
<div>
<div>
<h2>Feeds</h2>
<ul id="Feeds">
</ul>
</div>
<div>
<h2>Items</h2>
<p id="FeedItems">
</p>
</div>
</div> در المنت Feeds لیست فید‌ها را قرار می‌دهیم و در FeedItems آیتم‌های مربوط به هر فید. حال به سراغ کدهای سمت کلاینت می‌رویم و به جای جاوا اسکریپت از Saltarelle استفاده می‌کنیم.
کلاس Program را از پروژه Client باز می‌کنیم و متد Main را به شکل زیر تغییر می‌دهیم:
static void Main()
{
jQuery.OnDocumentReady(() => {
FillFeeds();
});
} بعد از کامپایل شدن، کد #C شارپ بالا به صورت زیر در می‌آید:
$SaltarelleSample_Client_$Program.$main = function() {
$(function() {
$SaltarelleSample_Client_$Program.$fillFeeds();
});
};
$SaltarelleSample_Client_$Program.$main(); و این همان متد معروف jQuery است که Saltarelle.jQuery برایمان ایجاد کرده است.
متد FillFeeds را به شکل زیر پیاده سازی می‌کنیم
private static void FillFeeds()
{
jQuery.Ajax(new jQueryAjaxOptions()
{
Url = "/api/feed",
Type = "GET",
Success = (d,t,r) => {
// Fill
var ul = jQuery.Select("#Feeds");
jQuery.Each((List<Feed>)d, (idx,i) => {
var li = jQuery.Select("<li>").Text(i.Title).CSS("cursor", "pointer");
li.Click(eve => {
FillData(i.FeedId);
});
ul.Append(li);
});
}
});
} آبجکت jQuery، متدی به نام Ajax دارد که یک شی از کلاس jQueryAjaxOptions را به عنوان پارامتر می‌پذیرد. این کلاس کلیه خصوصیات متد Ajax در jQuery را پیاده سازی می‌کند. نکته شیرین آن توانایی نوشتن lambda برای Delegate هاست.
خاصیت Success یک Delegate است که 3 پارامتر ورودی را می‌پذیرد.
public delegate void AjaxRequestCallback(object data, string textStatus, jQueryXmlHttpRequest request);
data همان مقداریست که api باز می‌گرداند که یک لیست از Feed هاست. برای زیبایی کار، من یک کلاس Feed در پروژه Client اضافه می‌کنم که خصوصیاتی مشترک با کلاس اصلی سمت سرور دارد و مقدار برگشی Ajax را به آن تبدیل می‌کنم.
کلاس Feed و Item
[PreserveMemberCase()]
public class Feed
{
//[ScriptName("FeedId")]
public string FeedId;
//[ScriptName("Title")]
public string Title;
//[ScriptName("Address")]
public string Address;
}
[PreserveMemberCase()]
public class Item
{
// [ScriptName("Title")]
public string Title;
// [ScriptName("Link")]
public string Link;
// [ScriptName("Description")]
public string Description;
} jQuery.Each((List<Feed>)d, (idx,i) => {
var li = jQuery.Select("<li>").Text(i.Title).CSS("cursor", "pointer");
li.Click(eve => {
FillData(i.FeedId);
});
ul.Append(li);
}); به ازای هر آیتمی که در شیء بازگشتی وجود دارد، با استفاد از متد each در jQuery یک li ایجاد می‌کنیم. همان طور که می‌بینید کلیه خواص، به شکل Fluent قابل اضافه شدن می‌باشد. سپس برای li یک رویداد کلیک که در صورت وقوع، متد FillData را با شناسه فید کلیک شده فراخوانی می‌کند و در آخر li را به المنت ul اضافه می‌کنیم.
برای هر کلیک هم مانند مثال بالا api را با شناسه‌ی فید مربوطه فراخوانی کرده و به ازای هر آیتم، یک سطر ایجاد می‌کنیم.
private static void FillData(string p)
{
jQuery.Ajax(new jQueryAjaxOptions()
{
Url = "/api/items/" + p,
Type = "GET",
Success = (d, t, r) => {
var content = jQuery.Select("#FeedItems");
content.Html("");
foreach (var item in (List<Item>)d)
{
var row = jQuery.Select("<div>").AddClass("row").CSS("direction", "rtl");
var link = jQuery.Select("<a>").Attribute("href", item.Link).Text(item.Title);
row.Append(link);
content.Append(row);
}
}
});
} 
در این مثال ما از Saltarelle.jQuery برای استفاده از jQuery.js استفاده نمودیم. libraryهای متعددی برای Saltarelle از قبیل linq,angular,knockout,jQueryUI,nodeJs ایجاد شده و همچنین قابلیت‌های زیادی برای نوشتن imported libraryهای سفارشی نیز وجود دارد.
مطمئنا استفاده از چنین کامپایلرهایی راه حلی سریع برای رهایی از مشکلات متعدد کد نویسی با جاوا اسکریپت در نرم افزارهای بزرگ مقیاس است. اما مقایسه آنها با ابزارهایی از قبیل typescript احتیاج به زمان و تجربه کافی در این زمینه دارد.
Could not resolve assembly "System.Web".
The assembly is not in the currently targeted framework ".NETFramework,Version=v4.0,Profile=Client".
Please remove references to assemblies not in the targeted framework or consider retargeting your project.
Inheritance security rules violated while overriding member:
GetObjectData(System.Runtime.Serialization.SerializationInfo, System.Runtime.Serialization.StreamingContext),
Security accessibility of the overriding method must match the security accessibility of the method being overriden.
[assembly: AllowPartiallyTrustedCallers]
public virtual DateTime? LockoutEndDateUtc { get; set; } public virtual DateTimeOffset? LockoutEnd { get; set; } 2012-03-01 00:00:00-05:00
var dateString = "2012-03-01 00:00:00-05:00"; var birthDay = DateTime.Parse(dateString);
2012-02-29 11:00:00 PM
string birthDay = "2012-03-01 00:00:00-05:00"; var dtOffset = DateTimeOffset.Parse(birthDay);
var theDay = dtOffset.Date;
public static class SqlDataReaderExtensions
{
public static DateTime GetDateTimeUtc(this SqlDataReader reader, string name)
{
int fieldOrdinal = reader.GetOrdinal(name);
DateTime unspecified = reader.GetDateTime(fieldOrdinal);
return DateTime.SpecifyKind(unspecified, DateTimeKind.Utc);
}
} import ProductDetails from "./components/productDetails";
// ...
class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="container">
<Switch>
<Route path="/products/:id" component={ProductDetails} />
<Route
path="/products"
render={props => (
<Products param1="123" param2="456" {...props} />
)}
/>
<Route path="/posts/:year/:month" component={Posts} />
<Route path="/admin" component={Dashboard} />
<Route path="/" component={Home} />
</Switch>
</div>
</div>
);
}
} import React, { Component } from "react";
class ProductDetails extends Component {
handleSave = () => {
// Navigate to /products
};
render() {
return (
<div>
<h1>Product Details - </h1>
<button className="btn btn-primary" onClick={this.handleSave}>
</div>
);
}
}
export default ProductDetails; 
<h1>Product Details - {this.props.match.params.id} </h1> {this.state.products.map(product => (
<li key={product.id}>
<a href={`/products/${product.id}`}>{product.name}</a>
</li>
))} import { Link } from "react-router-dom";
// ...
<Link to={`/products/${product.id}`}>{product.name}</Link> <Route path="/posts/:year/:month" component={Posts} /> <Route path="/posts/:year?/:month?" component={Posts} /> import React from "react";
const Posts = ({ match }) => {
return (
<div>
<h1>Posts</h1>
Year: {match.params.year} , Month: {match.params.month}
</div>
);
};
export default Posts; 
> npm i query-string --save
import queryString from "query-string";
const Posts = ({ match, location }) => {
const result = queryString.parse(location.search);
console.log(result);
// ... {approved: "true", sortBy: "newest"} const { approved, sortBy } = queryString.parse(location.search); import React from "react";
const NotFound = () => {
return <h1>Not Found</h1>;
};
export default NotFound; <Route path="/" exact component={Home} /> import { Redirect, Route, Switch } from "react-router-dom";
//...
import NotFound from "./components/notFound";
//...
class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="container">
<Switch>
//...
<Route path="/not-found" component={NotFound} />
<Route path="/" exact component={Home} />
<Redirect to="/not-found" />
</Switch>
</div>
</div>
);
}
} <Redirect from="/messages" to="/posts" />
class ProductDetails extends Component {
handleSave = () => {
// Navigate to /products
this.props.history.push("/products");
}; 
const Dashboard = ({ match }) => {
return (
<div>
<h1>Admin Dashboard</h1>
<div className="row">
<div className="col-3">
<SideBar />
</div>
<div className="col">
<Route path="/admin/users" component={Users} />
<Route path="/admin/posts" component={Posts} />
</div>
</div>
</div>
);
}; import React from "react";
import { Link } from "react-router-dom";
const SideBar = () => {
return (
<ul className="list-group">
<li className="list-group-item">
<Link to="/admin/posts">Posts</Link>
</li>
<li className="list-group-item">
<Link to="/admin/users">Users</Link>
</li>
</ul>
);
};
export default SideBar; import React from "react";
const Users = () => {
return <h1>Admin Users</h1>;
};
export default Users; import React from "react";
const Posts = () => {
return (
<div>
<h1>Admin Posts</h1>
</div>
);
};
export default Posts;