TypeScript срещу JavaScript: Разберете разликите

Световната мрежа работи основно на JavaScript, HTML и CSS. За съжаление на JavaScript липсват няколко функции, които биха помогнали на разработчиците да го използват за мащабни приложения. Въведете TypeScript.

Какво е JavaScript?

JavaScript стартира като скриптов език за уеб браузъра Netscape Navigator; Брендън Айх е написал прототипа за период от 10 дни през 1995 г. Името JavaScript е подсказване на езика Java на Sun Microsystem, въпреки че двата езика са доста различни и сходството в имената е довело до значително объркване през годините. JavaScript, който се е развил значително, вече се поддържа във всички съвременни уеб браузъри.

Въвеждането на клиентски JavaScript в Netscape Navigator беше последвано бързо от въвеждането на JavaScript от страна на сървъра в уеб сървърите Netscape Enterprise Server и Microsoft IIS. Около 13 години по-късно Райън Дал въвежда Node.js като среда с отворен код, междуплатформена среда за изпълнение на JavaScript, независима от всеки браузър или уеб сървър.

Език на JavaScript

JavaScript е език с много парадигми. Той има синтаксис и точка и запетая в къдрави скоби, като семейството езици C. Той има слабо, динамично писане и се интерпретира или (по-често) се компилира точно навреме. Като цяло JavaScript е с една нишка, въпреки че има API за уеб работници, който прави многопоточност и има събития, асинхронни извиквания на функции и обратно извикване.

JavaScript поддържа обектно-ориентирано програмиране, използвайки прототипи, а не наследяването на клас, използвано в C ++, Java и C #, въпреки че classсинтаксисът е добавен към JavaScript ES6 през 2015 г. JavaScript също поддържа функционално програмиране, включително затваряне, рекурсия и ламбда (анонимни функции).

Преди JavaScript ES6 езикът нямаше оптимизация за извикване на опашката; сега го прави, въпреки че трябва да включите строг режим ( 'use strict'), за да го активирате, а изпълнението варира от браузър до браузър. Стриктният режим също променя семантиката на JavaScript и променя някои обикновено безшумни грешки, за да хвърля грешки.

Какво е с обозначението „ES6“? Името на стандартизирания език на JavaScript е ECMAScript (ES), след органа за международни стандарти на ECMA; ES6 се нарича още ECMAScript 2015 (ES2015). В момента ES2020 е проект на стандарт.

Като прост пример, който ви дава вкуса на езика JavaScript, ето някои кодове, за да решите дали е ден или вечер и динамично да поставите подходящия поздрав в име на уеб елемент, намерен в обекта на документа на браузъра:

var час = нова дата (). getHours ();

var поздрав;

ако (час <18) {

  поздрав = "Добър ден";

} друго {

  поздрав = "Добър вечер";

}

document.getElementById ("демо"). innerHTML = поздрав;

JavaScript екосистема

Има многобройни API на JavaScript. Някои се доставят от браузъра, като documentAPI в кода, показан по-горе, а други се предоставят от трети страни. Някои приложни програмни интерфейси (API) се прилагат за използване от страна на клиента, други за използване от страна на сървъра, някои за използване от работния плот, а други за повече от една среда.

Приложните програмни интерфейси (API) на браузъра включват обектния модел на документ (DOM) и обектния модел на браузъра (BOM), геолокация, Canvas (графика), WebGL (графично ускорена графика), HTMLMediaElement (аудио и видео) и WebRTC (комуникации в реално време).

Приложните програмни интерфейси (API) на трети страни изобилстват. Някои са интерфейси към пълни приложения, като Google Maps. Други са помощни програми, които улесняват програмирането на JavaScript HTML5 и CSS, като jQuery. Някои, като Express, са рамки за приложения за специфични цели; за Express целта е да се създадат уеб и мобилни сървъри за приложения на Node.js. Редица други рамки са изградени върху Express. През 2016 г. обсъдих 22 рамки на JavaScript в опит да осмисля това, което се превръща в нещо като зоопарк; много от тези рамки все още съществуват под една или друга форма, но няколко са отишли ​​встрани.

