Често ми се поставља питање која је стварна разлика између JavaScript-a i TypeScript-a.
Заронимо у одговор…
Од самог почетка вашег кодирања, JavaScript (JS) је вероватно био присутан у свим вашим front-end пројектима. Ако сте већ упознати са JS-ом, можете замислити TypeScript као JS са додатим функционалностима које вашу апликацију чине боље организованом и са стриктнијом провером типова. TypeScript је развијен од стране Microsoft-a као open-source пројекат са циљем да унапреди ефикасност развоја JS апликација и омогући раније откривање грешака током процеса компилације.
У овом тексту ћемо размотрити кључне карактеристике JavaScript-a и TypeScript-a, као и разлике између ова два скриптна језика.
Шта је JavaScript?
JavaScript се користи за скриптовање на клијентској страни. Можете писати скрипте директно у HTML страници или креирати датотеку са екстензијом .js и повезати је са HTML датотеком. Чест пример употребе JavaScript-a у пракси је валидација форме за пријаву, где добијате поруку о грешци ако унесете нетачно корисничко име или лозинку.
Погледајмо једноставан JS код и извршимо га у веб прегледачу:
Креирајте датотеку example.html и додајте следећи код:
<script> feeling = 'happy'; feeling = 23; </script>
Овај једноставан код декларише променљиву и прво јој додељује вредност „happy“ (string). Касније, истој променљивој се додељује вредност другог типа (број). JavaScript неће пријавити грешку и код ће се извршити у било ком веб прегледачу без проблема. Сада, узмимо вредност за „feeling“ од корисника:
Наш HTML ће изгледати овако:
<input type = "textbox" id = "howyoufeel">
А скрипта ће бити:
feeling = document.getElementById("howyoufeel").value;
Ако не поставимо експлицитне провере у скрипти, JS ће прихватити било коју вредност од корисника и наставити да је користи. Дакле, корисник може да унесе било шта, попут „234“, „@.#$%“, итд. у променљиву „feeling“.
Карактеристике JavaScript-a
Из наведеног, можемо закључити следеће карактеристике JavaScript-a:
- Слабо типизиран скриптни језик
- Користи се за скриптовање на клијентској и серверској страни (уз помоћ Node.js).
- Флексибилан и динамичан
- Подржан од стране свих главних веб прегледача
- Лаган и интерпретиран
Ако желите да унапредите своје знање JavaScript-a, погледајте овај Udemy курс.
Шта је TypeScript?
Апликације у реалном свету имају велики број валидација и динамичких провера. У таквим ситуацијама, JavaScript код може постати тежак за тестирање, пре свега због недостатка провере типова. Приликом узимања вредности од корисника, веома је важно добити их са исправним типом података од самог почетка. Овде на сцену ступа TypeScript.
TypeScript је снажно типизиран и има компајлер који ће пријавити грешку ако не дефинишете тип променљиве.
И JavaScript и TypeScript су у складу са ECMAScript спецификацијама за скриптне језике. TypeScript може извршавати сав JavaScript код и подржава све његове библиотеке, због чега се и назива надскуп JavaScript-a.
Инсталација TypeScript-a
Да бисмо извршили претходни код у TypeScript-у, морамо инсталирати TypeScript компајлер користећи npm пакет (ако имате Node.js).
npm install -g typescript
Или га можете преузети директно са званичне Microsoft странице за преузимање. Такође можете користити TS playground да видите како се код транспилира из .ts у .js.
Након инсталације, можете конфигурисати подешавања пројекта у `tsconfig.json` датотеци и користити било који IDE или едитор текста да пишете TypeScript код и сачувате га као .ts.
И даље можете избећи дефинисање типа променљиве, а TypeScript ће покушати да сам закључи тип података. Међутим, добићете грешку уколико променљивој „feeling“ доделите вредност која није првобитно коришћеног типа (у нашем случају, String) – и то током процеса компилације.
Увек је боље да код има дефинисан тип ради лакшег одржавања и коришћења:
var feeling: string = “happy”;
То није све!
TypeScript пружа и бројне друге функције које олакшавају посао програмерима.
Карактеристике TypeScript-a
TypeScript има богат скуп функционалности, а свака нова верзија доноси нове функције које олакшавају развој у односу на претходне верзије. На пример, у новој верзији (4.0), додате су неке нове функције као што су променљиви типови тупле-а, прилагођене JSX фабрике, закључивање својстава класе из конструктора итд. Неке типичне карактеристике TypeScript-a су:
- Подржава концепте објектно-оријентисаног програмирања као што су интерфејс, наслеђивање, класе и генерици.
- Омогућава рано откривање грешака
- IDE подршка са провером синтаксе и предлозима
- Лакше отклањање грешака током писања кода
- Транскомпилира у JavaScript
- Користи се за апликације на серверској и клијентској страни
- Подршка за више платформи и више веб прегледача
- Подржава све JS библиотеке и екстензије
Зашто нам је потребан TypeScript? (Предности TypeScript-a у односу на JavaScript)
Microsoft је развијао и користио TypeScript две године за интерне пројекте пре него што га је објавио јавно 2012. године. Одлучили су се за типски JavaScript јер је тако било лакше тестирати код за пословне апликације у продукцији. И даље можете користити динамичко типизирање, али и дефинисати типове променљивих када је то потребно.
Погледајте следећи код:
var mynum = //добиј од корисника;
addten(number){
return number + 10;
}
Очекивали бисмо да резултат увек буде број. Али шта ако корисник унесе „овце“? Резултат ће бити „овце10“ – у идеалној ситуацији, требало би да обавестимо корисника да ова операција није могућа!
Такође, када имате информације о типу података, едитори текста и IDE постају лакши за коришћење и могу вам помоћи да спречите грешке током извршавања. Код је такође лакше рефакторисати касније.
Да ли то значи да нам не треба JavaScript? (Недостаци TypeScript-a у односу на JavaScript)
Можете замислити TypeScript као проширење JavaScript-a, али никако као његову замену.
За мање комаде кода, TypeScript може представљати додатни трошак – инсталирање, компилирање и транспилирање су непотребни кораци. У JavaScript-у, можете једноставно уписати своју скрипту у HTML и она ће радити. Такође је лакше отклонити грешке у коду када једноставно освежите прегледач сваки пут када нешто промените.
Упоредно поређење
Сада када разумемо карактеристике и предности TypeScript-a и JavaScript-a, погледајмо још једно поређење:
| TypeScript | JavaScript |
| Типизиран језик који рано детектује грешке током компилације. | Грешке се могу открити током извршавања. |
| Погодан за велике пројекте јер побољшава одржавање и читљивост кода. | Како се додаје више кода, тестирање и отклањање грешака постаје теже, тако да је JS погодан за мале пројекте. |
| Надскуп JS-a, тј. поседује функционалности као што су објектна оријентација, провера типа и друге. | Скриптни језик који подржава креирање динамичног веб садржаја. |
| Захтева инсталацију компајлера и подешавање конфигурације. | Није потребна инсталација; JS код се може писати директно у прегледачу помоћу <script> ознаке. |
| Све .ts датотеке се конвертују у .js датотеке пре извршавања; процес је познат као транспилирање. | Програмери могу директно укључити .js датотеке у HTML датотеке за извршавање помоћу <script src> ознаке. |
| Моћан и интуитиван са богатим функцијама као што су модули, генерици, интерфејси. | Погодан за једноставне веб апликације које не захтевају напредне функције. |
| Користи се за скриптовање на серверској и клијентској страни. | Једноставан за коришћење за скриптовање на клијентској страни, али може постати тежак и сложен за скриптовање на серверској страни. |
| Извршавање траје дуже због процеса компилације. | Компилација није потребна, па се код извршава брже. |
| Подржава статичко и динамичко типизирање. | Подржава само динамичко типизирање. |
Можемо навести тип променљиве као: var осећај: string = "срећан"; |
Не можемо специфицирати типове јер не можемо дефинисати типове. |
Закључак
Са становишта учења, JavaScript би могао бити ваш природан избор. Отворите датотеку, укуцајте нешто унутар <script> ознака, сачувајте је као HTML – и видећете резултате! Затим можете наставити да градите динамичнији садржај.
Касније, када радите на апликацијама великих размера, познавање JavaScript-a ће вам помоћи да лако пређете на TypeScript.
Међутим, са становишта каријере и плате, као TypeScript програмер, бићете флексибилнији и прилагодљивији JS и TS пројектима – што је дефинитивно велика предност на тржишту. Типично, TypeScript програмери имају плате између 110.000 и 147.000 долара, док JS програмери зарађују око 63.000 до 118.000 долара годишње.