دنیای وب اساساً بر پایه ی JavaScript ، HTML و CSS اجرا می شود. با این حال جاوا اسکریپت فاقد برخی از ویژگی ها برای کمک به توسعه دهندگان برای استفاده در برنامه های بزرگ است . TypeScript اینجا وارد می شود . در این مقاله نگاهی مختصر بر تفاوت های TypeScript و JavaScript می کنیم

جاوا اسکریپت چیست؟

جاوا اسکریپت به عنوان زبان برنامه نویسی برای مرورگر وب Netscape Navigator شروع به کار کرد. Brendan Eich نمونه اولیه را در مدت زمان 10 روز در سال 1995 نوشت. نام JavaScript اشاره ای به زبان جاوا Sun Microsystem است . با این حال این دو زبان کاملاً متفاوت هستند و شباهت نام ها در طول سالها باعث سردرگمی قابل توجهی شده است. جاوا اسکریپت ، که پیشرفت قابل توجهی داشته است ، اکنون در همه مرورگرهای وب مدرن پشتیبانی می شود.

معرفی JavaScript سمت کلاینت در Netscape Navigator به سرعت با معرفی JavaScript سمت سرور در وب سرورهای Netscape Enterprise Server و Microsoft IIS دنبال شد. حدود 13 سال بعد ، رایان دال Node.js را به عنوان یک فریم ورک منبع باز ، چند پلتفرمی ، بر پایه ی جاوا اسکریپت معرفی کرد که مستقل از هر مرورگر یا وب سرور کارکرد دارد.

زبان جاوا اسکریپت

جاوا اسکریپت یک زبان چند پارادایمی است. این زبان دارای سینتکس براکت خمیده و سمی کالمن است .دقیقا مانند خانواده زبان C. دارای تایپ ضعیف و پویا است که یا تفسیر می شود یا (اغلب) به صورت JIT کامپایل می شود . به طور کلی ، جاوا اسکریپت تک رشته ای است . اگرچه API Web Workers وجود دارد که کارهای چند رشته ای را انجام می دهد ، و رویدادها ، فراخوانی عملکردهای ناهمزمان و callbacks وجود دارد.

جاوا اسکریپت از برنامه نویسی شی گرا با استفاده از prototypes به جای وراثت استفاده شده در ++C ، جاوا و #C پشتیبانی می کند .اگرچه سینتکس classدر جاوا اسکریپت ES6 در سال 2015 اضافه شد. جاوا اسکریپت همچنین از برنامه نویسی کاربردی شامل closures ، بازگشت و لامبدا (توابع ناشناس) پشتیبانی می کند.

قبل از جاوا اسکریپت ES6 ، این زبان هیچ بهینه سازی در زمینه Tail Call نداشت. در حال حاضر این کار را انجام می دهد ، اگرچه برای فعال کردن آن باید ( ‘use strict’) را روشن کنید ، و اجرای آن از مرورگر به مرورگر دیگر متفاوت است.

نام “ES6” از کجا می آید؟

نام استاندارد زبان جاوا اسکریپت ، ECMAScript (ES) است ، که توسط استانداردهای بین المللی ECMA ارائه شده است. ES6 ECMAScript 2015 (ES2015) نیز نامیده می شود.

به عنوان یک مثال ساده برای چشیدن طعم زبان جاوا اسکریپت ، در اینجا چند خط کد برای تعیین روز یا عصر آورده ایم که به طور پویا سلامی مناسب را با توجه به زمان در مرور گرد نمایش می دهد

var hour = new Date().getHours();
var greeting;
if (hour < 18) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;

اکوسیستم جاوا اسکریپت

API های متعددی برای جاوا اسکریپت وجود دارد. برخی از آنها توسط مرورگر ارائه می شوند . مانند documentAPI که در کد بالا نشان داده شده ، و برخی دیگر که توسط شخص ثالث ارائه می شوند. برخی از API ها برای استفاده در سمت سرویس گیرنده ، برخی برای استفاده در سمت سرور ، برخی برای استفاده دردسکتاپ و برخی دیگر در بیش از یک محیط کاربرد دارند.

