Базовый курс npm

Минусы TypeScript

Разработчики любят этот язык, а некоторые крупные проекты уже переходят на него. Например, популярный фреймворк Angular.JS. Но этого всё равно недостаточно, чтобы он стал таким же востребованным, как JavaScript. Это связано с тем, что разработка веб-приложения на TypeScript стоит дороже и отнимает больше времени.

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

Отладка локального приложения Node.js

Кроме того что в Visual Studio Code можно запустить приложение и взаимодействовать с ним через консоль, вы также можете задавать точки останова непосредственно в коде. Например, нажмите CTRLP , чтобы открыть средство выбора файлов. Когда появится средство выбора файлов, введите и выберите файл .

Установите точку останова на строке 28, представляющей маршрут Express (вызывается, когда приложение пытается добавить запись из списка задач). Чтобы задать точку останова, щелкните область слева от номера строки в редакторе, как показано на следующем рисунке.

Примечание

Помимо стандартных точек останова, средство Visual Studio Code поддерживает условные точки останова, которые позволяют указать время остановки приложения. Чтобы задать условную точку останова, щелкните правой кнопкой мыши область слева от строки, для которой необходимо приостановить выполнение, выберите команду добавить условную точку остановаи укажите выражение JavaScript (например, ) или число выполнений, определяющее условие, при котором необходимо приостановить выполнение.

Установив точку останова, вернитесь к выполняемому приложению и добавьте запись из списка задач. Добавление такой записи немедленно останавливает выполнение приложения на строке 28, где вы задали точку останова:

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

Выполнение локального приложения Node.js

Теперь, когда вы познакомились с кодом, пришло время запустить приложение. Чтобы запустить приложение из Visual Studio Code, нажмите клавишу F5. При запуске кода с помощью F5 (режим отладки) Visual Studio Code запускает приложение и показывает окно консоли отладки, отображающее StdOut для приложения.

Кроме того, консоль отладки подключается к только что запущенному приложению, чтобы вы могли вводить выражения JavaScript, которые будут обрабатываться в приложении. В этой консоли также есть функция автоматического заполнения. Чтобы увидеть это поведение, введите в консоли :

Вы смогли запустить приложение нажатием клавиши F5, так как открытый сейчас файл является файлом JavaScript (server.js). Поэтому Visual Studio Code предполагает, что проект является приложением Node.js. Закройте все файлы JavaScript в Visual Studio Code и нажмите клавишу F5. В Visual Studio Code появится запрос на выбор среды:

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

Пакеты в Node.js

Вкратце, пакетом в Node.js называется один или несколько JavaScript-файлов, представляющих собой какую-то библиотеку или инструмент.

Файл package.json

Файл package.json содержит в себе информацию о вашем приложении: название, версия, зависимости и тому подобное. Любая директория, в которой есть этот файл, интерпретируется как Node.js-пакет, даже если вы не собираетесь публиковать его.

Способ использования файла package.json зависит от того, собираетесь ли вы скачивать пакет или публиковать его.

Скачивание пакетов

Если вы хотите скачать пакет вручную, вам необязательно использовать для этого package.json. Вы можете выполнить в терминале команду npm с названием нужного пакета в качестве аргумента команды, и пакет будет автоматически скачан в текущую директорию. Например:

$ npm install canvas-chart

Также для скачивания пакетов вы можете использовать package.json. Создайте в директории вашего проекта файл package.json, и добавьте в него следующий код (мы не указываем название нашего пакета и версию, т. к. мы не собираемся его публиковать; мы указываем название и версию пакетов для загрузки):

{
  "devDependencies": {
    "canvas-chart": "~1.3.0"
  }
}

Затем сохраните файл и выполните в терминале команду .

Если вы хотите использовать в своём проекте множество пакетов, то лучше указать их package.json вместо того, чтобы каждый раз скачивать их через терминал.

Если вы используете package.json для скачивания пакетов, то получается, что вы создаёте пакет для скачивания пакетов. Я знаю, что это странно, но это работает.

Если какой-либо пакет имеет зависимости, то npm найдёт их через package.json загружаемого пакета и скачает их. В нашем случае у пакета canvas-chart тоже есть файл package.json с прописанными в нём зависимостями.

Публикация пакета

Чтобы опубликовать пакет, вам потребуется собрать все исходные коды и файл package.json в одной директории. В package.json должны быть указаны название, версия и зависимости пакета. Например:

{
  "name": "canvas-project",
  "version": "0.1.0",
  "devDependencies": {
    "canvas-chart": "~1.3.0"
  }

Посмотрев на этот код, мы можем сказать, что пакет «canvas-project» зависит от пакета «canvas-chart». Опубликовать пакет можно с помощью комадны .

Использование пакета в качестве исполняемого файла

Когда npm скачивает пакет, он ищет свойство «bin» в файле package.json. Если он находит это свойство, то он конвертирует этот пакет в исполняемый файл и размещает его в указанной директории.

Например, команда ниже загружает grunt-cli в текущую директорию и конвертирует исходники в исполняемый файл, который затем помещается в папку со всеми исполняемыми файлами. Вследствие этого мы сможем вызвать команду grunt-cli.

$ npm install grunt-cli

Теперь вы знаете, что такое пакет и как он может зависеть от других пакетов. Также вы узнали, как npm работает с пакетами. Давайте перейдём от теории к практике и установим Grunt.

Добавление поддержки TypeScript для сторонней библиотеки

Следуйте инструкциям в разделе по , чтобы добавить файл в проект. В результате в проект будет добавлена поддержка npm.

Observação

Для установки клиентских файлов JavaScript и CSS в проектах ASP.NET Core вместо npm можно также использовать диспетчер библиотек или yarn.
В этом примере в проект добавляется файл определения TypeScript для jQuery. Включите в файл package.json следующий код.

В результате будет добавлена поддержка TypeScript для jQuery. Сама библиотека jQuery уже включена в шаблон проекта MVC (находится в папке wwwroot/lib в обозревателе решений). Если вы используете другой шаблон, может потребоваться также включить пакет jquery npm.
Если пакет в обозревателе решений не установлен, щелкните правой кнопкой мыши узел npm и выберите пункт Восстановить пакеты.

Observação

В некоторых сценариях в обозревателе решений может быть указано, что пакет npm не синхронизирован с файлом package.json из-за известной проблемы, описанной здесь. Например, при установке пакет может отображаться как неустановленный. В большинстве случаев обозреватель решений можно обновить, удалив файл package.json, перезапустив Visual Studio и повторно добавив файл package.json, как описано выше в этой статье.
В обозревателе решений щелкните папку скриптов правой кнопкой мыши и выберите пункты Добавить > Новый элемент.
Выберите Файл TypeScript, введите library.ts и щелкните Добавить.
Добавьте в файл library.ts следующий код.

Для простоты этот код отображает сообщение с помощью jQuery и оповещения.

Добавив определения типов TypeScript для jQuery, вы получаете поддержку IntelliSense для объектов jQuery при вводе «.» после объекта jQuery, как показано ниже.
В файле _Layout.cshtml обновите ссылки на скрипты так, чтобы они включали .
Добавьте следующий HTML-код в конец файла Index.cshtml.
Чтобы запустить приложение, нажмите клавишу F5 (Отладка > Начать отладку).

Приложение откроется в браузере.

Нажмите кнопку ОК в оповещении, чтобы увидеть обновленную страницу со строкой Версия jQuery: 3.3.1! .

Первое приложение на TypeScript в Visual Studio

Последнее обновление: 09.05.2021

Среда разработки Visual Studio имеет встроенные возможности по созданию проектов с использованием TypeScript. Итак, создадим первое приложение на TypeScript в Visual Studio.
Прежде всего нам необходимо с помощью установщика Visual Studio установить соответствующий компонент. Данный компонент называется Разработка Node.js:

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

Эти проекты позволяют использовать TypeScript в различных ситуациях — в связке с Node.js, Vue и т.д. В данном случае выберем самый простой
тип проекта, который можно использовать для изучения TS — Blank Node.js Console Application.

После выбора данного типа проекта дадим ему какое-нибудь имя, например, HelloApp и укажем ему расположение:

В итоге Visual Studio создаст следующий проект:

Проект по умолчанию имеет следующие файлы:

app.ts: файл с кодом на TypeScript
package.json: файл с определением пакетов и прочей конфигурации для Node.js
tsconfig.json: файл конфигурации TypeScript

Кроме того, в узле npm/dev можно увидеть применяемые для разработки пакеты npm — @types/node и
typescript.

Ключевым элементом здесь является файл app.ts, который выполняется при запуске приложения. Изменим его код следующим образом:

class User{
    name : string;
    constructor(_name:string){
        
		this.name = _name;
    }
}
const tom : User = new User("Tom");
console.log("Hello ", tom.name);

Как и в прошлой теме, здесь определяется класс User, создается объект этого класса, и данные объекта выводятся на консоль.

Теперь перейдем к запуску проекта. Однако разработка в Visual Studio имеет ряд тонкостей. Прежде всего при обычном запуске консоль запуститься и захлопнется
быстрее, чем мы там сможем что-то увидеть. Чтобы запущенная консоль не схлопывалась, перейдем в Visual Studio к пункту меню Tools -> Options

Далее в меню окна опций найдем пункт Node.js Tools/span>. Для этого пункта предусмотрены три опции — отметим все эти опции:

Запустим проект на выполнение с помощью комбинации клавиш Ctrl + F5 (то есть запуск без отладки), и перед нами откроется следующая консоль:

Другая тонкость заключается в том, что по умлчанию кодировка файла app.ts может отличаться от UTF-8, из-за этого могут возникнуть проблемы с выводом
кириллических символов. В этом случае мы можем в Visual Studio перейти к пункту меню File -> Save As. Далее в выпадающем меню у кнопки
Save выбрать пункт Save with Encoding…:

Затем в поле Encoding укажем кодировку .

НазадВперед

Добавление кода

Выбор в обозревателе решений Щелкните правой кнопкой узел проекта и выберите Управление пакетами NuGet. На вкладке Обзор найдите Microsoft.TypeScript.MSBuild, а затем нажмите кнопку Установить справа, чтобы установить пакет.

Visual Studio добавляет пакет NuGet в раздел Зависимости узла в обозревателе решений.
Щелкните правой кнопкой мыши узел проекта и выберите Добавить > Новый элемент. Выберите Файл конфигурации TypeScript JSON, а затем нажмите кнопку Добавить.

Visual Studio добавит файл tsconfig.json в корневую папку проекта. Этот файл можно использовать для настройки параметров компилятора TypeScript.
Откройте tsconfig.json и замените код по умолчанию следующим кодом.

Параметр outDir указывает выходную папку для обычных файлов JavaScript, которые преобразуются компилятором TypeScript.

Эта конфигурация содержит основные сведения об использовании TypeScript. В других сценариях, например при использовании gulp или веб-пакета, вместо пути wwwroot/js может потребоваться другое промежуточное расположение для преобразованных файлов JavaScript в зависимости от средств и настроек конфигурации.
В обозревателе решений щелкните правой кнопкой мыши узел проекта и выберите Добавить > Новая папка. Для новой папки используйте имя scripts.
Щелкните правой кнопкой мыши папку scripts и выберите Добавить > Новый элемент. Выберите Файл TypeScript, введите app.ts в качестве имени файла, а затем нажмите кнопку Добавить.

Visual Studio добавляет файл app.ts в папку scripts.
Откройте файл app.ts и добавьте следующий код TypeScript.

Visual Studio обеспечивает поддержку IntelliSense для кода TypeScript.

Чтобы проверить это, удалите из функции , а затем повторно введите «.», и вы увидите IntelliSense.

Выберите , чтобы добавить последнее имя обратно в код.
Откройте папку Views/Home, а затем файл Index.cshtml.
Добавьте следующий HTML-код в конец файла.
Откройте папку Views/Shared, а затем файл _Layout.cshtml.
Добавьте следующую ссылку на скрипт перед вызовом :

Настраиваем то, как VSCode форматирует TypeScript

Стандартные настройки VSCode очень хорошие и вполне подходящие для работы с кодом. Но разработчики — ребята творческие и любят добавлять что-то свое к тому, как форматируется их код. Для этого предусмотрены параметры настройки.

В окне настроек вводим , после чего появляются 24 параметра форматирования.

Они дают возможность добавлять пробел после открывающей и до закрывающей квадратной скобки, добавлять открывающие скобки в новых строчках для функций. А также выбирать, как быть с точками с запятой (игнорировать их, добавлять недостающие или удалять их всех автоматически).

Этот список параметров поможет настроить VSCode именно так, как вам надо. Закончив с настройкой, запустите их, выбрав Format Document («Форматировать документ») в палитре команд.

Как обновить Node.js на Windows, Linux и Mac — GitJournal

Этим вопросом задаются многие новички. Они не знают правильного и эффективного способа, и именно для них наш сегодняшний материал. Стоит отметить, что вариантов, как обновить Node.js достаточно много. Я постараюсь рассмотреть каждый из них в отдельности, включая, кстати, операционные системы, на которых будут производиться нужные действия.

Как обновить Node.js на Windows

Самым простым и очевидным способом здесь будет использование готового Bash-скрипта для Windows. С его помощью можно не только установить актуальную версию Node.js, но и произвести другие, не менее важные операции. Например, вы можете установить сразу несколько версий Node.js, и переключать их в зависимости от своих потребностей. Реализуется это через специальные команды:

nvm list
 * 4.6.9
 0.17.0
 
 node -v
 v4.6.9
 
 nvm use 0.17.0
 Now using node v0.17.0
 
 node -v
 v0.17.0

Само обновление же можно воспроизвести и с помощью такой последовательности действий:

Очищаем кэш NPM:

npm cache clean -f

Устанавливаем менеджер версий Node.js n:

npm install -g n

Выбираем нужную версию Node.js:

1. Стабильная версия

n stable

2. Последняя версия

n latest

3. Установка определенной версии

n 0.9.17

4. Удаление определенной версии

n rm 0.9.17

или

n - 0.8.14

Помимо всего прочего, вы можете загрузить актуальную версию Node.js на официальном ресурсе Node.js. Там доступны установочные пакеты MSI, архивы zip и tar.gz, также версии для Linux и Mac.

Другие способы установки и обновления Node.js на Windows

В 2017 году на разных ресурсах описывают еще один, более актуальный способ, который был рекомендован одним из зарубежных «гуру» в своем блоге. Чтобы обновить Node.js нам нужно воспользоваться таким алгоритмом:

Узнаем какую версию Node мы используем:

node --version

Просмотрим доступные для установки версии, а также используемую:

nvm ls

Выведем список доступных версий:

nvm ls available

Установим нужную версию (предположительно 1.1.1):

nvm install 1.1.1

Для включения более старой версии используем команду:

nvm use 0.1

Также вы можете использовать этот, самый простой, по моему мнению, способ:

1. Запускаем cmd от имени администратора

2. Последовательно выполняем две команды:

npm install -g npm-windows-upgrade
 
 npm-windows-upgrade

Данный способ рекомендован разработчиками npm, поэтому вам стоит обратить внимание на него

Как обновить Node.js на Linux

Как и в случае с Windows, здесь мы будем использовать менеджер npm. Здесь он доступен по другому адресу на GitHub. Большая часть команд совпадает с вышеописанными, поэтому вам следует лишь повторить их, предварительно установив NPM на свою версию Linux.

Кстати говоря, если вы используете Arch Linux (или производные дистрибутивы), обновление для Node.js будет установлено автоматически при следующем апгрейде системы.

Как обновить Node.js на Mac

И снова здесь актуален способ с NPM, вы можете использовать абсолютно те же команды, что и для Windows с Linux. Однако сейчас мы рассмотрим альтернативной вариант, подразумевающий работу с менеджером пакетов Homebrew.

После установки вам достаточно будет выполнить одну единственную команду:

$ brew upgrade node

Готово! Node.js обновлена, а вы прекрасны.

Какой бы способ вы не выбрали (а я настоятельно рекомендую прочитать и ознакомиться с каждым из них), в большинстве случаев обновление должно пройти успешно. С помощью менеджера пакетов npm можно управлять версия Node.js на Windows, Linux и MacOS. Я не думаю, что у вас возникнут проблемы с этим.

Hiding derived JavaScript files

When you are working with TypeScript, you often don’t want to see generated JavaScript files in the File Explorer or in Search results. VS Code offers filtering capabilities with a workspace setting and you can easily create an expression to hide those derived files:

This pattern will match on any JavaScript file () but only if a sibling TypeScript file with the same name is present. The File Explorer will no longer show derived resources for JavaScript if they are compiled to the same location.

Add the setting with a filter in the workspace file, located in the folder at the root of the workspace. You can open the workspace via the Preferences: Open Workspace Settings (JSON) command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)).