Има много повече JavaScript модули, над 300 000. За да се справим с това, използваме мениджъри на пакети , като npm, диспечера на пакети по подразбиране за Node.js.

Една алтернатива на npm е Yarn, която идва от Facebook и претендира за предимството на детерминираните инсталации. Подобни инструменти включват Bower (от Twitter), който управлява предни компоненти, а не модули Node; Ендър, който нарича себе си малката сестра на npm; и jspm, който използва ES модули (по-новият ECMA стандарт за модули), а не модули CommonJS, по-старият де факто стандарт, поддържан от npm.

Webpack обединява JavaScript модулите в статични активи за браузъра. Browserify позволява на разработчиците да пишат модули в стил Node.js, които се компилират за използване в браузъра. Grunt е файл-ориентиран бегач на задачи на JavaScript, а gulp е стрийминг система за изграждане и бегач на задачи на JavaScript. Изборът между мрънкане и отпиване не е решаващ. Инсталирах и използвам който и да е настроен за даден проект.

За да направим JavaScript кода по-надежден при липса на компилация, използваме линтери. Терминът идва от инструмента за влакна на езика C, който е стандартна програма на Unix. JavaScript линърите включват JSLint, JSHint и ESLint. Можете да автоматизирате стартиращите линтери след промяна на кода, като използвате бегач на задачи или вашата IDE. Отново изборът между линтерите не е ясен и аз използвам който и да е бил създаден за даден проект.

Говорейки за редактори и IDE, прегледах 6 JavaScript IDE и 10 JavaScript редактора, последно през 2019 г. Най-добрият ми избор бяха Sublime Text (много бърз редактор), Visual Studio Code (конфигурируем редактор / IDE) и WebStorm (IDE).

Транспилаторите ви позволяват да превеждате някои други езици като CoffeeScript или TypeScript в JavaScript и да превеждате съвременния JavaScript (като код ES2015) в основен JavaScript, който работи във (почти) всеки браузър. (Всички залози са изключени за ранните версии на Internet Explorer.) Най-често срещаният транпилатор за съвременния JavaScript е Babel.

Какво е TypeScript?

TypeScript е типизиран супер набор от JavaScript, който се компилира в обикновен JavaScript (ES3 или по-нова версия; той може да се конфигурира). Компилаторът на команден ред TypeScript с отворен код може да бъде инсталиран като пакет Node.js. Поддръжката на TypeScript се предлага с Visual Studio 2017 и Visual Studio 2019, Visual Studio Code и WebStorm и може да бъде добавена към Sublime Text, Atom, Eclipse, Emacs и Vim. Компилаторът / преводач на TypeScript tsc е написан на TypeScript.

TypeScript добавя незадължителни типове, класове и модули към JavaScript и поддържа инструменти за широкомащабни JavaScript приложения за всеки браузър, за всеки хост и на всяка операционна система. Наред с много други победи за TypeScript, популярната Angular framework е преработена в TypeScript.

Типовете позволяват на разработчиците на JavaScript да използват високопродуктивни инструменти и практики за разработка като статична проверка и рефакторинг на код при разработване на приложения на JavaScript.

Типовете не са задължителни, а изводът за типа позволява няколко анотации на типа да направят голяма разлика в статичната проверка на вашия код. Типовете ви позволяват да дефинирате интерфейси между софтуерните компоненти и да придобиете представа за поведението на съществуващите библиотеки на JavaScript.

TypeScript предлага поддръжка за най-новите и развиващите се функции на JavaScript, включително тези от ECMAScript 2015 и бъдещи предложения, като асинхронни функции и декоратори, за да помогне за изграждането на стабилни компоненти.

Език на TypeScript

