Введение
Если вы пришли в JavaScript из строго типизированных языков, таких как Java и C++, одним из самых первых вопросов, который у вас может возникнуть, был «Где типы данных в JavaScript?». Это кажется очень увлекательной или разочаровывающей идеей бестипового языка, такого как JavaScript, который полностью зависит от личного выбора, но свобода, которую JavaScript предлагает с типами или даже с базовыми методами программирования, имеет свою цену.
Давайте рассмотрим простой пример доступа к свойству внутри объекта в JavaScript.
Допустим, вы хотели напечатать имя человека в консоли.
console.log(person.firstNames)
Но почему-то вы сделали опечатку "firstNames" вместо "firstName". Как вы думаете, что произойдет, будет ли код работать?
Или давайте возьмем другой пример, где вы предположили, что возраст внутри объекта человека является числом, и вы сделали person.age+5,сноваJavaScript не знает тип person.age, так что все хорошее или плохое будет известно только во время выполнения.
Возможно, вы ожидали, что возраст будет увеличен на 10, но поскольку тип возраста был строковым, оператор «+» работал по-другому и объединял 10, чего вы опять-таки не хотели и о чем вас не предупреждали.
Итак, в первом случае ваша опечатка была замечена только во время выполнения, и это тоже без ошибки, что плохо для очень большой базы кода, где такие ошибки могут быть пропущены. В то время как вторая ошибка может даже привести к неправильным результатам, но их будет нелегко отследить.
Незнание типа данных может привести к очень неожиданным и ошибочным результатам.
Типы машинописного текста и данных
let age: number = 59;
Это машинописный код, который не только определяет переменную age, но также сообщает нам о типе данных, которые может хранить эта переменная.
Сохранение значений, отличных от чисел, вызовет ошибку.
Но вы можете спросить: «Это правильный код JavaScript?» ответ на это НЕТ!, где вы пишете машинописный текст? В файле .ts.
Каждый код JavaScript также является машинописным кодом, но не каждый машинописный код является кодом JavaScript.
Но самое главное — как запустить этот файл .ts в NodeJS, браузере или где-либо еще? Поэтому, прежде чем углубляться в особенности машинописного текста и то, как он может решить вышеуказанные и многие другие проблемы, с которыми мы сталкивались в JavaScript, нам сначала нужно прояснить сомнения относительно работы машинописного текста.
Как работает машинописный текст
Итак, Typescript разработан Microsoft и расширяет JavaScript типами. Microsoft предоставляет компилятор машинописного текста [tsc], который принимает файлы .ts в качестве входных данных и создает файлы .js.
Таким образом, в конечном итоге создается и выполняется только код JavaScript, а не машинописный текст, машинописный текст не может быть запущен браузером напрямую.
Несколько отличий в машинописном коде и перенесенном коде JavaScript заключаются в том, что определение типа отсутствует в окончательном файле JavaScript, а ключевое слово let изменено на var с помощью Компилятор tsc.
Компилятор Typescript по умолчанию создает код ES3, поэтому вы можете быть уверены, что JS будет работать и в старых браузерах. Итак, куда девается этот : номер? Это было для вас, разработчиков. Typescript не делает никакой оптимизации, чтобы хранить переменные с информацией о типе в памяти. Он ограничивает разработчика и выполняет статическую проверку типов перед фактическим временем выполнения и сообщает об ошибках через CLI. Если используемый вами редактор поддерживает интеграцию машинописного текста, даже ручная компиляция не требуется.
Чем помогает Typescript?
Мы видели, как опечатка не приводит к ошибке при доступе к свойству объекта. Каждый объект JavaScript внутренне представлен как Фигуры. Typescript позволяет вам создать интерфейс для вашего объекта; этот интерфейс будет содержать схему вашего объекта, например:
Определить интерфейс легко, но имейте в виду «;» точка с запятой после каждой пары KEY: TYPE, это не объект JavaScript.
Этот интерфейс Person работает как определяемый пользователем тип для переменной person, что означает, что теперь переменная person должна следовать правилам, указанным в интерфейс.
Если мы снова укажем ключ age, машинописный текст с нечисловым значением выдаст ошибку, как показано выше, это делает дизайн объектов известным еще до создания объектов и делает код менее подверженным ошибкам. . Это может быть очень удобно при использовании библиотек из npm или yarn, где заранее известно, какие аргументы будут переданы в функцию, а также их типы и тип возвращаемого значения. функция.
Современные текстовые редакторы, такие как VSCode, Atom, Sublime text, также могут в большинстве случаев экономить время, необходимое для ручной компиляции. Редакторы могут сообщать об ошибках во время написания кода в режиме реального времени.
Вы можете спросить, а что, если объект человека не имеет lastName, прямо сейчас определяя объект человека с интерфейсом Person в качестве его типа и без какого-либо из трех ключей {firstName, lastName, age} выдаст ошибку, поэтому, чтобы сделать какое-либо свойство необязательным, используйте «?» сразу после имени свойства и непосредственно перед: (двоеточие).
Это сделает как свойство lastName&age необязательным, так и свойство firstName обязательным. свойство.
Такая строгость поможет нам решить обе проблемы с JavaScript, упомянутые ранее. Определение типа возраста как числа предотвратит использование чего-либо другого, кроме числового типа, в качестве значения внутри свойства возраста и предотвратит ошибочные операции.
Я предлагаю посмотреть транспилированный код JavaScript приведенного выше машинописного кода. Какие изменения вы наблюдаете?
Еще несколько типов
Что, если бы мы хотели иметь свойство с именем «getName», которое является функцией, возвращающей полное имя человека. Как добавить этот метод в интерфейс? Вам потребуются три компонента функции: имя функции, аргументы функции, и тип возвращаемого значения функции.
Таким образом, если вы укажете getName, неправильное количество аргументов, неправильный тип аргумента или неправильный тип возвращаемого значения функции, перед выполнением будет сообщено об ошибке во время записи функции. сам код.
Существует тип «any», который представляет собой старый способ JavaScript сказать, что переменная может быть любого типа. Но любой шрифт полностью отключает машинопись, любой — это не решение, а начало более серьезных проблем.
Существуют различные другие типы, предоставляемые Typescript, отличные от того, что предоставляет JavaScript, например, unknown, never, и void. Чтобы узнать больше обо всех основных типах, ознакомьтесь с этим.
Typescript имеет множество встроенных типов для DOM-элементов, но typescript не знает о нашей разметке, он только считается с типами. Чтобы узнать больше о том, как Typescript может помочь с манипуляциями с DOM с его более надежными типами, ознакомьтесь с этим.
Классы и машинопись
Классы — это шаблон для создания объектов. Одной из самых первых функций, предоставляемых машинописью, является модификатор видимости члена, который может быть Public, Private, и Protected.
По умолчанию все в классе является общедоступным.
Члены защищенные видны только подклассам того класса, в котором они объявлены.
private — то же самое, что и protected, но не разрешает доступ к элементу даже из подклассов.
Поля классов также могут быть помечены как доступные только для чтения. Это предотвращает присвоение полю вне конструктора.
Typescript также предоставляет объявление статических членов. Эти члены не связаны с конкретным экземпляром класса. Доступ к ним можно получить через сам объект конструктора класса:
Опять же, я рекомендую наблюдать за скомпилированным кодом JavaScript вышеприведенных определений классов, на этот раз код ES3 по умолчанию может показаться вам совершенно незнакомым. Помните, что классы не были частью ECMAScript до ES6.
Ручная компиляция каждый раз для просмотра кода JavaScript может быть утомительной, поэтому Typescript также предоставляет режим просмотра [-w], который может перезагружать только что скомпилированный код JavaScript без какой-либо ручной компиляции.
Чтобы узнать, как настроить файл tsconfig для запуска машинописного текста в режиме просмотра, проверьте это.
Заключение
Typescript расширяет JavaScript с помощью определений статических типов, вывод типов позволяет получить большую мощность без написания дополнительного кода, Typescript предназначен для разработки больших приложений и транскомпилируется в JavaScript, который работает: в браузере, на Node JS или в ваших приложениях. Если вы хотите узнать об этом больше, рекомендую посетить Веб-сайт Typescript.
Дальнейшее чтение
Блоги — Манипулирование шрифтами и расширенные типы, Общие типы шаблонов
Youtube — Основы TypeScript, Изучаем TypeScript — Полный курс для начинающих
электронная книга — Справочник по машинописным текстам
Эта статья опубликована в Клубе исследований и разработок Spider, NIT Trichy, в веб-среде!