To exclude JavaScript files generated from both and source files, use this expression:

This is a bit of a trick. The search glob pattern is used as a key. The settings above use two different glob patterns to provide two unique keys but the search will still match the same files.

Что такое TypeScript

TypeScript — это язык программирования, в котором исправлены многие недостатки JavaScript. Код на TypeScript выглядит почти так же, как и код на JS, и, если у вас есть опыт frontend-разработки, изучить TypeScript достаточно просто. Особенно учитывая, что вы можете писать JS-код прямо в TS-скриптах.

Код на TypeScript компилируется в JS и подходит для разработки любых проектов под любые браузеры — тем более что можно выбрать версию JS, в которую будет компилироваться код.

TypeScript — проект с открытым исходным кодом, поэтому он очень быстро развивается. Многое, что появляется в TS, позже переходит и в JavaScript: например, let и const, стрелочные функции и так далее.

Давайте разберём два главных преимущества TS перед JS.

Строгая типизация

Многие проблемы в JavaScript появляются из-за динамической типизации и в целом странного поведения типов данных:

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

Улучшенное ООП

И в JS, и в TS есть поддержка объектно-ориентированного программирования: классы, объекты, наследование. Однако TypeScript шагнул чуть дальше и использует больше возможностей ОПП. В том числе, например, интерфейсы:

