Одне із поширених запитань, яке я отримую, полягає в тому, яка різниця між JavaScript і Typescript?
Давай дізнаємось…
З того часу, як ви почали кодувати, JavaScript (JS) був частиною всіх ваших інтерфейсних проектів. Якщо ви трохи знайомі з JS, уявіть TypeScript як JS плюс деякі додаткові функції, які роблять вашу програму акуратнішою та надрукованою. TypeScript був розроблений корпорацією Майкрософт як проект із відкритим вихідним кодом, щоб зробити розробку JS більш ефективною та виявити помилки компіляції на ранній стадії.
У цій статті ми обговоримо деякі важливі функції JavaScript і TypeScript, а також відмінності між обома мовами сценаріїв.
Що таке JavaScript?
JavaScript використовується для створення сценаріїв на стороні клієнта. Ви можете створити сценарій на сторінці HTML або створити файл із розширенням .js і включити його у свій файл HTML. Типовим реальним прикладом, коли ви можете побачити JavaScript, є перевірка сторінки входу, де вам показується помилка, коли ваше ім’я користувача/пароль неправильні.
Давайте напишемо простий JS-код і запустимо його в браузері:
Створіть файл example.html і додайте такий код:
<script> feeling = 'happy'; feeling = 23; </script>
Цей простий код оголошує змінну та присвоює їй значення happy (рядок). Ми можемо присвоїти значення іншого типу (число) тій самій змінній. JavaScript не скаржиться на це, і ми можемо запускати код у будь-якому браузері без проблем. Тепер давайте дізнаємося про цінність почуттів від користувача:
Наш HTML виглядатиме так:
<input type = "textbox" id = "howyoufeel">
і сценарій буде таким:
feeling = document.getElementById("howyoufeel").value;
Якщо ми не поставимо явні перевірки в сценарій, JS прийме будь-яке значення від користувача та передасть його. Отже, ви можете додати будь-що на зразок 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. Ви також можете використовувати Дитячий майданчик ТС щоб побачити, як транскомпілюється код із ts у js.
Після цього ви можете налаштувати параметри проекту в tsconfig.json і використовувати будь-який IDE або текстовий редактор, щоб написати код TypeScript і зберегти його як .ts.
Ви все ще можете піти, не визначаючи тип змінної, а TypeScript зможе визначити тип даних. Однак ви отримаєте помилку «відчуття», якщо ви надасте щось інше, крім першого використаного типу (у нашому випадку, String) – під час самої компіляції.
Завжди добре, щоб код мав анотацію типу для зручності обслуговування та простоти використання:
var feeling: string = “happy”;
Це не те!
TypeScript надає багато інших функцій, які полегшують життя розробника.
Особливості TypeScript
Typescript має багатий набір функцій, і кожен випуск містить нові функції, щоб полегшити розробку, ніж раніше. Наприклад, з новим випуском (4.0), деякі додаткові функції це варіативні типи кортежів, спеціальні фабрики JSX, визначення властивостей класу з конструкторів тощо. Деякі типові особливості TypeScript:
- Підтримує такі концепції об’єктно-орієнтованого програмування, як інтерфейс, успадкування, клас. дженерики
- Раннє виявлення помилок
- Підтримка IDE з перевіркою синтаксису та пропозиціями
- Легше налагодити під час введення
- Транскомпілюється в JavaScript
- Використовується як для програм на стороні сервера, так і для клієнта
- Підтримка кросплатформенності та кросбраузерності
- Підтримує всі бібліотеки та розширення JS
Навіщо нам TypeScript? (Переваги TypeScript перед JavaScript)
Корпорація Майкрософт розробляла та використовувала TypeScript протягом двох років для своїх внутрішніх проектів, перш ніж оприлюднити його в 2012 році. Вони створили типізований JavaScript, тому що було простіше тестувати код для корпоративних програм виробничого рівня. Ви все ще можете використовувати функції динамічного введення, але також вводити змінні, коли це дійсно потрібно.
Розглянемо наведений нижче код:
var mynum = //get from user;
addten(number){
return number + 10;
}
Ми очікуємо, що результат завжди буде числом. Але що, якщо користувач дає «вівці»? Результатом буде sheep10 – в ідеалі нам потрібно повідомити користувачеві, що ця операція неможлива!
Крім того, коли у вас є інформація про тип, текстові редактори та IDE стають зручнішими у використанні та зберігають помилки виконання. Також простіше відредагувати код пізніше.
Чи означає це, що нам не потрібен JavaScript? (Недоліки TypeScript перед JavaScript)
Ви можете розглядати TypeScript як розширення JavaScript, але точно не заміну.
Для невеликих фрагментів коду TypeScript може стати додатковими витратами – встановлення, компіляція, транскомпіляція будуть зайвими. За допомогою JavaScript ви можете просто ввести свій сценарій у HTML, і він працюватиме. Також легше налагодити код, коли ви можете просто оновлювати браузер щоразу, коли щось змінюєте.
Пряме порівняння
Тепер, коли ми зрозуміли функції та переваги TypeScript і JavaScript, давайте проведемо додаткові порівняння:
TypeScript
JavaScript
Типізована мова, яка на ранній стадії виявляє помилки компіляції
Ви можете виявити помилки під час виконання
Підходить для великих проектів, оскільки покращує підтримку та читабельність коду
Оскільки додається більше коду, стає складніше тестувати та налагоджувати, тому JS підходить для невеликих проектів
Надмножина JS, тобто такі функції, як об’єктна орієнтація, перевірка типу тощо
Мова сценаріїв, яка підтримує динамічне створення веб-вмісту
Вимагає встановлення компілятора та налаштування конфігурації
Немає необхідності в установці; Код JS можна писати безпосередньо в браузері за допомогою тегу , зберігаєте його як HTML – ви побачите результати! Потім ви можете спиратися на нього, щоб створити більш динамічний вміст.
Крім того, коли ви працюєте над великомасштабною програмою, знання JavaScript допоможе вам легко перейти на TypeScript.
Однак, з точки зору кар’єри та оплати, як a TypeScript розробник, ви будете більш гнучкими та комфортними як з проектами JS, так і з проектами TS – це, безперечно, кращий актив на ринку. Зазвичай розробникам TypeScript платять від 110 тис. до 147 тис. доларів США, тоді як розробникам JS платять близько 63 тис. – 118 тис. доларів США на рік.