Что такое TypeScript и зачем нужен?

В этом руководстве вы поймете, что такое TypeScript, зачем нужен, его преимущества перед JavaScript.

Введение в TypeScript

TypeScript — это супернабор JavaScript. Сначала вы пишете код TypeScript, затем компилируете код в простой код JavaScript с помощью компилятора. И, получив простой код JavaScript, вы можете развернуть его в любой среде, в которой работает JavaScript. Файлы TypeScript используют расширение .ts , а не расширение .js.

Введение в TypeScript

TypeScript использует синтаксис JavaScript и добавляет дополнительный синтаксис для поддержки типов. Все программы JavaScript являются программами TypeScript. На следующей диаграмме показана взаимосвязь между TypeScript и JavaScript:

Взаимосвязь между 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);

Функция showProduct()

Заключение

  • JavaScript имеет динамическую типизацию. Он предлагает гибкость, но также создает много проблем.
  • TypeScript добавляет в JavaScript необязательную систему типов для решения этих проблем.
JavaScript и TypeScript