Другой большой плюс — модификаторы доступа. Их в TypeScript три: public, private и protected. Вот пример их использования:

Также есть и другие возможности:

определение полей в конструкторе;
преобразование типов;
абстрактные классы;
обобщение и так далее.

Установка TypeScript

Чтобы использовать TypeScript, установите сначала Node.JS. Как это сделать, можете прочитать в нашей статье. После этого введите в консоли команду:

npm install -g typescript

Теперь создайте в папке со скриптами файл с расширением .ts — в нём мы будем писать код. Для компиляции кода пригодится команда tsc. Чтобы скомпилировать файл app.ts, введите команду:

tsc app.ts

Если всё пройдёт успешно, то в папке появится файл app.js, который и подключим к странице.

Также можно составить конфиг в файле tsconfig.json, чтобы максимально упростить компиляцию.

В compilerOptions хранятся все параметры для компилятора:

target — стандарт JS, в который компилируется код. Здесь указан ECMAScript 5, потому что он поддерживается всеми современными браузерами;
removeComments — параметр определяет, нужно ли удалять комментарии;
outFile — файл, в который сохраняется JS-код.

Шаг 2 — Установка зависимостей

Следующий шаг после инициализации базового проекта npm — установить зависимости, требующиеся для запуска TypeScript.

Запустите следующие команды из каталога вашего проекта для установки зависимостей:

