Как запустить файл typescript
Обновлено: 03.07.2024
Мне на удивление трудно найти ответ на этот вопрос. Используя простой Node.JS, вы можете запускать любой js-файл с помощью node path/to/file.js , с CoffeeScript - coffee hello.coffee , а в ES6 - babel-node hello.js . Как мне сделать то же самое с Typescript?
В моем проекте есть tsconfig.json , который используется Webpack / ts-loader для создания небольшого симпатичного пакета для браузера. У меня есть потребность в выполнении шага сборки с консоли перед этим, хотя, чтобы использовать некоторые из файлов .ts , используемых в проекте для генерации схемы, но я, похоже, не могу запустить один файл Typescript без компиляции всего проекта.
Как мне сделать то же самое с Typescript
Вы можете оставить tsc работать в режиме просмотра, используя tsc -w -p . , и он сгенерирует для вас файлы .js в реальном времени, так что вы можете запустить node foo.js как обычно
У нас есть следующие шаги
Для начала вам нужно установить машинописный текст
npm install -g typescript
2. Создайте один файл helloworld.ts
3. Откройте командную строку и введите следующую команду.
tsc helloworld.ts
узел helloworld.js
Выполните следующие команды и установите необходимые пакеты глобально:
Теперь выполните следующую команду, чтобы выполнить файл машинописного текста:
Чтобы добавить к ответу @Aamod выше, если вы хотите использовать одну командную строку для компиляции и запуска кода, вы можете использовать следующее:
Полезная информация - вот новейшая среда выполнения TypeScript / JavaScript Deno.
Он был создан создателем узла Райаном Далем на основе того, что он сделал бы по-другому, если бы мог начать все сначала.
Во-первых, ts-node не работает в этом сценарии , по состоянию на март 2020 года. Итак, мы согласимся на tsc , за которым следует node .
Во-вторых, TypeScript по-прежнему не может выводить файлы .mjs . Так что мы довольствуемся файлами .js и "type": "module" в package.json .
В-третьих, вам нужны чистые строки import без указания расширения .js (что может сбивать с толку в файлах .ts ):
Что ж, это нетривиально. Узел требует указания расширений при импорте, если вы не используете < > флаг. В этом случае это позволит узлу искать Lib.js или Lib/index.js , когда вы указываете только ./Lib в строке import .
Транспортировка делает вещи намного более беспорядочными, чем запуск ванильного Node.
Напишите себе, что может помочь простая оболочка bash.
Как и ответ Зишана Ахмада, я также думаю, что ts-node - это правильный путь. Я бы также добавил shebang и сделал его исполняемым, чтобы вы могли просто запустить его напрямую.
Установите машинописный текст и ts-узел глобально:
Создайте файл hello с таким содержанием:
Как видите, первая строка имеет шебанг для ts-узла
Запускать напрямую, просто выполнив файл
- Этот , похоже, не работает с модулями ES , поскольку Дэн Даскалеску указал .
- См. эту проблему, где обсуждается лучший способ создания сценария командной строки со связыванием пакетов , предоставлено Kaspar Etter . Я соответственно улучшил шебанг
Обновление 2020-04-06: Некоторые изменения после большого вклада в комментарии: Обновите shebang, чтобы использовать ts-node-script вместо ts-node , ссылку на проблемы в ts-node.
Для таких сред, как Webstorm, где нельзя изменить команду node кому: ts-node или npx :
- npm install ts-node typescript (Установить зависимости)
- node --require ts-node/register src/foo.ts (добавить --require ts-node/register в "Параметры узла")
Этот ответ может быть преждевременным, но means поддерживает запуск как TS, так и JS из коробки.
Исходя из вашей среды разработки, переход на Deno (и изучение этого) может быть слишком сложным, но, надеюсь, этот ответ поможет кому-то в будущем.
На всякий случай, если кто-то такой же сумасшедший, как я, и хочет просто запустить сценарий машинописного текста, как если бы это был сценарий .js, вы можете попробовать это. Я написал хакерский скрипт, который, похоже, выполняет скрипт .ts с использованием node.
Вы можете сделать это или написать свой собственный, но, по сути, он создает файл .js, а затем использует node для его запуска следующим образом:
Просто. Просто убедитесь, что в вашем скрипте есть только один "." иначе вам нужно будет изменить свой JSFILE другим способом, чем я показал.
Вы можете добавить в проекты поддержку TypeScript, используя пакет TypeScript SDK, который доступен по умолчанию в Visual Studio Installer или в виде пакета npm. Для проектов, которые разработаны в Visual Studio 2019, рекомендуется использовать пакеты npm TypeScript. Они обеспечивают лучшую переносимость между разными средами и платформами.
Добавление поддержки TypeScript с использованием npm
Пакет npm TypeScript позволяет включить поддержку TypeScript. Когда в проект устанавливается пакет npm или TypeScript 2.1 или более новой версии, в редактор загружается соответствующая версия языковой службы TypeScript.
Следуя инструкциям, установите рабочую нагрузку разработки Node.js и среду выполнения Node.js.
Для самой простой интеграции с Visual Studio создайте проект с помощью одного из шаблонов Node.js для TypeScript, например шаблона пустого веб-приложения Node.js. Либо используйте шаблон Node.js для JavaScript, предоставляемый в Visual Studio, и следуйте инструкциям в этом разделе или используйте проект Открыть папку.
Установите пакет npm для TypeScript, если он еще не включен в ваш проект.
В Обозревателе решений (область справа) откройте package.json в корневом каталоге проекта. Перечисленные пакеты соответствуют пакетам в узле npm в Обозревателе решений. Дополнительные сведения см. в разделе Управление пакетами npm.
Установить пакет npm TypeScript для проекта Node.js можно с помощью командной строки или IDE. Чтобы установить пакет с помощью IDE, щелкните правой кнопкой мыши узел npm в Обозревателе решений, выберите Установить новый пакет npm, найдите TypeScript и установите пакет.
Выберите параметр npm в окне Вывод, чтобы видеть ход установки пакета. Установленный пакет появится в узле npm в Обозревателе решений.
Если пакет не будет включен в проект, добавьте файл с расширением .tsconfig в корневой каталог проекта. Для этого щелкните правой кнопкой мыши узел проекта и выберите Добавить > Новый элемент. Выберите Файл конфигурации TypeScript JSON, а затем нажмите кнопку Добавить.
Visual Studio добавит файл tsconfig.json в корневую папку проекта. Этот файл можно использовать для настройки параметров компилятора TypeScript.
Откройте файл tsconfig.json и обновите его, задав необходимые параметры компилятора.
Ниже приведен пример простого файла tsconfig.json.
- include указывает компилятору, где искать файлы TypeScript (*.ts).
- Параметр outDir указывает выходную папку для обычных файлов JavaScript, которые преобразуются компилятором TypeScript.
- Параметр sourceMap указывает, нужно ли компилятору создать файлы sourceMap.
В приведенной выше конфигурации представлен пример базовой конфигурации TypeScript. Сведения о других параметрах см. в разделе о файле tsconfig.json.
Построение приложения
В проект добавьте файлы TypeScript ( .ts) или TypeScript JSX ( .tsx), а затем добавьте код TypeScript. В качестве простого примера TypeScript используйте следующий код:
В package.json включите поддержку команд сборки и очистки Visual Studio, используя приведенные ниже скрипты.
Если необходимо выполнить сборку с помощью стороннего средства, например webpack, можно добавить в файл package.json скрипт сборки для командной строки:
Пример использования webpack с React и файла конфигурации webpack см. в статье Учебник. Создание приложения Node.js и React в Visual Studio.
Пример использования Vue.js с TypeScript см. в статье Создание приложения Vue.js.
Если необходимо настроить такие параметры, как начальная страница, путь к среде выполнения Node.js, порт приложения или аргументы среды выполнения, щелкните правой кнопкой мыши узел проекта в Обозревателе решений и выберите Свойства.
При настройке сторонних средств в проектах Node.js не используются пути, заданные в разделе Средства > Параметры > Проекты и решения > Управление веб-пакетами > Внешние веб-инструменты. Эти параметры используются для проектов других типов.
Выберите Сборка > Собрать решение.
Хотя сборка приложения выполняется автоматически при его запуске, рассмотрим, что происходит в процессе сборки.
Если вы создали сопоставители с исходным кодом, откройте папку, указанную в параметре outDir, где вы найдете созданные файлы *.js, а также созданные файлы *js.map.
Файлы сопоставителей с исходным кодом требуются для отладки.
Выполнение приложения
Инструкции по запуску приложения после его компиляции см. в разделе Создание первого приложения Node.js.
Автоматизация задач сборки
Для автоматизации задач сторонних средств, таких как npm и webpack, вы можете использовать обозреватель запускателя задач в Visual Studio.
В конце 2012 года Microsoft представила TypeScript, типизированный суперсет для JavaScript, который компилируется в обычный JavaScript. TypeScript фокусируется на предоставлении полезных инструментов для крупномасштабных приложений путем реализации функций, таких как классы, аннотации типов, наследование, модули и многое другое! В этом уроке мы начнем с TypeScript, используя простые примеры кода с укусом, скомпилируем их в JavaScript и просмотрим мгновенные результаты в браузере.
Установка инструментов
Возможности TypeScript применяются только во время компиляции.
Вы настроите свою машину в соответствии с вашей конкретной платформой и потребностями. Пользователи Windows и Visual Studio могут просто загрузить плагин Visual Studio. Если вы работаете в Windows и не имеете Visual Studio, попробуйте Visual Studio Express для Интернета. Опыт TypeScript в Visual Studio в настоящее время превосходит другие редакторы.
Если вы работаете на другой платформе (или не хотите использовать Visual Studio), все, что вам нужно, это текстовый редактор, браузер и пакет npm для TypeScript для использования TypeScript. Следуйте инструкциям по установке:
- Установка диспетчера пакетов node (npm)
- Глобально установите TypeScript пакет npm:
- Любой современный браузер: для этого учебника мы используем Chrome.
- Любой текстовый редактор: для этого учебника используется Sublime Text
- Модуль подсветки синтаксиса для текстовых редакторов
Готово; мы готовы сделать простое приложение «Hello World» в TypeScript!
Hello World в TypeScript
TypeScript является надмножеством Ecmascript 5 (ES5) и включает функции, предлагаемые для ES6. Из-за этого любая программа JavaScript уже является программой TypeScript. Компилятор TypeScript выполняет локальные преобразования файлов в программах TypeScript. Следовательно, окончательный вывод JavaScript точно соответствует вводу TypeScript.
Сначала мы создадим базовый файл index.html и ссылку на внешний файл сценария:
Это простое приложение «Hello World»; поэтому давайте создадим файл с именем hello.ts . Расширение *.ts обозначает файл TypeScript. Добавьте следующий код в hello.ts :
Затем откройте интерфейс командной строки, перейдите к папке, содержащей hello.ts , и запустите компилятор TypeScript с помощью следующей команды:
Команда tsc является компилятором TypeScript и сразу генерирует новый файл hello.js . В нашем приложении TypeScript не используется синтаксис, специфичный для TypeScript, поэтому мы видим тот же самый код JavaScript в hello.js , который мы написали на hello.ts .
Круто! Теперь мы можем изучить возможности TypeScript и посмотреть, как это может помочь нам поддерживать и создавать широкомасштабные приложения JavaScript.
Аннотации type
Аннотации типа являются дополнительной функцией, которая позволяет нам проверять и выражать наше намерение в программах, которые мы пишем. Давайте создадим простую функцию area() в новом файле TypeScript, называемом type.ts
Затем измените источник скрипта в index.html на type.js и запустите компилятор TypeScript с помощью t sc type.ts . Обновите страницу в браузере, и вы увидите следующее:
Как показано в предыдущем коде, аннотации типа выражаются как часть параметров функции; они указывают, какие типы значений вы можете передать функции. Например, параметр shape обозначается как строковое значение, а width и height - это числовые значения.
Аннотации типов и другие функции TypeScript применяются только во время компиляции. Если вы передадите какие-либо другие типы значений этим параметрам, компилятор даст вам ошибку времени компиляции. Такое поведение чрезвычайно полезно при создании крупномасштабных приложений. Например, давайте намеренно передать строковое значение для параметра width :
Мы знаем, что это приводит к нежелательному результату, и компиляция файла предупреждает нас о проблеме со следующей ошибкой:
Обратите внимание, что, несмотря на эту ошибку, компилятор сгенерировал файл type.js . Ошибка не останавливает компилятор TypeScript от генерации соответствующего JavaScript, но компилятор предупреждает нас о потенциальных проблемах. Мы предполагаем, что width будет числом; передача чего-либо другого приводит к нежелательному поведению в нашем коде. Другие аннотации типа включают bool или даже any .
Интерфейсы
Давайте расширим наш пример, включив интерфейс, который далее описывает форму как объект с дополнительным свойством color . Создайте новый файл с именем interface.ts и измените источник скрипта в index.html , чтобы включить interface.js . Введите следующий код в interface.ts :
Интерфейсы - это имена, присвоенные типам объектов. Мы можем не только объявить интерфейс, но и использовать его как аннотацию типа.
Компиляция interface.js не приводит к ошибкам. Чтобы вызвать ошибку, добавим еще одну строку кода в interface.js с формой, которая не имеет свойства имени и посмотрим результат в консоли браузера. Добавьте эту строку в interface.js :
Теперь давайте посмотрим на ошибку. Это:
Мы видим эту ошибку, поскольку объект, переданный в area() , не соответствует интерфейсу Shape ; для этого требуется свойство name.
Стрелочные функции
Понимание сферы действия ключевого слова this является сложной задачей, и TypeScript упрощает его, поддерживая выражения стрелочных функций, новую возможность, обсуждаемую для ECMAScript 6. Стрелочные функции сохраняют значение this , что значительно упрощает запись и использование функций обратного вызова. Рассмотрим следующий код:
this.name в строке 7 будет явно пустым, как показано в консоли браузера:
Взгляните на созданный файл JavaScript. Вы увидите, что компилятор ввел новую переменную var _this = this; , и использовал ее в функции обратного вызова setTimeout() для ссылки на свойство name .
Классы с общедоступными и частными модификаторами доступа
TypeScript поддерживает классы, и их реализация тесно соответствует предложению ECMAScript 6. Давайте создадим еще один файл с именем class.ts , и рассмотрим синтаксис класса:
Вышеуказанный класс Shape имеет два свойства, area и color , один конструктор (точно названный constructor() ), а также метод shoutout() . Скоуп аргументов конструктора ( name , width и height ) являются локальными для конструктора. Вот почему вы увидите ошибки в браузере, а также компилятора:
Любая программа JavaScript уже является программой TypeScript.
Затем давайте рассмотрим public и private модификаторы доступа. Доступ к публичным членам можно получить повсюду, тогда как частные члены доступны только в рамках класса. Разумеется, в JavaScript нет возможности для обеспечения конфиденциальности, поэтому доступность для частного доступа обеспечивается только во время компиляции и служит предупреждением первоначальному намерению разработчика сделать его конфиденциальным.
В качестве иллюстрации добавим модификатор public к аргументу конструктора, name и модификатор private к color . Когда мы добавляем public или private доступность к аргументу конструктора, этот аргумент автоматически становится членом класса с соответствующим модификатором доступности.
Наследование
Наконец, вы можете расширить существующий класс и создать из него производный класс с ключевым словом extends . Давайте добавим следующий код к существующему файлу class.ts и скомпилируем его:
Несколько вещей происходят с производным классом Shape3D :
- Поскольку он получен из класса Shape , он наследует свойства area и color .
- Внутри метода конструктора метод super вызывает конструктор базового класса Shape , передавая значения name , width и height . Наследование позволяет нам повторно использовать код из Shape , поэтому мы можем легко вычислить this.volume с унаследованным свойством area .
- Метод shoutout() переопределяет реализацию базового класса, а новый метод superShout() напрямую вызывает метод buout() базового класса, используя ключевое слово super .
Имея только несколько дополнительных строк кода, мы можем легко расширить базовый класс, чтобы добавить более конкретные функции и сделать наше намерение известным с помощью TypeScript.
Ресурсы TypeScript
Несмотря на чрезвычайно молодой возраст TypeScript, вы можете найти много полезных ресурсов в Интернете (включая полный курс, который подходит к Tuts + Premium!). Обязательно проверьте их:
Мы только начинаем
Попробовать TypeScript легко. Если вам нравится более статически типизированный подход для больших приложений, то функции TypeScript будут применять привычную, дисциплинированную среду. Хотя его и сравнивают с CoffeeScript или Dart, TypeScript отличается тем, что он не заменяет JavaScript; он добавляет функции JavaScript.
Вы, наверное, слышали о TypeScript — языке, созданном и поддерживаемом Microsoft, который оказал огромное влияние на Интернет, и многие известные проекты охватили и перенесли свой код на TypeScript. TypeScript — это типизированный надмножество JavaScript. Другими словами, он добавляет типы в JavaScript — и, следовательно, имя. Но зачем вам эти типы? Какие преимущества они приносят? И вам нужно переписать всю кодовую базу, чтобы воспользоваться ими? На эти и другие вопросы ответят в этом руководстве по TypeScript для начинающих.
Мы предполагаем, что у вас есть базовые знания JavaScript и его инструментов, но для продолжения работы не требуется никаких предварительных знаний TypeScript.
Некоторый ошибочный код JavaScript
Для начала давайте рассмотрим довольно стандартный простой код JavaScript, который может встретиться в любой данной кодовой базе. Он извлекает некоторые изображения из API Pexels и вставляет их в DOM.
Однако в этом коде есть несколько опечаток, которые могут вызвать проблемы. Посмотрите, сможете ли вы их заметить:
Можете ли вы определить проблемы в приведенном выше примере? Конечно, если вы запустите этот код в браузере, вы сразу же получите ошибки, но, воспользовавшись преимуществом TypeScript, мы сможем получить ошибки быстрее, если TypeScript обнаружит эти проблемы в нашем редакторе.
Сокращение этого цикла обратной связи полезно — и оно становится более ценным по мере роста вашего проекта. В этих 30 строках кода легко обнаружить ошибки, но что, если вы работаете в базе кода с тысячами строк? Сможете ли вы тогда легко обнаружить какие-либо потенциальные проблемы?
Примечание: нет необходимости получать ключ API от Pexels, чтобы следовать этому руководству по TypeScript. Однако, если вы хотите запустить код, ключ API совершенно бесплатный: вам просто нужно зарегистрировать учетную запись, а затем сгенерировать ее.
Запуск TypeScript из редактора
Когда-то TypeScript требовал, чтобы все файлы были записаны как.tsфайлы. Но в наши дни посадочная площадка более плавная. Вам не нужен файл TypeScript для написания кода TypeScript: вместо этого мы можем запустить TypeScript в любом файле JavaScript, который нам нравится!
Если вы являетесь пользователем VS Code (не паникуйте, если это не так — мы свяжемся с вами!), Это сработает без дополнительных требований. Мы можем включить проверку TypeScript, добавив это в самый верх нашего файла JavaScript (важно, чтобы это была первая строка):
После этого в вашем редакторе должно появиться несколько волнистых красных ошибок, которые подчеркивают наши ошибки, как показано на рисунке ниже.
Вы также должны увидеть крестик в нижнем левом углу с двойкой рядом с ним. При нажатии на нее будут обнаружены обнаруженные проблемы.
И то, что вы не используете VS Code, не означает, что вы не можете получить такой же опыт с ошибками выделения TypeScript. Большинство редакторов в наши дни поддерживают протокол языкового сервера (обычно называемый LSP), который VS Code использует для интеграции TypeScript.
Стоит поискать в Интернете свой редактор и рекомендуемые плагины для его настройки.
Установка и запуск TypeScript локально
Если вы не используете VS Code или хотите получить общее решение, вы также можете запустить TypeScript в командной строке. В этом разделе я покажу вам, как это сделать.
Сначала создадим новый проект. Этот шаг предполагает, что на вашем компьютере установлены Node и npm :
Затем добавьте TypeScript в свой проект:
Примечание: вы можете установить TypeScript глобально на свой компьютер, но мне нравится устанавливать его для каждого проекта. Таким образом, я могу точно контролировать, какую версию TypeScript использует каждый проект. Это полезно, если у вас есть проект, к которому вы не прикасались какое-то время; вы можете продолжать использовать старую версию TS в этом проекте, в то время как в новом проекте используется более новая версия.
После его установки вы можете запустить компилятор TypeScript ( tsc), чтобы получить те же ошибки (не беспокойтесь об этих дополнительных флагах, мы скоро поговорим о них подробнее):
Вы можете видеть, что TypeScript в командной строке выделяет те же ошибки кода JavaScript, что и VS Code на скриншоте выше.
Исправление ошибок в нашем коде JavaScript
Давайте посмотрим на нашу первую ошибку.
Свойство qerySelectorне существует по типуDocument
Это может выглядеть довольно ошеломляющим, если вы не привыкли читать ошибки TypeScript, поэтому не паникуйте, если это покажется немного странным! TypeScript обнаружил, что в сети 13мы вызвали метод document.qerySelector. Мы имели в виду, document.querySelectorно ошиблись при наборе. Мы бы узнали об этом, когда попытались запустить наш код в браузере, но TypeScript может сообщить нам об этом раньше.
Следующая часть, в которой он выделяется, lib.dom.d.tsи querySelectorфункция погружается в более сложный код TypeScript, поэтому пока не беспокойтесь об этом, но на высоком уровне TypeScript показывает нам, что он понимает, что существует вызываемый метод querySelector, и подозревает, что у нас может быть хотел этого.
Конкретно я хочу посмотреть на текст did not exist on type ’Document’. В TypeScript (и вообще во всех типизированных языках) элементы имеют так называемый type.
В нашем коде TypeScript видел то, о чем мы говорили document. Это глобальная переменная в браузере, и TypeScript знает об этом и знает, что он имеет тип Document. Этот тип документирует (простите за каламбур!) Все методы, которые мы можем вызывать. Вот почему TypeScript знает, что querySelectorэто метод, а орфографическая ошибка qerySelector- нет.
Мы увидим больше этих типов по мере прохождения следующих руководств по TypeScript, но именно здесь исходит вся мощь TypeScript. Вскоре мы определим наши собственные типы, что означает, что мы действительно можем расширить систему типов, чтобы знать обо всем нашем коде и о том, что мы можем и не можем делать с каким-либо конкретным объектом в нашей кодовой базе.
Теперь обратим внимание на нашу следующую ошибку, которая немного менее очевидна.
Свойство src не существует по типу HTMLElement
Это одна из тех ошибок, при которых иногда приходится смотреть немного выше ошибки, чтобы найти проблему. Мы знаем, что у элемента изображения HTML есть srcатрибут, так почему его нет в TypeScript?
Ошибка здесь в первой строке: когда вы создаете новый элемент изображения, вы должны вызвать document.createElement(’img’)(потому что тег HTML есть , а не ). Как только мы это сделаем, ошибка исчезнет, потому что TypeScript знает, что при вызове document.createElement(’img’)вы возвращаете элемент, у которого есть srcсвойство. И все это зависит от типов.
Когда вы вызываете document.createElement(’div’), возвращаемый объект имеет тип HTMLDivElement. Когда вы вызываете document.createElement(’img’), возвращаемый объект имеет тип HTMLImageElement. HTMLImageElementв нем srcобъявлено свойство, поэтому TypeScript знает, что вы можете вызывать img.src. Но HTMLDivElementэтого не происходит, поэтому TypeScript выдаст ошибку.
В случае document.createElement(’image’), поскольку TypeScript не знает ни о каком элементе HTML с тегом image, он вернет объект типа HTMLElement(общий элемент HTML, не относящийся к одному тегу), у которого также отсутствует srcсвойство.
Как только мы исправим эти две ошибки и повторно запустим TypeScript, вы увидите, что мы ничего не вернули, что свидетельствует об отсутствии ошибок. Если вы настроили свой редактор для отображения ошибок, надеюсь, теперь их нет.
Как настроить TypeScript
Немного больно добавлять // @ts-checkв каждый файл, и когда мы запускаем команду в терминале, нужно добавлять эти дополнительные флаги. TypeScript позволяет вместо этого включить его в проекте JavaScript, создав jsconfig.jsonфайл.
Создайте jsconfig.jsonв корневом каталоге нашего проекта и поместите в него:
Это настраивает компилятор TypeScript (и интеграцию TS вашего редактора) на:
Теперь, когда у нас есть этот файл, вы можете обновить свою инструкцию командной строки следующим образом:
Это запустит компилятор с нашим файлом конфигурации ( -pздесь сокращение от «проект»), поэтому вам больше не нужно передавать все эти флаги при запуске TypeScript.
Работа в строгом режиме
Когда вы вносите изменения в jsconfig.jsonфайл, вам может потребоваться перезапустить редактор, чтобы он принял эти изменения. Так что, если вы не видите тех же ошибок, что и я, попробуйте.
Начнем сначала с последней ошибки и вернемся к остальным:
И давайте посмотрим, как imagesContainerопределяется:
Типы союзов
До включения строгого режима, типа imagesContainerбыл Element, но теперь мы стали на строгом режиме типа imagesContainerявляется Element | null. Оператор |(вертикальная черта) создает типы объединения, которые можно читать как «или», так что здесь imagesContainerтип Elementили null. Когда TypeScript говорит нам Object is possibly ’null’, это именно то, что он говорит нам, и он хочет, чтобы мы убедились, что объект действительно существует, прежде чем мы его используем.
Давайте исправим это, выдав ошибку, если мы не найдем элемент контейнера изображений:
TypeScript теперь счастлив; мы разобрались с этим nullслучаем, выдав ошибку. TypeScript достаточно умен, чтобы понять, что, если наш код не выдаст ошибку в третьей строке в приведенном выше фрагменте, imagesContainerэто не так null, и, следовательно, он должен существовать и иметь тип Element.
Его тип был Element | null, но если бы это было так, nullмы бы выдали ошибку, так что теперь это должно быть Element. Эта функция известна как сужение типов и является очень полезной концепцией, о которой следует знать.
Implicit any
Теперь обратим внимание на оставшиеся две ошибки:
Одним из следствий включения строгого режима является включение вызываемого правила noImplicitAny. По умолчанию, когда TypeScript не знает тип чего-либо, он по умолчанию присваивает ему специальный тип TypeScript с именем any. any- не лучший тип для вашего кода, потому что с ним не связаны никакие правила с точки зрения того, что будет проверять компилятор. Это позволит случиться чему угодно.
Мне нравится представлять это как компилятор, поднимающий руки вверх и говорящий: «Я не могу вам здесь помочь!» Использование anyотключает любую полезную проверку типов для этой конкретной переменной, поэтому я настоятельно рекомендую избегать ее.
Опишите подпись функции с помощью JSDoc
Две приведенные выше ошибки — это TypeScript, который сообщает нам, что мы не сообщили ему, какие типы двух переменных принимает наша функция, и что он возвращает их по умолчанию any. Хорошая новость заключается в том, что предоставление TypeScript этой информации означало переписывание вашего файла в код TypeScript, но TypeScript теперь поддерживает изрядное подмножество синтаксиса JSDoc, что позволяет вам предоставлять информацию о типе в TypeScript через комментарии JavaScript.
Например, вот как мы можем предоставить информацию о типе нашей fetchImagesфункции:
Все комментарии JSDoc должны начинаться с /**(обратите внимание на дополнительную информацию *в начале), и внутри них мы используем специальные теги, начиная с @, для обозначения свойств типа. Здесь мы объявляем два параметра ( @param), а затем заключаем их тип в фигурные скобки (как обычные объекты JavaScript).
Здесь мы проясняем, что searchTermэто stringи perPage- это число. Пока мы на этом, мы также используем, @returnчтобы объявить, что возвращает эта функция. В нашем случае он ничего не возвращает, и тип, который мы используем в TypeScript для объявления этого, есть void.
Давайте теперь перезапустим компилятор и посмотрим, что он говорит:
В этом вся прелесть TypeScript. Предоставляя компилятору дополнительную информацию, теперь он может обнаруживать ошибки в том, как мы вызываем код, которые он не мог раньше. В этом случае, он нашел два вызова, fetchImagesгде у нас есть аргументы в неправильном порядке, и второй, где мы забыли perPageаргумент (ни searchTerm, perPageне являются обязательными параметрами).
Давайте просто удалим эти вызовы, но я надеюсь, что это поможет продемонстрировать мощь компилятора и преимущества предоставления компилятору дополнительной информации о типе.
Объявление типов данных с помощью интерфейса
Несмотря на то, что компилятор не пометил это, у нашего кода все еще есть одна проблема:
Проблема здесь в том, что возвращаемый тип await result.json()- any. Это связано с тем, что, когда вы берете ответ API и конвертируете его в JSON, TypeScript не знает, какие данные там находятся, поэтому по умолчанию используется any. Но поскольку мы знаем, что возвращает API Pexels, мы можем предоставить ему некоторую информацию о типе, используя интерфейсы TypeScript. Они позволяют нам сообщать TypeScript о форме объекта: какие свойства он имеет и какие значения имеют эти свойства.
Давайте объявим интерфейс — опять же, используя синтаксис JSDoc, который представляет данные, возвращаемые API Pexels. Я использовал справочник API Pexels, чтобы выяснить, какие данные возвращаются. В этом случае мы фактически определим два интерфейса: один будет декларировать форму одного photo, возвращаемого API Pexels, а другой — общую форму ответа от API.
Чтобы определить эти интерфейсы с помощью JSDoc, мы используем @typedef, что позволяет нам объявлять более сложные типы. Затем мы используем @propertyдля объявления отдельных свойств в этом интерфейсе. Например, вот тип, который я создаю для человека Photo. Типы всегда должны начинаться с заглавной буквы.
Если вы хотите увидеть полную ссылку на все поддерживаемые функции JSDoc, на сайте TypeScript есть подробный список с примерами.
Этот тип говорит, что любой объект набраны как Photoбудет иметь одно свойство, src, которое само по себе является объектом с тремя строковыми свойствами: medium, largeи thumbnail. Вы заметите, что API Pexels возвращает больше; вам не нужно объявлять каждое свойство объекта, если вы этого не хотите, а только то, что вам нужно. Здесь наше приложение в настоящее время использует только mediumизображение, но я объявил несколько дополнительных размеров, которые нам могут понадобиться в будущем.
Теперь, когда у нас есть этот тип, мы можем объявить тип PexelsSearchResponse, который будет представлять то, что мы получаем от API:
Здесь вы можете увидеть ценность объявления ваших собственных типов; мы объявляем, что этот объект имеет одно свойство, photosа затем объявляем, что его значение является массивом, где каждый элемент имеет тип Photo. Это то, что Arrayобозначает синтаксис: это массив, в котором каждый элемент в массиве имеет тип X. [1, 2, 3]будет Array, например.
Как только мы это сделаем, мы можем использовать @typeкомментарий JSDoc, чтобы сообщить TypeScript, что данные, которые мы получаем, result.json()имеют тип PexelsSearchResponse:
@typeэто не то, к чему нужно стремиться все время. Обычно вы хотите, чтобы компилятор разумно определял тип вещей, а не прямо говорил об этом. Но поскольку result.json()возвращается any, мы можем переопределить это с помощью нашего типа.
Test if everything is working
Чтобы доказать, что это работает, я намеренно сделал ошибку mediumпри ссылке на URL-адрес фотографии:
Если мы снова запустим TypeScript, мы увидим проблему, которую TypeScript не заметил бы, если бы мы не проделали ту работу, которую только что проделали, чтобы объявить интерфейс:
Заключение
TypeScript может многое предложить разработчикам, работающим над сложной кодовой базой. Его способность сокращать цикл обратной связи и показывать ошибки до того, как вам придется перекомпилировать и загружать браузер, действительно ценна. Мы видели, как его можно использовать в любом существующем проекте JavaScript (избегая необходимости переписывать код в.tsфайлы) и насколько легко начать работу.
Надеюсь, вам понравилось это руководство по TypeScript для начинающих. В оставшейся части этой серии руководств из трех частей, которые доступны на SitePoint Premium, мы начнем применять эти знания на практике и покажем, как создать реальное приложение с нуля, используя TypeScript, который в полной мере использует экосистему TypeScript. Это будет охватывать такие вещи, как динамическое рендеринг разметки и использование стороннего API, позволяя пользователям искать фотографии или видео и отмечать их как избранные, а также сохранять эти избранные в локальном хранилище.
Читайте также: