TypeScript: Введение
Руководство по TypeScript для начинающих (с некоторой историей TypeScript)
В этом уроке мы узнаем, как появился TypeScript и какие проблемы он решает. Мы также собираемся взглянуть на процесс компиляции TypeScript.
JavaScript, возможно, является одним из самых популярных языков программирования по состоянию на 2020 год, и его популярность растет с каждым днем. Основная причина его популярности в том, что это язык веб-интерфейса по умолчанию. Это означает, что браузеры могут понимать только JavaScript и ничего больше.
Это досадное обстоятельство вынудило каждого веб-разработчика стать разработчиком JavaScript. По мере роста спроса на веб-разработчиков в индустрии веб-разработки все больше и больше людей становились разработчиками JavaScript.
Поначалу кажется, что это хорошо, но не так уж и впечатляюще. JavaScript, хотя он может быть на вершине диаграммы популярности с точки зрения его использования, но я бы не стал использовать «популярный» как точное слово для его описания.
JavaScript - это не старый язык программирования, как C или C++ язык программирования. На самом деле он даже не был разработан, чтобы вести себя как язык программирования общего назначения. Он был разработан Бренданом Эйхом в 1995 для браузера Netscape за 10 дней. Предполагалось, что это будет язык сценариев для добавления динамического поведения веб-странице.
Многие другие браузеры, такие как Internet Explorer, адаптировали этот язык, но со своим собственным вкусом. Вот почему его нужно было стандартизировать. Первая официальная версия JavaScript (ES1) была выпущена ECMAScript еще в 1997.
Если вы хотите узнать больше об истории JavaScript, вы можете посмотреть видео выше. В следующей статье я обсуждал, как работает JavaScript «под капотом» и различные части движка JavaScript.
Короче говоря, у JavaScript не было хорошего старта. Однако как язык программирования общего назначения он появился гораздо позже. В 2009 году парень по имени Райан Даль создал серверную программу, в которой использовался движок JavaScript V8 Google Chrome, и с его помощью можно было запускать программу JavaScript.
Эта идея понравилась многим, в основном разработчикам JavaScript, которым, я думаю, наскучило заниматься веб-разработкой изо дня в день. Так родился Node.js. Прошло 10 лет, а Node.js все еще находится на подъеме.
Согласно онлайн-опросу, проведенному StackOverflow в 2019 году, JavaScript является самым популярным языком на планете, а Node.js заслуживает огромной признательности за это, поскольку он является самым популярным. инструмент (фактически платформа), как показано ниже.
💡 Мне нравится, что го (голанг) также становится популярным, несмотря на то, что он является новым языком. Go - язык со статической типизацией, поэтому было бы несправедливо сравнивать его с JavaScript. У меня есть специальная публикация только для Go, если вы хотите ее изучить.
На картинке выше ясно видно, что JavaScript широко используется, но означает ли это, что разработчикам нравится работать с JavaScript? Что ж, на мой взгляд, JavaScript - это весело, но влечет за собой множество жертв. Позволь мне объяснить.
JavaScript - это язык сценариев, что означает, что он будет интерпретироваться механизмом JavaScript в его исходной форме (исходный код). Если вы хотите узнать, как это интерпретируется механизмом JavaScript, прочтите тему Как работает JavaScript в статье Введение в WebAssembly.
Будучи языком сценариев, он не может быть скомпилирован в компактный двоичный исполняемый файл, который может работать в исходном формате без интерпретатора. Что ж, это небольшая программа. Большая проблема - это безопасность типов. JavaScript не является языком со статической типизацией, что означает, что типы данных оцениваются во время выполнения.
Например, если вы объявляете переменную var x = 1;, тип переменной x будет number во время выполнения, но вы также можете присвоить ей новое значение другого типа, например string, например x = 'hello'. Такое поведение может вызвать множество проблем, если мы не будем осторожны.
Поскольку в процессе написания JavaScript не участвует компилятор, невозможно предотвратить такое поведение, если только во время выполнения не возникнет какая-либо ошибка, если нам очень повезло найти эту ошибку.
Провал Дарта
Google, будучи Google, хотел решить эту проблему. Разработчики Google работали над языком со статической типизацией под названием Dart, который должен был заменить JavaScript в браузере (и, надеюсь, на стороне сервера). Они планировали выпустить виртуальную машину в браузере Google Chrome, которая могла бы запускать (интерпретировать) программы Dart изначально. Для поддержки устаревших версий Dart мог переносить на JavaScript до тех пор, пока все (браузеры) не подключились к этой подножке.
💡 Согласно Википедии, он впервые появился в октябре 2011 года, а первая официальная версия v1.0 была выпущен в ноябре 2013 г..
Вся эта идея вызвала смех и критику со стороны разработчиков. С тех пор Dart был заменен JavaScript и стал эксклюзивным языком программирования для написания кроссплатформенных нативных приложений. Фреймворк Google Flutter использует для этого язык Dart.
💡 Если вы хотите изучить Дарт, у меня есть для него специальная публикация.
Расцвет TypeScript
Вернемся к вопросу, популярен ли JavaScript? Уточним, любят ли разработчики JavaScript? Я так не думаю, по крайней мере, в целом, и другие разработчики, похоже, согласны с этой теорией.
Согласно тому же опросу, JavaScript даже не входит в десятку самых популярных языков программирования (ну, это 11-е). Но TypeScript занимает 3-е место в списке и первое, если мы говорим только о языках, имеющих дело с JavaScript. Так что же такое TypeScript и почему, черт возьми, он так популярен?
Команда Microsoft хотела сделать что-то вроде Dart, но они выбрали другой подход. Вместо того, чтобы заново изобретать язык с совершенно новым синтаксисом, они просто изменили синтаксис JavaScript. И не только это, но они также сделали этот новый синтаксис необязательным. Так родился TypeScript.
Это означает, что любая программа JavaScript является допустимой программой TypeScript. По этой причине TypeScript также называют надмножеством JavaScript. Возможно, вы слышали, как кто-то сказал, что TypeScript - это просто JavaScript с типами.
Итак, что это за новый синтаксис и что такое типы?
Обычно вы пишете программу на JavaScript, как показано ниже.
В приведенной выше программе JavaScript мы просто создали две переменные x и y. Переменная x имеет начальное значение 1, которое является number. Однако y не имеет начального значения. Начальное значение undefined.
Представим, что эта программа запущена в браузере (или на Node.js). Как вы думаете, что произойдет. Будучи языком с динамической типизацией, JavaScript не выдаст никаких ошибок. Сначала тип данных x - number, затем string, когда ему присваивается строка 'hello', а затем boolean, когда ему присваивается true. Вы можете видеть это из вывода console.log операторов. То же самое и с y. Все эти типы определяются во время выполнения.
TypeScript предоставил компилятор, который может обрабатывать эту программу и выдавать ошибки, если обнаруживает в программе что-то странное. Этот компилятор также называется транспилятором, поскольку он выводит более чистую программу JavaScript.
На данный момент наша программа не содержит никакой необходимой информации, которая могла бы сообщить компилятору TypeScript о том, что от него ожидается. То, что ожидает TypeScript, - это аннотации типов. Аннотация типа - это указание типа данных значения.
Мы преобразовали JavaScript в программу TypeScript, изменив расширение с .js на .ts. Теперь ваша IDE может проверять наличие ошибок еще до того, как вы скомпилируете эту программу в JavaScript.
Установка TypeScript (следуйте этой документации для установки TypeScript) идет с компилятором, доступ к которому можно получить с помощью команды tsc. Команда tsc program.ts компилирует program.ts файл в program.js файл.
На данный момент мы видим, что компилятор TypeScript отображает некоторые ошибки в консоли. Если видите, переменная x помечена знаком :string. Мы уже говорили об этой аннотации типа. Эта аннотация предоставляет компилятору TypeScript тип данных переменной x.
Когда компилятор TypeScript видит это, он предполагает, что x будет string за время существования этой программы. Однако мы присвоили ему начальное значение 1, которое равно number. Это недопустимо, и, как вы можете видеть, он будет жаловаться на это в сообщениях об ошибках компиляции.
y помечен типом number. Поскольку ему не хватает начального значения, компилятор TypeScript будет следить за любыми операторами присваивания, которые присваивают этой переменной значение, отличное от значения типа number. Поскольку мы пытаемся присвоить ему значение 'world' типа string, это неверно.
Как только мы исправим все проблемы, TypeScript сгенерирует выходной файл program-fixed.js, который можно безопасно запускать где угодно. TypeScript сохраняет исходное имя исходного файла и заменяет только расширение.
Как видно из вышеприведенного вывода, в выходной программе ничего не изменилось. Так в чем был смысл? Куда делись все аннотации типов?
Если аннотации типов просочились в скомпилированный вывод, это не будет действительной программой JavaScript, поскольку механизм JavaScript не понимает, какие аннотации типа являются, и вызовет SyntaxError, как показано ниже.
В TypeScript используется Система стертых типов, которая удаляет аннотации типов и любую информацию, относящуюся к типу, из скомпилированной программы. Аннотации типов предназначены только для предоставления информации о типах значений компилятору TypeScript во время процесса компиляции. Поэтому TypeScript также попадает в категорию языков со статической типизацией.
Цель TypeScript - выявить ошибки в программе до того, как она попадет в производство и вызовет проблемы во время выполнения. Его цель не состоит в том, чтобы предоставить инструменты для исправления или модификации исходного исходного кода (бизнес-логики), чтобы он мог хорошо работать во время выполнения во всех ситуациях.
Однако, будучи надмножеством JavaScript, он морально обязан поддерживать существующие стандарты JavaScript, такие как ES2020, который является текущим. Но разработчик может по ошибке использовать функцию из довольно нового стандарта, например Promise из ES6, и запустить скомпилированную программу в среде, которая не поддерживает обещания, например IE11 (, которая поддерживает только функции JavaScript до ES5 ).
Это решается с помощью TypeScript с использованием файла конфигурации, в основном с именем tsconfig.json, который содержит информацию о проекте и ожидаемых от компилятора TypeScript данных. Это простой файл JSON.
outDir указывает каталог, в который компилятор должен выдавать выходные файлы .js. Параметр target указывает версию JavaScript, которая будет поддерживаться средой выполнения, а параметр module указывает систему модулей, доступную во время выполнения, например CommonJS, используемую Node.js.
Когда вы запускаете команду tsc, компилятор TypeScript ищет tsconfig.json в текущем каталоге. Вы можете указать собственный путь к этому файлу конфигурации, используя флаг командной строки --project или -p.
Поскольку для target в этом случае установлено значение ES5, вы получите ошибку компиляции, если используете любую функцию JavaScript, которая не является частью спецификаций ES5, например Promise. Однако некоторые функции скомпилированы до версии target, например, объявление переменной let преобразуется в объявление var.
Таким образом, можно с уверенностью сказать, что TypeScript будет информировать о большинстве ситуаций во время компиляции, которые могут вызвать проблемы во время выполнения. Теперь мы можем ясно видеть, почему TypeScript ❤️ (любим) разработчиками JavaScript.
💡 Согласно Википедии, TypeScript впервые появился в октябре 2012 года, а первая стабильная версия v0.8 была выпущен для публики в том же месяце. Это могло означать, что Microsoft позаимствовала идею или, по крайней мере, мотивацию у Дарта, но, тем не менее, это оказалось отличным гребаным решением.
Подробнее о TypeScript
Компилятор TypeScript написан на JavaScript, как бы безумно это ни звучало, но это стопроцентный факт. Однако исходный исходный код этого компилятора написан на TypeScript. Поэтому TypeScript является самостоятельным.
TypeScript имеет открытый исходный код, и его официальный репозиторий проектов размещен на Github (ссылка здесь). Каталог src содержит исходный код компилятора TypeScript вместе с другими программами.
Каталог lib содержит определения типов для API-интерфейсов JavaScript (таких как Promise) и API-интерфейсов браузера (таких как fetch), которые используются компилятором TypeScript для проверки вашего кода. если эти API используются в вашем коде. Каталог bin содержит все инструменты командной строки.
TypeScript имеет одну из лучших онлайн-документации. Вам следует потратить некоторое время на чтение этой документации с typescriptlang.org. TypeScript предоставляет интерактивный REPL для компиляции и тестирования программ TypeScript в интерактивном режиме.
Чего ожидать от этой серии статей?
В этой серии статей мы обсудим почти все возможности TypeScript с некоторыми интересными примерами. Вы можете найти источник этих примеров в репозитории GitHub (в процессе).
- Введение: Сначала мы обсудим структуру программы TypeScript и то, как ее скомпилировать с помощью
tscилиts-nodeи запустить. Затем мы обсудим основные типы данных, предоставляемые TypeScript, такие какstring,numberи т. Д. - Сложные типы данных. Затем мы обсудим сложные типы данных, такие как
functions,classes, а также пользовательские типы данных, такие какinterfacesиenums, предоставляемые TypeScript. - Система типов: TypeScript полностью основан на типах. Вот почему необходимо понимать систему типов, используемую TypeScript. Мы будем говорить об этом в различных уроках по спецификациям систем типов, обобщениям, полиморфизму, неизменяемости данных и служебным типам.
- Новые функции: TypeScript, являющийся надмножеством JavaScript, поддерживает новые функции стандарта ECMAScript. Поэтому в этом разделе мы поговорим об этих функциях, таких как обещания с использованием Async / Await, декораторы и т. Д.
- Модульная система. Модульная система в настоящее время является горячей темой в мире JavaScript. В ES6 встроена поддержка модулей, и она становится лучше с каждым днем. В этом разделе мы поговорим о модульной системе и связанных с ней темах.
- Компиляция. На этом заканчивается TypeScript, компиляция программ TypeScript, последний рубеж для разработчиков TypeScript. В этом разделе мы собираемся обсудить конфигурационный файл
tsconfig.json, компилятор TypeScript и API командной строки.
💡 Эти статьи будут представлены вам в последовательном порядке под тегом
TypeScriptв меню этой публикации.
Я почти закончил со всеми статьями, но я бы предпочел выпустить их одну или две в неделю, чтобы они были правильно отредактированы на предмет грамматических и программных ошибок.
💡 Я бы порекомендовал вам подписаться на эту публикацию, чтобы получать эти статьи в своей ленте. Я не зарабатываю ни копейки на этих статьях, поэтому я очень ценю аплодисменты или подписку.