Флаг — сокращенное обозначение опции: . Более подробную информацию об этом флаге можно найти в документации npmjs.

Пришло время установить платформу Express:

Вторая команда устанавливает типы Express для поддержки TypeScript. Типы в TypeScript — это файлы, которые обычно имеют расширение . Файлы используются для предоставления типовой информации об API, в данном случае структуры Express.

Этот пакет требуется, потому что TypeScript и Express являются независимыми пакетами. Без пакета у TypeScript нет способа узнавать типы классов Express.

Настройка среды

Есть несколько способов как работать с TypeScript. Сам TS (сокращенно от TypeScript) это препроцессор поэтому мы должны поставить какую-нибудь среду для работы с ним.

Самый простой способ «поиграться с typescript» — это перейти на сайтwww.typescriptlang.org/play/

3. Способ третий можно использовать любой редактор кода. Обычно редакторы проще IDE и весят меньше, да и почти не нагружают вашу систему, поэтому редакторы иногда использовать удобнее. Я рекомендую использовать еще один мощный и бесплатный продукт опять же от Microsoft, который называется visual studio code. Данный редактор кроссплатформенный и доступен как для мак так и для линукс. Хорошо, что Бил Гейтс ушел на пенсию, друзья. Это побудило MS изменить политику в опенсорсную сторону. Ссылка для скачивания:https://code.visualstudio.com/ также найдете под видео. Установите visual studio code как обычно.

После установки откройте редактор visual studio code и перейдите во вкладку File-> open folder. В открывшемся диалоговом окне выберите расположение будущей папки и создайте её. Например, с именем “Test”, после чего нажмите ок.

В обозревателе решения наведите на папку Test и нажмите на иконку добавить файл.

Добавьте два файла index.html и App.ts (app это сокращение от слова application)

Давайте сделаем красивую тему для файлов. (Внимание — это пункт вы можете пропустить.)

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

Для этого нажмите сочетание клавиш shift + ctrl + p и напечатайте “icon”

Обратите внимание из списка настроек мы видим надпись «Preferences: File Icon Theme»

Выберите этот пункт и нажмите “enter”. Появится еще один список где вы можете видеть доступные темы для файлов. Я люблю тему “Seti (Visual Studio Code)” – минимально и симпатично. Выберите её и нажмите “enter”.

Обратите внимание как преобразовались значки, стало намного интереснее, теперь видны цветные обозначения типов. Если темы из списка Вам не нравятся, то вы можете выбрать любую доступную тему, сделанную сообществом

Другой способ установить тему, более консервативный. Нажмите на File-> References -> settings

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

Выводы

Мы показали вам три разных способа установки Node.js и npm на ваш сервер Ubuntu 20.04. Выбор метода зависит от ваших требований и предпочтений. Несмотря на то, что установить упакованную версию из репозитория Ubuntu или NodeSource проще, метод nvm дает вам больше гибкости для добавления и удаления различных версий Node.js для каждого пользователя.

Если вы хотите использовать Yarn для управления зависимостями вашего приложения, ознакомьтесь с нашим руководством о том, как установить и использовать yarn в Ubuntu 20.04 .

Не стесняйтесь оставлять комментарии, если у вас есть вопросы.