JavaScript проти TypeScript: У чому різниця?
Одне з найпоширеніших питань, які я отримую, стосується відмінностей між JavaScript та TypeScript. Давайте розберемося, у чому полягають їхні особливості.
З моменту, коли ви почали програмувати, JavaScript (JS) був невід’ємною частиною всіх ваших інтерфейсних проєктів. Якщо ви вже трохи знайомі з JS, то уявіть TypeScript як JavaScript з додатковими можливостями, що роблять ваш код структурованішим та з явно визначеними типами даних. TypeScript розроблений Microsoft як проєкт з відкритим кодом, щоб оптимізувати розробку на JavaScript та виявляти помилки на етапі компіляції.
У цій статті ми розглянемо важливі характеристики JavaScript та TypeScript, а також відмінності між цими двома мовами сценаріїв.
Що таке JavaScript?
JavaScript використовується для написання сценаріїв на стороні клієнта. Ви можете створювати скрипти прямо на HTML-сторінці або ж створювати окремі файли з розширенням .js та підключати їх до вашого HTML-файлу. Типовим прикладом використання JavaScript є перевірка форми входу, де ви отримуєте повідомлення про помилку, якщо ваше ім’я користувача або пароль введено неправильно.
Давайте розглянемо простий JS-код та запустимо його у браузері:
Створіть файл example.html і додайте наступний код:
<script> feeling = 'happy'; feeling = 23; </script>
Цей код оголошує змінну та присвоює їй значення “happy” (текстовий рядок). Потім, без жодних проблем, ми присвоюємо цій самій змінній значення іншого типу (число). JavaScript не звертає на це уваги, і ми можемо запускати цей код у будь-якому браузері без перешкод. Тепер давайте спробуємо отримати значення “feeling” від користувача:
Наш HTML-код виглядатиме так:
<input type = "textbox" id = "howyoufeel">
А скрипт таким чином:
feeling = document.getElementById("howyoufeel").value;
Якщо ми явно не пропишемо перевірки у скрипті, JS прийме будь-яке значення від користувача. Таким чином, у змінну “feeling” можна буде ввести що завгодно, наприклад, 234, @.#$%, тощо.
Характеристики JavaScript
З наведеного вище прикладу, можна виділити наступні особливості JavaScript:
- Мова зі слабкою типізацією.
- Використовується для написання сценаріїв на стороні клієнта та сервера (з node.js).
- Гнучка та динамічна.
- Підтримується всіма основними браузерами.
- Легка та інтерпретована мова.
Якщо вас цікавить вивчення JavaScript, зверніть увагу на цей курс на Udemy.
Що таке TypeScript?
Реальна програма зазвичай містить безліч перевірок та динамічних валідацій. Для таких додатків, через відсутність перевірки типів, код JavaScript може стати важким для тестування. Важливо перевіряти дані, що надходять від користувачів, якомога раніше. Саме тут на допомогу приходить TypeScript.
TypeScript є строго типізованою мовою та має компілятор, який сигналізує про помилку, якщо ви не вказуєте тип змінної.
І JavaScript, і TypeScript відповідають стандартам ECMAScript. TypeScript може виконувати будь-який JavaScript-код та підтримує всі його бібліотеки. Саме тому його часто називають надмножиною JavaScript.
Встановлення TypeScript
Для того, щоб виконати наш попередній код на TypeScript, нам потрібно встановити компілятор TypeScript за допомогою менеджера npm (якщо у вас вже встановлено node.js).
npm install -g typescript
Або завантажити безпосередньо з офіційної сторінки завантажень Microsoft. Ви також можете скористатися TypeScript Playground, щоб побачити, як ваш код TS транспілюється у JS.
Після встановлення ви можете налаштувати параметри проєкту у файлі tsconfig.json, а також використовувати будь-яке IDE або текстовий редактор для написання коду TypeScript, який потрібно зберігати з розширенням .ts.
Ви можете не вказувати тип змінної явно, і тоді TypeScript автоматично визначить тип даних. Однак, якщо ви присвоїте змінній інший тип, ніж був визначений раніше (у нашому випадку, рядок), то отримаєте помилку на етапі компіляції.
Для кращої підтримки та зручності, завжди бажано використовувати анотації типів:
var feeling: string = “happy”;
Але це ще не все! TypeScript надає багато інших можливостей, що полегшують життя розробника.
Характеристики TypeScript
TypeScript має багатий набір функцій, і з кожним новим випуском з’являються нові можливості для спрощення розробки. Наприклад, в останньому випуску (4.0) додано такі особливості, як варіативні типи кортежів, спеціальні фабрики JSX, визначення властивостей класу безпосередньо в конструкторах. Ось деякі з основних характеристик TypeScript:
- Підтримка об’єктно-орієнтованого програмування: інтерфейси, успадкування, класи та дженерики.
- Виявлення помилок на ранньому етапі.
- Підтримка IDE з перевіркою синтаксису та автодоповненням коду.
- Полегшення процесу налагодження коду.
- Транспіляція у JavaScript.
- Можливість використання як для клієнтських, так і для серверних програм.
- Підтримка кросплатформенності та кросбраузерності.
- Підтримка усіх бібліотек та розширень JS.
Навіщо нам потрібен TypeScript? (Переваги TypeScript над JavaScript)
Корпорація Microsoft розробляла і використовувала TypeScript протягом двох років для внутрішніх проєктів, перш ніж представити його публіці у 2012 році. Вони створили типізований JavaScript, бо вважали, що код для великих виробничих додатків має бути простішим у тестуванні. Ви все ще можете використовувати динамічну типізацію, але при цьому можете явно визначити тип змінних там, де це дійсно потрібно.
Розглянемо наступний приклад коду:
var mynum = //отримано від користувача;
addten(number){
return number + 10;
}
Ми очікуємо, що результатом завжди буде число. Але що, якщо користувач введе, наприклад, “вівці”? Тоді результатом буде “вівці10”. В ідеалі, ми повинні повідомити користувача, що ця операція неможлива!
Крім того, коли відомо тип даних, текстові редактори та IDE стають більш зручними та допомагають уникнути помилок виконання. Також стає набагато легше редагувати код в подальшому.
Чи означає це, що нам не потрібен JavaScript? (Недоліки TypeScript перед JavaScript)
TypeScript можна розглядати як розширення JavaScript, але не як його заміну.
Для невеликих фрагментів коду використання TypeScript може виявитися зайвим. Встановлення компілятора, компіляція та транспіляція – це додаткові кроки. У JavaScript ви можете просто написати свій скрипт в HTML-файлі і він одразу запрацює. Крім того, налагодження коду в цьому випадку простіше, тому що вам потрібно просто оновити сторінку в браузері.
Порівняння
Тепер, коли ми розглянули функції та переваги TypeScript та JavaScript, давайте проведемо порівняння:
| TypeScript | JavaScript |
| Мова з явною типізацією, що дозволяє виявляти помилки на етапі компіляції. | Помилки виявляються під час виконання. |
| Підходить для великих проєктів, бо покращує підтримку та читабельність коду. | Чим більше коду, тим складніше його тестувати та налагоджувати, тому JS краще підходить для невеликих проєктів. |
| Надмножина JS, тобто містить такі можливості, як об’єктно-орієнтоване програмування, перевірку типів і т.д. | Мова сценаріїв, що дозволяє створювати динамічний веб-контент. |
| Потребує встановлення компілятора та налаштування конфігурації. | Немає необхідності у встановленні; Код JS можна писати прямо в браузері за допомогою тегу <script>. |
| Усі файли .ts перед виконанням перетворюються на файли .js – цей процес називається транспіляцією. | Розробники можуть безпосередньо вставляти файли .js у HTML для виконання за допомогою тегу <script src>. |
| Потужний та інтуїтивно зрозумілий, має багаті функції, такі як модулі, дженерики, інтерфейси. | Підходить для простих веб-додатків, які не потребують додаткових функцій. |
| Використовується для написання сценаріїв на стороні сервера та клієнта. | Простий у використанні для сценаріїв на стороні клієнта, але стає складним для серверної розробки. |
| Виконання займає більше часу через стадію компіляції. | Компіляція не потрібна, тому виконання відбувається швидше. |
| Підтримує статичну та динамічну типізацію. | Підтримує лише динамічну типізацію. |
Ми можемо вказувати типи, використовуючи анотації, наприклад:
var feeling: string = “щасливий”; |
Немає можливості вказувати типи, оскільки вони не є визначеними. |
Висновок
Якщо говорити про навчання, JavaScript може стати вашим природним вибором. Ви створюєте файл, вставляєте код в теги <script></script>, зберігаєте як HTML – і бачите результат! Потім ви можете використовувати ці знання для створення більш динамічного контенту.
Крім того, коли ви працюєте над великим проєктом, знання JavaScript допоможуть вам з легкістю перейти на TypeScript.
Однак, з точки зору кар’єри та заробітної плати, як розробник TypeScript, ви будете більш гнучкими та впевненими у роботі з проєктами як на JS, так і на TS. Це, безумовно, є перевагою на ринку праці. Зазвичай, розробники TypeScript отримують від 110 до 147 тисяч доларів США на рік, тоді як розробники JS – від 63 до 118 тисяч доларів США на рік.