API های مرورگر شامل document object model (DOM) و browser object model (BOM) .

Geolocation,، Canvas ، WebGL، HTMLMediaElement وWebRTC (ارتباطات در زمان واقعی) است.

API های شخص ثالث فراوان است. برخی از آنها رابط کامل برنامه های کاربردی هستند . مانند Google Maps . برخی دیگر ابزارهایی هستند که برنامه نویسی JavaScript HTML5 و CSS را آسان تر می کنند ، مانند jQuery . برخی مانند Express ، فریم ورکی برای اهداف خاص هستند. در Express ، هدف ایجاد سرورهای برنامه وب و تلفن همراه در Node.js است . تعدادی چارچوب دیگر نیز بر روی Express ساخته شده اند .

تعداد زیادی ماژول جاوا اسکریپت وجود دارد به طور تخمینی بیش از 300000. برای استفاده درست از آن ، از یک پیکیج منیجر ، مانند npm ، که پکیج منیجر پیش فرض nodejs است استفاده می کنیم.

پکیج منیجر ها

یکی از جایگزین های npm در صورتی که تمایل به آن نداشتید yarn است. که از فیس بوک آمده است و ادعای نصب بدون هیچ نقض و اشکال را می کند. ابزارهای مشابه شامل Bower (از توییتر) است که به جای ماژول های Node ، اجزای جلویی را مدیریت می کند. Ender ، که خود را خواهر کوچکتر npm می نامد. و jspm ، که از ماژول های ES (استاندارد جدیدتر ECMA برای ماژول ها) استفاده می کند.

Webpack ماژول های جاوا اسکریپت را به بسته هایی ثابت برای مرورگر تبدیل می کند.

Browserify به توسعه دهندگان اجازه می دهد ماژول هایی به سبک Node.js بنویسند که برای استفاده در مرورگر کامپایل می شوند.

لینترز

برای اطمینان بیشتر از JavaScript در غیاب کامپایلیشن ، از linters استفاده می کنیم. این اصطلاح از ابزار لینت زبان C ، که یک ابزار استاندارد یونیکس بود ، گرفته شده است. linter های جاوا اسکریپت شامل JSLint ، JSHint و ESLint هستند . می توانید پس از تغییر کد با استفاده از یک task runner یا IDE خود ، اجرای linters را خودکار کنید. انتخاب بین linters بسته به نوع پروژه و سلیقه شما باز می گردد.

Transpilers به ​​شما امکان می دهد برخی زبان های دیگر مانند CoffeeScript یا TypeScript را به JavaScript ترجمه کنید و جاوا اسکریپت مدرن (مانند کد ES2015) را به جاوا اسکریپت اصلی که تقریباً در هر مرورگری اجرا می شود ، ترجمه کنید. رایج ترین transpiler برای جاوا اسکریپت مدرن Babel است.

TypeScript چیست؟

TypeScript یک مجموعه بزرگ تایپ شده از JavaScript است که به جاوا اسکریپت ساده .(ES3 یا بالاتر ؛ قابل تنظیم است) . کامپایل می شود.کامپایلر خط فرمان منبع باز TypeScript می تواند به عنوان یک بسته Node.js نصب و راه اندازی شود . پشتیبانی TypeScript با Visual Studio 2017 و Visual Studio 2019 ، Visual Studio Code و WebStorm همراه است و می تواند به Sublime Text . Atom . Eclipse . Emacs و Vim نیز اضافه شود.

تفاوت های TypeScript و JavaScript

تایپ اسکریپت optional types, classes و ماژول ها را به جاوا اسکریپت اضافه می کند و از ابزارهای برنامه های کاربردی جاوا اسکریپت در مقیاس بزرگ برای هر مرورگر ، برای هر میزبان و در هر سیستم عامل پشتیبانی می کند. در میان بسیاری از نقاط قوت دیگر برای TypeScript می توان به ، فریم ورک محبوب Angular اشاره کرده که به طور کامل از TypeScript استفاده می کند.

Types توسعه دهندگان جاوا اسکریپت را قادر می سازد تا هنگام توسعه برنامه های کاربردی جاوا اسکریپت از ابزارها و شیوه های توسعه بسیار کار آمد مانند static checking و code refactoring استفاده کنند.

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

