در این مقاله قصد داریم به آموزش زبان جدید Typescript بپردازیم .همان طور که می دانید جاوااسکریپت یک زبان اسکریپتی سمت کلاینت است ولی با افزودن ویژگی های زیادی از جمله شی گرایی به آن ، مایکروسافت جاوااسکریپت را به صورت زبانی برای برنامه نویسی در پروژه های بزرگ در آورده است.

با کمک Typescript می توان برنامه ای با جاوااسکریپت در مقیاس بزرگ تولید کرد.به طوری که با هر مرورگر و با هر نوعی از سیستم عامل سازگاری داشته باشد.

typescript توسط مایکروسافت و در سال2012 ارائه داد.در Visual Studio پشتیبانی میشود و Intellisense دارد.مایکروسافت ویژگی شی گرایی را هم به Typescript افزوده است و می توان کد ها را با همان Syntax آشنای شی گرایی نوشت .

بر خلاف Javascript در Typescript چون از شی گرایی پشتیبانی می کند می توانیم علاوه بر کلاس از اینترفیس هم استفاده کنیم.در پروژه های بزرگ و پیچیده این زبان در دسته بندی ، خواناتر شدن کد، نگه داری راحت تر، و اعمال راحت تر تغییرات بعدی از جاوااسکریپت بهتر عمل می کند.

اگر واژه Typescript را جستجو کنید، معنای زیر دستگیرتان می شود:

Typescript یک نوع قویتری از جاوااسکریپت است که پس از کامپایل شدن به جاوااسکریپت تبدیل می شود.معنای دقیق تر این تعریف چیست ؟Typescript فرزند مایکروسافت است که در سال 2012 برای اولین بار انتشار یافت و توسط یک برنامه نویس دانمارکی به نام  Andres Hejlsberg  که زبان های حجیم و قدرتمندی مانند دلفی و سی شارپ را نوشته، ارائه شده است.

انواع مورد استفاده در Typescript

 Number : معادل نوع داده ای Number در جاوااسکریپت است و برای ذخیره اعداد صحیح و اعشاری استفاده می شود.

String :معادل نوع داده ای رشته ای است و برای ذخیره سازی مجموعه ای از کاراکتر ها استفاده می شود.

Boolean :مقادیر True  و  false را درون خود نگه می دارد

Null

Undefined :معادل نوع داده ای Undifined در جاوااسکریپت است .اگر به متغیری مقداری اختصاص ندهیم به صورت پیش فرض Undefined خواهد بود

Array

var thingstodo:string[]={‘work’,’play’,’eat’, ‘sleep’}; 

Enum

enum weekdays {monday, tuesday};

Any

هر چیز دیگری می تواند زیرمجموعه Any باشد.

اما اینطور نیست که همه چیز دارای نوع باشد.می توانید متغیرها را با نوع و یا بدون ذکر نوع تعریف کنیدو از کلمه کلیدی Var استفاده کنید.

var  notSure: any = 4;

notSure=’not sure’;

notSure=true;

var list: any[]=[1, true, ‘whatever’];

list[1]=100.

interface و کلاس

مقدار زیادی از انتقادات وارد شده به جاوااسکریپت از ناحیه شی گرایی بوده است.اینکه این زبان ویژگی های شی گرایی همچون پلی مرفیسم ، وراثت و ...ندارد محل انتقاد بوده است.در ضمن برای App های بزرگ اگر با جاوااسکریپت نوشته شوند سازمان دهی کدها به صورت منظم و اصولی نخواهد بود.برای رفع این کمبودها مفاهیم شی گرایی چون اینترفیس و کلاس به Typescript اضافه شده است .

اینترفیس ها ساختار امکانات ومتد های اضافه شده به کلاس ها را معین می کنند.این اینترفیس ها توسط کلاس ها به ارث برده شده و هر کدام از این کلاس ها به دلخواه خود پیاده سازی را انجام می دهند.برای مثال

interface IPerson {
    name: string;
    location: string;
    age: number;
}

نوع کلاس هم همانطور که با آن اشنایی داریدامکان ارث بری ،accessors، modifiers، و همچنین متد ها را فراهم می کنند، مثال زیر را ببینید.

class Animal {
    private name:string;
    constructor(theName: string) { this.name = theName; }
    move(meters: number) {
        alert(this.name + " moved " + meters + "m.");
    }
}

توضیح کدهای Typescript پروژه

ساختن ماژولی برای فراخوانی نقشه و افزودن اینترفیس Ideveloper به درون آن

module Mapping {
interface IDeveloper {
        name: string;
        location: string;
        country: string;
        latitude: number;
        longitude: number;
        icontype: string;
    }
}

حال کلاسی بسازید که Googlemap را فراخوانی کند.سازنده این کلاس سه پارامتر می گیرد

mapDiv: عنصر Dom که باید نقشه را میزبانی کند

data :اطلاعات نقشه

Type:نوع نقشه

constructor(mapDiv: Element, data: any[], type:string) {
    var devs: Array<IDeveloper> = data;
    var lats = [], longs=[];
    var center: number[];
    devs.map((value)=> {
        lats.push(value.latitude);
        longs.push(value.longitude);
    });
    center = this.getLatLngCenter(lats, longs);

    this.options={
        center: { lat: center[0], lng: center[1] },
        scrollwheel: false,
        zoom: 2
    };

    this.map = new google.maps.Map(mapDiv, this.options);

    switch(type) {
        case "heat":
            this.map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
            this.addHeatMapLayer(data, this.map);
            break;

        default:
            this.makeMakers(data, this.map);
            break;
    }
}

به غیر از سازنده بالا چند تابع دیگر هم وجود دارند کهبرای ایجاد نقشه گرمایش به کمکمان می آیند.

addHeatMapLayer(data, map){
           var points: google.maps.LatLng[] = [];
           var devs: Array<IDeveloper> = data;

           devs.map((value)=> {
               points.push(new google.maps.LatLng(value.latitude, value.longitude));
           });

           var heatmap = new google.maps.visualization.HeatmapLayer({
               data: points,
               map: map
           });
  }

بعد از انجام مراحل بالا کد اسکریپت زیر را به بالای صفحه Html خود می افزاییم

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization"></script>
<script type="text/javascript" src="libs/markerclusterer.min.js"></script>
<script type="text/javascript" src="mapping.js"></script>
<script type="text/javascript">
        $(function(){
            $.get("data/devs.json", function(data, status){
                var mapCanvasCount = document.getElementById("mapDev");
                var googleMap = new Mapping.GoogleMap(mapCanvasCount, data, 'count');
            });
        });
</script>