var state = Battery.State; // Charging, Full, Discharging, ...
var state = Battery.State; // Charging, Full, Discharging, ...
با TypeScript چه چیزهایی به دست خواهیم آورد؟
یک نکته مهم این است که این زبان به خوبی در Visual Studio پشتیبانی میشود و قابلیت Intellisense نوشتن برنامه به این زبان را دلپذیرتر خواهد کرد و از طرفی دیگر به نظر من یکی از مهمترین مزیت هایی که TypeScript در اختیار ما قرار میدهد این است که میتوانیم به صورت Syntax آشنای شی گرایی کد نویسی کنیم و خیلی راحتتر کدهای خود را سازمان دهی کرده و از نوشتن کدهای تکراری اجتناب کنیم.
یکی دیگر از مزیتهای مهم این زبان این است که این زبان از Static Typing به خوبی پشتیبانی میکند. این بدین معنی است که شما ابتدا باید متغیرها را تعریف کرده و نوع آنها را مشخص نمایید و هم چنین در هنگام پاس دادن مقادیر به پارامترهای توابع باید حتما به نوع داده ای آنها دقت داشته باشید چون کامپایلر بین انواع داده ای در TypeScript تمایز قایل است و در صورت رعایت نکردن این مورد شما با خطا مواجه خواهید شد. این تمایز قایل شدن باعث میشود که برنامه هایی خواناتر داشته باشیم از طرفی باعث میشود که خطا یابی و نوشتن تست برای برنامه راحتتر و تمیزتر باشد. بر خلاف JavaScript، در TypeScript(به دلیل پشتیبانی از شی گرایی) میتوانیم علاوه بر داشتن کلاس، اینترفیس نیز داشته باشیم و در حال حاضر مزایای استفاده از اینترفیس بر کسی پوشیده نیست.
به دلیل اینکه کدهای TypeScript ابتدا کامپایل شده و بعد تبدیل به کدهای JavaScript میشوند در نتیجه قبل از رسیدن به مرحله اجرای پروژه، ما از خطاهای موجود در کد خود مطلع خواهیم شد.
البته این نکته را نیز فراموش نخواهیم کرد که این زبان تازه متولد شده است(سال 2012 توسط Anders Hejlsberg) و همچنان در حال توسعه است و این در حال حاضر مهمترین عیب این زبان میتواند باشد چون هنوز به پختگی سایر زبانهای اسکریپتی در نیامده است.
در ذیل یک مثال کوچک به زبان TypeScript و JavaScript را برای مقایسه در خوانایی و راحتی کد نویسی قرار دادم:
TypeScript:
class Greeter { greeting: string; constructor (message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } }
var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; })();
Program : یک برنامه TypeScript مجموعه ای از یک یا چند Source File است. این Source Fileها شامل کدهای پیاده سازی برنامه هستند ولی در خیلی موارد برای خوانایی بیشتر برنامه میتوان فقط تعاریف را در این فایلهای سورس قرار داد.
Module: ماژول در TypeScript شبیه به مفاهیم فضای نام یا namespace در دات نت است و میتواند شامل چندین کلاس یا اینترفیس باشد.
Class : مشابه به مفاهیم کلاس در دات نت است و دقیقا همان مفهوم را دارد. یک کلاس میتواند شامل چندین تابع و متغیر با سطوح دسترسی متفاوت باشد. در TypeScript مجاز به استفاده از کلمات کلیدی public و private نیز میباشید. یک کلاس در Typescript میتواند یک کلاس دیگر را توسعه دهد(ارث بری در دات نت) و چندین اینترفیس را پیاده سازی نماید.
Interface: یک اینترفیس فقط شامل تعاریف است و پیاده سازی در آن انجام نخواهد گرفت. یک اینترفیس میتواند چندین اینترفیس دیگر را توسعه دهد.
Function: معادل متد در دات نت است. میتواند پارامتر ورودی داشته باشد و در صورت نیاز یک مقدار را برگشت دهد.
Scope: دقیقا تمام مفاهیم مربوط به محدوده فضای نام و کلاس و متد در دات نت در این جا نیز صادق است.
آماده سازی Visual Studio برای شروع به کار
در ابتدا باید Template مربوطه به TypeScript را نصب کنید تا از طریف VS.Net بتوانیم به راحتی به این زبان کد نویسی کنیم. میتوانید فایل نصب را از اینجا دانلود کنید. بعد از نصب از قسمت Templateهای موجود گزینه Html Application With TypeScript را انتخاب کنید
یا از قسمت Add در پروژههای وب خود نظیر MVC گزینه TypeScript File را انتخاب نمایید.
در پست بعدی کد نویسی با این زبان را آغاز خواهیم کرد.
using System;
using System.ComponentModel.DataAnnotations;
namespace MvcApplication9.Models
{
public class Customer
{
public int Id { set; get; }
[Required(ErrorMessage = "Name is required.")]
[StringLength(50)]
public string Name { set; get; }
[Display(Name = "Email address")]
[Required(ErrorMessage = "Email address is required.")]
[RegularExpression(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*",
ErrorMessage = "Please enter a valid email address.")]
public string Email { set; get; }
[Range(0, 10)]
[Required(ErrorMessage = "Rating is required.")]
public double Rating { set; get; }
[Display(Name = "Start date")]
[Required(ErrorMessage = "Start date is required.")]
public DateTime StartDate { set; get; }
}
}
using System.Web.Mvc;
using MvcApplication9.Models;
namespace MvcApplication9.Controllers
{
public class CustomerController : Controller
{
[HttpGet]
public ActionResult Create()
{
var customer = new Customer();
return View(customer);
}
[HttpPost]
public ActionResult Create(Customer customer)
{
if (this.ModelState.IsValid)
{
//todo: save data
return Redirect("/");
}
return View(customer);
}
}
}
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
@{ Html.EnableClientValidation(false); }
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>Customer</legend>
<div class="editor-label">
@Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
<input data-val="true" data-val-required="The Birthday field is required." id="Birthday" name="Birthday" type="text" value="" />
<script src="../../Scripts/customvaildation.js" type="text/javascript"></script>
using System;
using System.ComponentModel.DataAnnotations;
namespace MvcApplication9.CustomValidators
{
public class MyDateValidator : ValidationAttribute
{
public int MinYear { set; get; }
public override bool IsValid(object value)
{
if (value == null) return false;
var date = (DateTime)value;
if (date > DateTime.Now || date < new DateTime(MinYear, 1, 1))
return false;
return true;
}
}
}
[Display(Name = "Start date")]
[Required(ErrorMessage = "Start date is required.")]
[MyDateValidator(MinYear = 2000,
ErrorMessage = "Please enter a valid date.")]
public DateTime StartDate { set; get; }
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using MvcApplication9.CustomValidators;
namespace MvcApplication9.Models
{
public class Customer : IValidatableObject
{
//... same as before
public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
{
var fields = new[] { "StartDate" };
if (StartDate > DateTime.Now || StartDate < new DateTime(2000, 1, 1))
yield return new ValidationResult("Please enter a valid date.", fields);
if (Rating > 4 && StartDate < new DateTime(2003, 1, 1))
yield return new ValidationResult("Accepted date should be greater than 2003", fields);
}
}
}
protected override ValidationResult IsValid(object value, ValidationContext validationContext)
{
var info = validationContext.ObjectType.GetProperty("Rating");
//...
return ValidationResult.Success;
}
using System;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
using System.Collections.Generic;
namespace MvcApplication9.CustomValidators
{
public class MyDateValidator : ValidationAttribute, IClientValidatable
{
// ... same as before
public IEnumerable<ModelClientValidationRule> GetClientValidationRules(
ModelMetadata metadata,
ControllerContext context)
{
var rule = new ModelClientValidationRule
{
ValidationType = "mydatevalidator",
ErrorMessage = FormatErrorMessage(metadata.GetDisplayName())
};
yield return rule;
}
}
}
/// <reference path="jquery-1.5.1-vsdoc.js" />
/// <reference path="jquery.validate-vsdoc.js" />
/// <reference path="jquery.validate.unobtrusive.js" />
jQuery.validator.addMethod("mydatevalidator",
function (value, element, param) {
return Date.parse(value) < new Date();
});
jQuery.validator.unobtrusive.adapters.addBool("mydatevalidator");
<script src="@Url.Content("~/Scripts/customvaildation.js")" type="text/javascript"></script>
1. .field-validation-error
2. .field-validation-valid
3. .input-validation-error
4. .input-validation-valid
5. .validation-summary-errors
6. .validation-summary-valid
[MetadataType(typeof(CustomerMetadata))]
public partial class Customer
{
class CustomerMetadata
{
}
}
public partial class Customer : IValidatableObject
{
[Required(ErrorMessage = "Name is required.")]
[StringLength(50)]
[System.Web.Mvc.Remote(action: "CheckUserNameAndEmail",
controller: "Customer",
AdditionalFields = "Email",
HttpMethod = "POST",
ErrorMessage = "Username is not available.")]
public string Name { set; get; }
[HttpPost]
[OutputCache(Location = OutputCacheLocation.None, NoStore = true)]
public ActionResult CheckUserNameAndEmail(string name, string email)
{
if (name.ToLowerInvariant() == "vahid") return Json(false);
if (email.ToLowerInvariant() == "name@site.com") return Json(false);
//...
return Json(true);
}
using System.ComponentModel.DataAnnotations;
namespace MvcApplication9.Helper
{
public static class ValidationHelper
{
public static bool TryValidateObject(this object instance)
{
return Validator.TryValidateObject(instance, new ValidationContext(instance, null, null), null);
}
}
}
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Vue.js گرفتن یک المنت در </title> </head> <body> <div id="main"> <input type="text" name="fullName" id="fullName"> <button @click='getFullNameValue()'>Show Me</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> new Vue({ el: '#main', data() { return { } }, methods: { getFullNameValue() { let fullNameValue = document.querySelector('#fullName').value; alert(fullNameValue); } } }); </script> </body> </html>
let fullNameValue = document.querySelector('#fullName')
getFullNameValue() { //let fullNameValue = document.querySelector('#fullName').value; let fullNameValue = $('#fullName'); alert(fullNameValue.val()); }
getFullNameValue() { //let fullNameValue = document.querySelector('#fullName').value; //let fullNameValue = $('#fullName').val(); let fullNameValue = this.$el.querySelector('#fullName'); alert(fullNameValue.value ); }
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Vue.js گرفتن یک المنت در </title> </head> <body> <div id="main"> <input type="text" name="fullName" id="fullName" ref="refFullName"> <button @click='getFullNameValue()'>Show Me</button> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> new Vue({ el: '#main', data() { return { } }, methods: { getFullNameValue() { //let fullNameValue = document.querySelector('#fullName').value; //let fullNameValue = $('#fullName').val(); //let fullNameValue = this.$el.querySelector('#fullName').value; let fullNameValue = this.$refs.refFullName; alert(fullNameValue.value); } } }); </script> </body> </html>
getFullNameValue: function() { ... }
<button v-on:click='getFullNameValue()'>Show Me</button>
document.cookie = "name=value; expires=date; domain=theDomain; path=thePath; secure";
document.cookie = 'myCookie=myValue; max-age=432000; domain=d.com; path=/test';
myCookie=myValue
document.cookie = 'mySecondCookie=mySecondValue; path=/'
myCookie=myValue; mySecondCookie=mySecondValue
function setCookie(data, value) { if (typeof data === "string") { data = { name: data, value: value }; }; if (!data.name) throw "Cookie's name can not be null."; var cookie = escape(data.name) + "=" + escape(data.value); var expDate = null; if (data.expDays) { expDate = new Date(); expDate.setDate(expDate.getDate() + data.expDays); } else if (data.expYear && data.expMonth && data.expDay) { expDate = new Date(data.expYear, data.expMonth, data.expDay); } else if (data.expires) { expDate = data.expires; } else if (data.maxAge) { expDate = new Date(); expDate.setSeconds(expDate.getSeconds() + data.maxAge); } if (expDate != null) cookie += "; expires=" + expDate.toGMTString(); if (data.domain) cookie += "; domain=" + escape(data.domain); if (data.path) cookie += "; path=" + escape(data.path); if (data.secure) cookie += "; secure"; document.cookie = cookie; return document.cookie; }
setCookie('cookie1', 'Value1'); setCookie({name:'cookie1', value:'Value1'}); setCookie({name:'cookie2', value:'Value2', expDays:10}); setCookie({name:'cookie3', value:'Value3', expires:new Date()}); setCookie({name:'cookie4', value:'Value4', expYear:2013, expMonth:0, expDay:13}); setCookie({name:'cookie3', value:'Value3', maxAge:365*24*60*60}); setCookie({name:'cookie5', value:'Value5', domain:'d.net', path:'/'}); setCookie({name:'cookie6', value:'Value6', secure:true}); setCookie({name:'cookie7', value:'Value7', expDays:100, domain:'dd.com', path:'/employee', secure:true});
function delCookie(data) { if (typeof data === "string") { data = { name: data }; }; data.expDays = -1; return setCookie(data); }
delCookie('myCookie'); delCookie({ name: 'myCookie', domain: 'd.com', path: '/test' });
function getCookie(name) { var cookies = document.cookie.split(";"); for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].split("="); if (cookie[0].trim() == escape(name)) { return unescape(cookie[1].trim()); } } return null; }
String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, ""); };
String.prototype.trimStart = function () { return this.replace(/^\s+/, ""); }; String.prototype.trimEnd = function () { return this.replace(/\s+$/, ""); };
cookie.shift(1); return unescape(cookie.join('=').trim());
function getCookie(name) { var foundCookies = []; var cookies = document.cookie.split(";"); for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].split("="); if (cookie[0].trim() == escape(name) && cookie.length >= 2) { cookie.shift(1); foundCookies.push(unescape(cookie.join('=').trim())); } } return foundCookies.length > 1 ? foundCookies : foundCookies.length == 1 ? foundCookies[0] : null; }
<!DOCTYPE html> <html ng-app> <head> <title>Sample2</title> </head> <body> <div> <input type="text" ng-model="greeting.text" /> <p>{{greeting.text}}, World!</p> </div> <script src="../Scripts/angular.js"></script> </body> </html>
<!DOCTYPE html> <html ng-app> <head> <title>Sample2</title> </head> <body> <div ng-controller="GreetingController"> <input type="text" ng-model="greeting.text" /> <p>{{greeting.text}}, World!</p> <button ng-click="showData()">Show</button> </div> <script src="../Scripts/angular.js"></script> <script> var GreetingController = function ($scope, $window) { $scope.greeting = { text: "Hello" }; $scope.showData = function () { $window.alert($scope.greeting.text); }; }; </script> </body> </html>
var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m; var FN_ARG_SPLIT = /,/; var FN_ARG = /^\s*(_?)(\S+?)\1\s*$/; var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;
برنامه نویسی تابعی و مفاهیم آن برای صنعت نرمافزار و اپلیکشنهای داده محور روز به روز از اهمیت بیشتری برخوردار میشود. اما برای اینکه
بتوانیم از برنامه نویسی کاربردی بهرهمند شویم لازم نیست حتماً از یک
زبان کاملاً تابعی مثل هسکل استفاده کنیم. میتوانیم اصول و الگوهای
برنامه نویسی تابعی را حتی در زبانهای شیگرا مانند #C نیز دنبال کنیم.
نتیجه ممکن است به اندازه یک زبان تابعی مفید و مناسب نباشد، اما با
این وجود سبک غیر تابعی ساخت کد ما را تحت تأثیر قرار میدهد.