Автор оригинала: FreeCodeCamp Community Member.
Tymdercript – одна из текущих горячей темы в веб-разработке, а также по причинам.
Это позволяет нам вводить литой при объявлении переменных, что означает, что мы явно устанавливаем тип данных, которые мы ожидаем обратно. Затем он бросает ошибки, если возвращенные данные не являются типом, мы ожидали, что вернутся, или если функция вызова имеет слишком мало или слишком много аргументов. И это просто выборка всего, что он предлагает.
Если вам понравится обзор типов данных, вы найдете его полезным для чтения моих Предыдущая статья Отказ Чтение этой статьи не требуется, но она даст вам большое понимание типов данных и синтаксиса для TearmScript.
Прежде чем мы начнем, важно отметить, что TypectScript можно использовать в сочетании с каркасом/библиотекой, но она также может быть использована независимой от рамки/библиотеки. TypeScript – это значение по умолчанию в угловых проектах, и у меня есть статья в работах о начале работы с ним.
Кроме того, эта статья предполагает, что у вас есть базовое понимание программирования JavaScript.
Итак, теперь мы готовы начать работу с Teadercript и начните использовать свои потрясающие функции.
Давайте копать!
Установка типографии
Существует два основных способа установки TypeScript. Первый – через Visual Studio (Не путать с Visual Studio Code ), который является IDE Отказ 2015, 2017, и я считаю, что версии 2019 года поставляются с Typearcript, установленными уже.
Это не тот маршрут, я буду сегодня покрывать сегодня, так как в основном я использую код Visual Studio для всех моих потребностей.
Второй способ, и так, как мы сосредоточимся, через NPM (Узел Управляющий пакет).
Если у вас еще нет NPM и/или Узел Установлен (вы получаете NPM при установке узла), сейчас самое прекрасное время, чтобы сделать это, так как это требование к следующим шагам (и путем ассоциации требование использовать TeampScript).
После установки узла и NPM откройте свой терминал в VS-коде и запустите следующую команду:
NPM установить -G TypeScript
После завершения установки вы увидите, что 1 пакет был добавлен. Вы также увидите сообщение, указанное в версии Typeycript, которая была установлена.
Это все, что вам нужно, чтобы начать компилировать TeampScript для JavaScript.
Теперь вы готовы начать писать типографы!
Начало напечатает проект
Давайте создадим напечатанный проект, чтобы мы могли использовать все эти отличные функции, которые приходят вместе с его использованием.
В вашем редакторе выбора (я использую VS-код) Давайте создадим HTML-файл, чтобы быть визуальной стороной нашего кода. Вот что выглядит мой базовый HTML-файл:
Честно говоря, мы просто используем этот HTML, поэтому мы можем иметь что посмотреть на странице. Что мы действительно связаны с использованием консоли.
Вы заметите, что у меня есть app.js связаны во главе нашего index.html файл.
Вы, вероятно, говорю себе Я думал, что это была статья о TypeyctScript?
Хорошо держите своих лошадей, это. Я просто хочу выделить некоторые различия между JavaScript и Teadercript (вы узнаете, где этот файл выходит вниз ниже).
Ниже вы увидите простое переменную декларацию и оператор журнала консоли:
Как сбоку, если вы хотите отключить некоторые Es-lint Правила Вы можете разместить правила в верхней части в комментариях, как я проделал выше. Или если вы хотите Полностью Отключить ES-Lint для этого файла только вы можете разместить /* eslint-disable */ в верхней части файла.
А вот консоль браузера:
Давайте притворяться, что я строю приложение и для Имя пользователя Я ожидаю, что всегда получит строку обратно. По пути я могу ошибиться или мои данные могут быть мутированы от другого источника.
Теперь Имя пользователя это число:(
И вот консоль браузера, показывающая изменения в Имя пользователя Что мы, вероятно, не хотели случиться, если бы это было производственное приложение:
Что если возвращено Имя пользователя Затем был передан в другую функцию или использовал в качестве кусочка большего головоломки данных?
Было бы не только беспорядок, чтобы выяснить, где произошла мутация (особенно если у нас было большее приложение), но также создало бы неисправное количество ошибок в нашем коде.
Теперь давайте попробуем тот же эксперимент в Tymdercript. Для этого нам нужно будет создать новый файл с .ts Расширение для обозначения файла TeampScript.
Я назову мой app.ts Чтобы оставаться согласованным с соглашениями о именах и поместите тот же код из нашего файла JavaScript в наш новый файл TeampStry.
Вы заметите, что я использую Type Casting при объявлении моей переменной сейчас, и я явно рассказываю Tearccript, что эта переменная должна указывать только на строковое значение.
Вы также заметите, что у меня есть строка ошибки под Имя пользователя Когда я переназнавая его ценность.
Компиляция Teamscript с CLI
Чтобы увидеть, как это выглядит в нашей консоли, мы должны компилировать его для JavaScript. Мы делаем это бегом TSC App.ts В нашем VS-консоли (вы также можете запустить одну и ту же команду в любом терминале, если вы находитесь в правильном каталоге).
Когда мы запускаем эту команду, она будет компилировать наш Teadercript в JavaScript. Это также генерирует другой файл с тем же именем, только с .js расширение.
Вот где это app.js Файл пришел от того, что я упоминал ранее в статье.
Чтобы скомпилировать несколько файлов сразу, просто укажите те имена в вашей команде, один за другим: TSC App.ts header.component.ts.
Также возможно компилировать несколько типографических файлов в один файл JavaScript, добавив - нет флаг:
TSC * .ts – index.js
Существует также команда часов, которые будут перекомпилировать все типографы, автоматически в любое время обнаружено изменение. Это держит вас от того, чтобы запускать ту же команду и снова:
TSC * .ts –out app.js –watch
Вот вывод из этого TSC App.ts Команда выше:
Эта ошибка говорит нам, что есть проблема с переназначением Имя пользователя Отказ Поскольку мы явно установили нашу переменную, чтобы быть строкой ( даже если я не установил переменную к строке, ошибка все равно будет произойти, потому что типы данных Teamscript Infers Mine ) мы не можем переназначить его на номер.
Это отличная особенность, потому что она заставляет нас быть явными с нашими переменными декларациями и спасает нас от ошибок, которые могут оказаться раздражающими и трудоемкими. Если вы ожидаете определенного типа данных, вы должны получить эти данные, в противном случае вы должны получить ошибку.
Использование явных декларативных массивов и объектов
Допустим, я создаю проект и вместо вручную установку навигационных ссылок, я хочу сохранить эту информацию в массиве объектов.
Я ожидаю определенного формата для информации, которая хранится, поэтому она соответствует всем ссылкам.
Вот как я могу установить «сложный» массив в Tymdercript:
С левой стороны мы объявляем название переменной Navlinks следуют двое толстой кишки. На фигурных скобках находится где мы начинаем объявлять формат информации, которую мы ожидаем в этом массиве.
Мы говорим Teadercript, что мы ожидаем, что этот массив будет содержать объект или объекты с этими именами и типами свойств. Мы ожидаем, что Имя который является строкой, а ссылка который является строкой, а Alt который также является строкой.
Как и с другими Типы данных Если мы отклоняемся от формата, который мы установили для этой переменной, мы столкнулись с ошибками.
Здесь мы пытались добавить новую запись, которая была пустой, и мы получили следующую ошибку:
Тип ‘{}’ отсутствует следующие свойства от типа ‘{name: string; Ссылка: строка; Alt: string; } ‘: Имя, ссылка, Alt Ts (2739)
Мы получаем подобные ошибки, если мы стараемся добавить еще одну запись с неправильным типом информации:
{Название: 'Jonathan', ссылка: 15, Alt: false} ❌.
{name: ['Jon', 'Marley'], ссылка: `https://link123.net`, ALT: NULL} ❌.
Это.навенкс [0] .img ❌.
Это.navlinks [0] .name ✔️.
Вы получаете идею, хотя. Как только мы установим формат, TypeScript удержит нас к этому формату и сообщает нам, если/когда мы отклоняемся от него с ошибкой.
Кроме того, вот несколько способов определить массив:
Const Arr1: Array //позволит нам иметь любое количество элементов с любым типом
const люди: [строка, строка, строка] = [«Иоанн», «Сэмми», «Стефани»]; //бросит ошибку, если в массиве появляются более 3 строк или любые ненужные элементы.
const люди: массив //позволит нам иметь любое количество только строковых элементов в нашем массиве
Объекты работают так же, как и массивы в Typescript. Они могут быть явно определены с помощью заданных типов, или вы можете позволить TypeScript сделать все вывод. Вот основной пример объекта:
Const Person: {name: string, адрес: строка, возраст: номер} = {Название: ‘Willy’, адрес: ‘123 Sunshine LN’, Возраст: 35}
Опять же, на левой стороне мы объявляем человека как имя переменной с первым набором фигурных брекетов, определяющих формат, мы хотим, чтобы наши данные были в.
Важно отметить, что в объектах, порядок, который мы определяем наши свойства, не приходится соответствовать порядку формата:
Функции, параметры и аргументы
Некоторые из величайших преимуществ, которые вы увидите в Tymdercript, приходят при использовании функций.
Вы когда-нибудь построили функцию, чтобы сделать конкретную задачу, только чтобы узнать, что она не работает, как вы предполагаете?
При использовании Tymdercript это не будет, потому что вы не получили/отправляли правильный тип данных или используете правильное количество параметров/аргументов.
Вот отличный пример:
В нашей функции мы ожидаем получить 3 аргумента, когда калькулятор выполняет. Однако, если мы получим неправильное количество аргументов (слишком мало или слишком много) Tymdercript, даст нам хорошую ошибку:
Точно так же, если мы получим неправильный тип данных при выполнении этой функции Tymerctscrient, будет генерировать ошибку, и функция не будет работать.
Калькулятор ('12 ',' 11 ',' Add); ❌.
Теперь вы можете сказать себе ‘Ну и что? Это все хорошо и хорошо, но это не похоже, что это огромное дело. Но представьте, что ваше приложение десятки и десятки файлов со многими слоями абстракций.
Отличным примером этого будет угловая приложение с услугами, моделями данных, многоуровневые компоненты и все зависимости, которые идут вместе с этим. Становится все трудно точно определить, где исходит ошибка, когда ваше приложение станет большим.
Это все
Надеюсь, вы можете увидеть преимущества Tymdercript сейчас. Есть много больше, чем те, которые я здесь изложил, и я рекомендую вам прочитать документацию, если вы хотите найти больше.
Вы можете найти эту статью и другие, как это на моем Блог Отказ Я бы хотел, чтобы ты остановился!
Пока ты там, почему бы не подписаться на мой Рассылка – Вы можете сделать это в правом верхнем углу главной страницы блога. Я обещаю, что никогда не спаму свой почтовый ящик, и ваша информация не будет передана с кем угодно/сайт. Мне нравится время от времени отправлять интересные ресурсы, которые я нахожу, статьи о веб-разработке, а также список моих новейших постов.
Если вы еще этого еще не можете связаться со мной в социальных сетях! Все мои ссылки также находятся в правом верхнем углу этой страницы. Я люблю связываться с другими и встречаться с новыми людьми, так что не боишься сказать привет. ?
Удачного дня, друга и счастливого кодирования!