TypeScript для начинающих программистов

Поздравляем с выбором TypeScript в качестве одного из ваших первых языков — вы уже принимаете правильные решения!

Вы, вероятно, уже слышали, что TypeScript — это «вариант» или «разновидность» JavaScript. Связь между TypeScript (TS) и JavaScript (JS) довольно уникальна среди современных языков программирования, поэтому изучение этой связи поможет вам понять, как TypeScript дополняет JavaScript.

Что такое JavaScript? Краткая история

JavaScript (также известный как ECMAScript) начинал свою жизнь как простой язык сценариев для браузеров. В то время предполагалось, что он будет использоваться для коротких фрагментов кода, встроенных в веб-страницу — написание более нескольких десятков строк кода было бы несколько необычным. Из-за этого ранние веб-браузеры выполняли такой код довольно медленно. Однако со временем JS стал все более популярным, и веб-разработчики начали использовать его для создания интерактивных приложений.

Разработчики веб-браузеров в ответ на это возросшее использование JS оптимизировали свои движки выполнения (динамическая компиляция) и расширили возможности языка (добавление API), что, в свою очередь, заставило веб-разработчиков использовать его еще больше. На современных веб-сайтах ваш браузер часто выполняет приложения, состоящие из сотен тысяч строк кода. Это длительный и постепенный рост «веба», начавшийся как простой сети статических страниц и эволюционировавший в платформу для богатых приложений всех видов.

Более того, JS стал достаточно популярным, чтобы использоваться вне контекста браузеров, например, для реализации JS-серверов с помощью node.js. Природа JS «работать где угодно» делает его привлекательным выбором для кроссплатформенного разработки. Сегодня многие разработчики используют только JavaScript для программирования всего своего стека!

Подводя итог, у нас есть язык, который был разработан для быстрого использования, а затем вырос в полноценный инструмент для написания приложений с миллионами строк. Каждый язык имеет свои особенности — странности и сюрпризы, и скромное начало JavaScript делает его с многими из них. Некоторые примеры:

• Оператор равенства JavaScript (==) приводит свои операнды к одному типу, что приводит к неожиданному поведению:

  if ("" == 0) {
    // It is! But why??
  }
  if (1 < x < 3) {
    // True for *any* value of x!
  }

• JavaScript также позволяет обращаться к свойствам, которых нет:

  const obj = { width: 10, height: 15 };
  // Why is this NaN? Spelling is hard!
  const area = obj.width * obj.heigth;

Большинство языков программирования выдают ошибку при возникновении подобных ошибок, некоторые делают это во время компиляции — до запуска кода. При написании небольших программ такие особенности раздражают, но управляемы; при написании приложений сотен или тысяч строк кода эти постоянные сюрпризы представляют собой серьезную проблему.

TypeScript: Статический проверяющий типов

Мы упоминали ранее, что некоторые языки вообще не позволят запускаться таким ошибочным программам. Обнаружение ошибок в коде без его запуска называется статической проверкой. Определение того, что является ошибкой, а что нет, исходя из типов обрабатываемых значений, известно как статическая проверка типов.

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

const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;

Типизированное надмножество JavaScript

Как же TypeScript относится к JavaScript?

Синтаксис

TypeScript — это язык, который является надмножеством JavaScript: синтаксис JS, поэтому, является допустимым в TS. Синтаксис относится к способу написания текста для формирования программы. Например, этот код имеет ошибку синтаксиса, так как ему не хватает ):

let a = (4

TypeScript не считает код JavaScript ошибочным из-за синтаксиса. Это означает, что вы можете взять любой работающий код JavaScript и поместить его в файл TypeScript, не беспокоясь о том, как он написан.

Типы

Однако TypeScript является типизированным надмножеством, что означает, что он добавляет правила о том, как можно использовать различные типы значений. Предыдущая ошибка относительно obj.heigth не была ошибкой синтаксиса: это ошибка использования какого-либо значения (типа) неправильным способом.

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

console.log(4 / []);

Эта синтаксически-правильная программа выводит Infinity. Однако TypeScript считает деление числа на массив бессмысленной операцией и выдаст ошибку:

console.log(4 / []);

Возможно, вы действительно хотели разделить число на массив, может быть, просто чтобы посмотреть, что произойдет, но в большинстве случаев это ошибка программирования. Проверяющий типов TypeScript разработан для прохождения корректных программ, одновременно захватывая как можно больше распространенных ошибок. (Позже мы узнаем о настройках, которые вы можете использовать для настройки того, насколько строго TypeScript проверяет ваш код.)

Если вы перенесете код из файла JavaScript в файл TypeScript, вы можете увидеть ошибки типа в зависимости от того, как написан код. Это могут быть реальные проблемы с кодом или чрезмерно консервативное поведение TypeScript. В этом руководстве мы покажем, как добавить различные синтаксические конструкции TypeScript для устранения таких ошибок.

Поведение во время выполнения

TypeScript — это также язык программирования, который сохраняет поведение во время выполнения JavaScript. Например, деление на ноль в JavaScript приводит к Infinity вместо того, чтобы выбрасывать исключение во время выполнения. В качестве принципа TypeScript никогда не изменяет поведение кода JavaScript во время выполнения.

Это означает, что если вы переместите код из JavaScript в TypeScript, он гарантированно будет работать так же, даже если TypeScript посчитает, что код имеет ошибки типа.

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

Удаленные типы

Грубо говоря, после того, как компилятор TypeScript завершил проверку вашего кода, он удаляет типы, чтобы получить результирующий «скомпилированный» код. Это означает, что после компиляции результирующий код JS не содержит информации о типах.

Это также означает, что TypeScript никогда не изменяет поведение вашей программы на основе выведенных им типов. В итоге, хотя вы можете увидеть ошибки типов во время компиляции, сама система типов не влияет на то, как ваша программа работает во время выполнения.

Наконец, TypeScript не предоставляет дополнительных библиотек во время выполнения. Ваши программы будут использовать ту же стандартную библиотеку (или внешние библиотеки), что и программы на JavaScript, поэтому нет дополнительного фреймворка, специфичного для TypeScript, для изучения.

Изучение JavaScript и TypeScript

Мы часто видим вопрос «Стоит ли изучать JavaScript или TypeScript?».

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

Существует множество ресурсов для программистов, которые хотят изучить JavaScript; вы не должны игнорировать эти ресурсы, если вы пишете на TypeScript. Например, количество вопросов на StackOverflow, помеченных тегом javascript, примерно в 20 раз больше, чем typescript, но все вопросы по javascript также относятся к TypeScript.

Если вы ищете что-то вроде «как отсортировать список в TypeScript», помните: TypeScript — это среда выполнения JavaScript с проверяющим типы на этапе компиляции. Способ сортировки списка в TypeScript такой же, как и в JavaScript. Если вы найдете ресурс, который напрямую использует TypeScript, это тоже хорошо, но не ограничивайте себя мыслью о том, что вам нужны ответы, специфичные для TypeScript, на повседневные вопросы о том, как выполнить задачи во время выполнения.

Дальнейшие шаги

Это был краткий обзор синтаксиса и инструментов, используемых в повседневном TypeScript. Отсюда вы можете:

• Изучить основы JavaScript, мы рекомендуем либо:

  • Ресурсы Microsoft по JavaScript или
  • Руководство по JavaScript на веб-документации Mozilla

• Продолжить чтение TypeScript для программистов JavaScript

• Прочитать полное Руководство от начала до конца

• Познакомиться с примерами Playground