TypeScript پشتیبانی از آخرین ویژگی های در حال تکامل جاوا اسکریپت را به همراه دارد . مانند async functions و decorators که به ساخت تکه کدهایی بسیار قوی و کار آمد کمک می کند.

زبان TypeScript

TypeScript زبان جاوا اسکریپت را می پذیرد . اما گزینه های اضافی مانند: (در هنگام کامپایل) type annotations. type checking و classes و module ها را ارائه می کند. همه این موارد هنگامی که می خواهید نرم افزار قوی تولید کنید بسیار مفید است. جاوا اسکریپت فقط در زمان اجرا خطا ایجاد می کند . و بعد فقط در صورتی که برنامه شما به مسیری که خطا دارد برسد.

نقطه شروع کار همان جاوا اسکریپت خالص با پسوند .ts است:

function greeter(person) {
    return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);

اگر این را کد با tsc کامپایل کنید یک فایل یکسان با پسوند .js ایجاد می کند.

حال کد را با type annotation و اضافه کردن person:string در قسمت function ، اضافه کردن کلاس student . اضافه کردن یک interface برای person و در نهایت compiling به شکل زیر تبدیل می شود:

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, 
        public lastName: string) {
            this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}
interface Person {
    firstName: string;
    lastName: string;
}
function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);

هنگامی که این کد را کامپایل می کنید و به جاوا اسکریپت تولید شده نگاه می کنید . خواهید دید که کلاس های TypeScript فقط یک شکل مختصر برای همان وراثت مبتنی بر نمونه اولیه است . که در جاوا اسکریپت ساده ES3 استفاده می شود. توجه داشته باشید که properties پراپرتی های person.firstName و person.lastName به طور خودکار توسط کامپایلر زمانی که attributes public را در constructor کلاس Student می بیند ،تولید می شود. همچنین به اینترفیس Person نیز توسعه می یابد. یکی از بهترین مزایای type annotations در TypeScript این است که توسط ابزارهایی مانند Visual Studio Code شناسایی می شوند:

اگر هنگام ویرایش در VS Code خطایی در کد وجود داشته باشد . پیام های خطا را در برگه مشکلات (Problems) مشاهده خواهید کرد. به عنوان مثال اگر انتهای خط student را حذف کنید مشاهده خواهید کرد:

تبدیل کد جاوا اسکریپت به تایپ اسکریپت

اولین و اصلی ترین مرحله برای مهاجرت از جاوا اسکریپت به TypeScript تغییر نام فایل های .js شما به .ts در یک زمان است. (اگر فایل شما از JSX ، افزونه ای که توسط React استفاده می شود ، استفاده می کند ، باید نام آن را به .tsx تغییر دهید.)

از جمله قدم های دیگر ، شما باید بر اساس ماژول require()یا define()دستورات را به دستورات import TypeScript تغییر دهید. و برای ماژول هر کتابخانه ای که استفاده می کنید فایل های اعلانات را اضافه کنید. همچنین باید ماژول export خود را با استفاده ازعبارت export تایپ اسکریپت بازنویسی کنید . TypeScript مانند Node.js از ماژول های CommonJS پشتیبانی می کند.

اگر در مورد تعداد اشتباه اعداد آرگومان ها خطایی دریافت کردید . می توانید از تابع overload signatures تایپ اسکریپت استفاده کنید. این ویژگی مهمی است که جاوا اسکریپت فاقد آن است. در نهایت ، شما باید types را به توابع خود اضافه کنید و در صورت لزوم از interfaces یا کلاس ها استفاده کنید.

هنگامی که همه فایل های جاوا اسکریپت خود را به TypeScript تبدیل کردید . types را تقویت کرده و خطاها را حذف کردید ، یک پایگاه کد بسیار قوی تر خواهید داشت. به جای رفع مداوم خطاها زمان اجرا که توسط آزمایش کنندگان یا کاربران گزارش می شود . می توانید اکثر خطاهای رایج را به صورت استاتیک تشخیص دهید.

آموزش کامل TypeScript را به رایگان از یودمی ایران دریافت کنید