Езикът TypeScript приема JavaScript като валиден, но предлага допълнителните опции за анотации на типа, проверка на типа по време на компилация, класове и модули. Всичко това е изключително полезно, когато се опитвате да създадете надежден софтуер. Обикновеният JavaScript генерира грешки само по време на изпълнение и то само ако програмата ви достигне път с грешки.

Урокът за TypeScript за 5 минути прави предимствата ясни. Отправната точка е чист JavaScript с разширение .ts:

функция поздрав (човек) {

  връщане "Здравей," + човек;

}

let user = "Jane User";

document.body.textContent = greeter (потребител);

Ако компилирате това с tsc, той ще създаде идентичен файл с разширение .js.

Урокът ви променя постепенно този код, добавяйки анотация на типа person:stringв дефиницията на функцията, компилиране, тестване на проверка на типа от компилатора, добавяне на интерфейс за personтип и накрая добавяне на клас за Student. Последният код е:

клас Ученик {

    fullName: низ;

    конструктор (публично firstName: низ, публичен middleInitial: низ,

        публично lastName: низ) {

            this.fullName = firstName + "" + middleInitial + "" + lastName;

    }

}

интерфейс Лице {

    firstName: низ;

    lastName: низ;

}

функция поздрав (лице: Лице) {

    върнете "Здравейте," + person.firstName + "" + person.lastName;

}

нека потребител = нов студент ("Джейн", "М.", "Потребител");

document.body.textContent = greeter (потребител);

Когато компилирате това и погледнете излъчения JavaScript, ще видите, че класовете в TypeScript са просто стенография за същото наследство, базирано на прототип, което се използва в обикновения JavaScript ES3. Имайте предвид, че свойствата person.firstNameи person.lastNameсе генерират автоматично от компилатора, когато види техните publicатрибути в Studentконструктора на класа и също се пренасят в Personинтерфейса. Едно от най-хубавите предимства на типовите анотации в TypeScript е, че те се разпознават от инструментите, като Visual Studio Code:

Ако има грешки в кода, докато редактирате в VS Code, ще видите съобщенията за грешки в раздела Проблеми, например следното, ако изтриете края на реда с екземпляра на Student:

Урокът за мигриране от JavaScript разказва подробно за това как да надстроите съществуващ проект на JavaScript. Прескачайки стъпките за настройка, същността на метода е да преименувате вашите .js файлове в .ts един по един. (Ако вашият файл използва JSX, разширение, използвано от React, ще трябва да го преименувате на .tsx, а не на .ts.) След това затегнете проверката на грешките и коригирайте грешките.

Наред с други неща, ще трябва да промените базирани на модули require()или define()инструкции на TypeScript инструкции за импортиране и да добавите декларационни файлове за всички библиотечни модули, които използвате. Трябва също да пренапишете експортирането на модула си, като използвате оператора TypeScript export. TypeScript поддържа модули CommonJS, както Node.js.

Ако получите грешки относно грешен брой аргументи, можете да напишете подписи за претоварване на функцията TypeScript. Това е важна функция, която липсва на JavaScript. И накрая, трябва да добавите типове към собствените си функции и където е подходящо да използвате интерфейси или класове.

Обикновено не е необходимо да пишете свои собствени декларационни файлове за JavaScript библиотеки от публично достояние. DefinitelyTyped е хранилище на файлове с декларации, всички от които са достъпни с помощта на npm. Можете да намерите декларациите, като използвате страницата TypeSearch.

След като конвертирате всичките си JavaScript файлове в TypeScript, усъвършенствате типовете и премахнете грешките, ще имате много по-стабилна кодова база. Вместо да коригирате постоянно грешките по време на работа, докладвани от тестери или потребители, ще можете да откривате най-често срещаните грешки статично.

Струва си да гледате как Андерс Хейлсбърг обсъжда TypeScript. Както ще чуете от него, TypeScript е JavaScript, който се мащабира.