В этом руководстве вы поймете, что такое TypeScript, зачем нужен, его преимущества перед JavaScript.
Введение в TypeScript
TypeScript — это супернабор JavaScript. Сначала вы пишете код TypeScript, затем компилируете код в простой код JavaScript с помощью компилятора. И, получив простой код JavaScript, вы можете развернуть его в любой среде, в которой работает JavaScript. Файлы TypeScript используют расширение .ts
, а не расширение .js
.
TypeScript использует синтаксис JavaScript и добавляет дополнительный синтаксис для поддержки типов. Все программы JavaScript являются программами TypeScript. На следующей диаграмме показана взаимосвязь между TypeScript и JavaScript:
Почему TypeScript?
Основные цели:
- Знакомство с optional-типами в JavaScript.
- Внедрение запланированных функций будущего JavaScript, также известных как ECMAScript Next или ES Next.
1) TypeScript повышает производительность, помогая избежать ошибок
Типы повышают производительность, помогая избежать многих ошибок. Используя типы, вы можете обнаруживать ошибки во время компиляции, а не во время выполнения. Следующая функция складывает два числа x
и y
:
function add(x, y) { return x + y; }
Если вы получите значения из элементов ввода HTML и передадите их в функцию, вы можете получить неожиданный результат:
let result = add(input1.value, input2.value); console.log(result); // result of concatenating strings
Например, если пользователи ввели 10
и 20
, функция add()
вернет 1020
вместо 30
. Причина в том, что input1.value
и input2.value
являются строками, а не числами. Когда вы используете оператор +
для добавления двух строк, он объединяет их в одну строку. Когда вы используете TypeScript для явного указания типа параметров, например:
function add(x: number, y: number) { return x + y; }
В этой функции мы добавили числовые типы к параметрам. Функция add()
будет принимать только числа, а не любые другие значения. Когда вы вызываете функцию следующим образом:
let result = add(input1.value, input2.value);
… компилятор TypeScript выдаст ошибку, если вы скомпилируете код TypeScript в JavaScript. Следовательно, вы можете предотвратить возникновение ошибки во время выполнения.
2) TypeScript делает будущий JavaScript сегодняшним
TypeScript поддерживает функции, запланированные в ES Next для текущих движков JavaScript. Это означает, что вы можете использовать новые функции JavaScript до того, как веб-браузеры (или другие среды) полностью будут поддерживать их. Каждый год TC39 выпускает несколько новых функций для ECMAScript, который является стандартом JavaScript. Предложения функций обычно проходят пять этапов:
- Этап 0: Strawperson
- Этап 1: Proposal
- Этап 2: Draft
- Этап 3: Candidate
- Этап 4: Finished
И TypeScript обычно поддерживает функции, которые находятся на этапе 3.
3) TypeScript добавляет систему типов, чтобы помочь вам избежать многих проблем с динамическими типами в JavaScript
В этом разделе вы узнаете, почему вам следует использовать TypeScript, чтобы избежать проблем, создаваемых динамическими типами.
Понимание динамического типа в JavaScript
JavaScript имеет динамическую типизацию. В отличие от языков со статической типизацией, таких как Java или C#, значения имеют типы, а не переменные . Например:
"Hello"
По значению вы можете сказать, что его тип — string
. Кроме того, следующее значение является числом:
2020
См. следующий пример:
let box; box = "hello"; box = 100;
Тип переменной box
изменяется в зависимости от присвоенного ей значения. Чтобы найти тип переменной box
во время выполнения, вы используете оператор typeof
:
let box; console.log(typeof(box)); // undefined box = "Hello"; console.log(typeof(box)); // string box = 100; console.log(typeof(box)); // number
В этом примере первая инструкция определяет переменную без присвоения значения. Его тип — undefined
. Затем мы присваиваем "Hello"
переменной box
и показываем ее тип. Тип переменной box
теперь меняется на string
. Наконец, мы присваиваем 100
переменной box
.
На этот раз тип переменной box
меняется на number
. Как видите, как только значение присваивается, тип переменной меняется. И вам не нужно явно указывать JavaScript тип. JavaScript автоматически выведет тип из значения. Динамические типы обеспечивают гибкость. Однако и они приводят к проблемам.
Проблемы с динамическими типами
Предположим, у вас есть функция, которая возвращает объект product
на основе идентификатора:
function getProduct(id){ return { id: id, name: `Awesome Gadget ${id}`, price: 99.5 } }
В следующем примере функция getProduct()
используется для извлечения продукта с идентификатором 1 и отображения его данных:
const product = getProduct(1); console.log(`The product ${product.Name} costs $${product.price}`);
Выход:
The product undefined costs $99.5
Это не то, что мы ожидали. Проблема с этим кодом заключается в том, что объект product
не имеет Name
. Он имеет свойство name
с первой буквой n
в нижнем регистре. Однако вы можете не знать этого до тех пор, пока не запустите скрипт.
Ссылка на свойство, которое не существует в объекте, является распространенной проблемой при работе в JavaScript. В следующем примере определяется новая функция, которая выводит информацию о продукте на консоль:
const showProduct = (name, price) => { console.log(`The product ${name} costs ${price}$.`); };
И следующее использует функции getProduct()
и showProduct()
:
const product = getProduct(1); showProduct(product.price, product.name);
Выход:
The product 99.5 costs $Awesome Gadget 1
На этот раз мы передаем аргументы в неправильном порядке функции showProduct()
. Это еще одна распространенная проблема, с которой вы часто сталкиваетесь при работе с JavaScript. Вот почему TypeScript лучше.
Как Typescript решает проблемы динамических типов
Чтобы решить проблему со ссылкой на свойство, которое не существует в объекте, выполните следующие действия: во-первых, определите «форму» объекта product
с помощью интерфейса.
interface Product{ id: number, name: string, price: number };
Во-вторых, явно используйте тип Product
в качестве возвращаемого типа функции getProduct()
:
function getProduct(id) : Product{ return { id: id, name: `Awesome Gadget ${id}`, price: 99.5 } }
Когда вы ссылаетесь на несуществующее свойство, редактор кода немедленно сообщит вам об этом:
const product = getProduct(1); console.log(`The product ${product.Name} costs $${product.price}`);
Редактор кода выделил следующую ошибку в Name
:
А при наведении курсора мыши на ошибку вы увидите подсказку, которая поможет решить проблему:
Чтобы решить проблему передачи аргументов в неправильном порядке, вы явно назначаете типы параметрам функции:
const showProduct = (name: string, price:number) => { console.log(`The product ${name} costs ${price}$.`); };
И когда вы передаете аргументы неправильных типов в функцию showProduct()
, вы получите ошибку:
const product = getProduct(1); showProduct(product.price, product.name);
Заключение
- JavaScript имеет динамическую типизацию. Он предлагает гибкость, но также создает много проблем.
- TypeScript добавляет в JavaScript необязательную систему типов для решения этих проблем.