JavaScript и TypeScript в Visual Studio
Область применения:
Visual Studio Visual Studio для Mac 
Visual Studio Code
Visual Studio 2022 предоставляет обширную поддержку для разработки JavaScript, как с помощью прямого использования JavaScript, также и с помощью языка программирования TypeScript, который разработан, чтобы повышать продуктивность и интерес во время разработки на JavaScript, особенно при разработке масштабных проектов. Код JavaScript или TypeScript в Visual Studio можно написать для многих типов приложений и служб.
Языковая служба JavaScript
Интерфейс JavaScript в Visual Studio 2022 обеспечивается тем же обработчиком, что и поддержка TypeScript. Этот обработчик улучшает поддержку компонентов, функциональность и интеграцию без дополнительной настройки.
Функция восстановления устаревшей языковой службы JavaScript более не доступна. Пользователи сразу получают новую готовую языковую службу JavaScript. Новая языковая служба основана исключительно на языковой службе TypeScript, которая базируется на статическом анализе. Эта служба позволяет нам оптимизировать инструментарий, поэтому ваш код на JavaScript может использовать преимущества расширенной поддержки IntelliSense на основе определений типов. Новая служба имеет небольшой размер и использует меньше памяти, чем устаревшие службы, обеспечивая более высокую производительность пользовательского кода по мере его масштабирования. Также мы улучшили производительность языковой службы для обработки более крупных проектов.
Поддержка TypeScript
По умолчанию Visual Studio 2022 предоставляет языковую поддержку для файлов JavaScript и TypeScript, чтобы IntelliSense можно было использовать без определенной конфигурации проекта.
Для компиляции TypeScript Visual Studio предоставляет гибкие возможности выбора версии TypeScript для каждого отдельного проекта.
В сценариях компиляции MSBuild, таких как ASP.NET Core, пакет NuGet TypeScript — это рекомендуемый метод добавления поддержки компиляции TypeScript в проект. Visual Studio позволит добавить этот пакет при первом добавлении файла TypeScript в проект. К этому пакету также можно получить доступ в любое время с помощью диспетчера пакетов NuGet. При использовании пакета NuGet в проекте будет использоваться соответствующая версия языковой службы для поддержки языка. Примечание. Минимальная поддерживаемая версия этого пакета — 3.6.
Проекты, настроенные для npm, например для проектов Node.js, могут указать собственную версию языковой службы TypeScript, добавив пакет npm TypeScript. В поддерживаемых проектах версию можно указать с помощью диспетчера npm. Примечание. Минимальная поддерживаемая версия этого пакета — 2.1.
TypeScript SDK не рекомендуется использовать в Visual Studio 2022. Существующие проекты, основанные на пакете SDK, должны быть обновлены для использования пакета NuGet. Для проектов, которые не получается обновить сразу, пакет SDK по-прежнему доступен в Visual Studio Marketplace и в качестве дополнительного компонента в установщике Visual Studio.
Для проектов, которые разработаны в Visual Studio 2022, рекомендуется использовать пакеты NuGet и npm TypeScript. Они обеспечивают лучшую переносимость между разными средами и платформами. Дополнительные сведения см. в статьях Компиляция кода TypeScript (ASP.NET Core) и Компиляция кода TypeScript (Node.js).
Шаблоны проектов
Начиная с Visual Studio 2022, существует новый тип проекта JavaScript/TypeScript (.esproj), называемый системой проектов JavaScript (JSPS), который позволяет создавать автономные проекты Angular, React и Vue в Visual Studio. Такие интерфейсные проекты создаются с помощью средств CLI платформы, установленных на локальном компьютере, поэтому версию шаблона вы можете выбрать на свое усмотрение. Сведения о миграции из существующих проектов Node.js в новую систему проектов см. в разделе «Миграция проектов Node.js». Сведения о MSBuild для нового типа проекта см. в свойствах MSBuild для JSPS
В этих новых проектах можно выполнять модульные тесты JavaScript и TypeScript, легко добавлять и подключать проекты на основе API ASP.NET Core и скачивать модули npm с помощью диспетчера npm. Чтобы приступить к работе, ознакомьтесь с краткими руководствами и другой документацией. Дополнительные сведения см. в учебниках по Visual Studio | JavaScript и TypeScript.
Упрощенный обновленный шаблон доступен начиная с Visual Studio 2022 версии 17.5. По сравнению с шаблонами SPA ASP.NET, доступными в Visual Studio, esproj SPA-шаблоны для ASP.NET Core обеспечивают лучшее управление зависимостями npm, а также улучшенную поддержку сборки и публикации.
Visual Studio 2019 предоставляет обширную поддержку для разработки JavaScript, как с помощью прямого использования JavaScript, также и с помощью языка программирования TypeScript, который был разработан с целью повышения продуктивности и интереса во время разработки на JavaScript, особенно при разработке масштабных проектов. Код JavaScript или TypeScript в Visual Studio можно написать для многих типов приложений и служб.
Служба языка JavaScript
Опыт работы с JavaScript в Visual Studio 2019 обеспечивается тем же обработчиком, что и поддержка TypeScript. Это позволяет улучшить поддержку компонентов, функциональность и интеграцию сразу в готовом виде.
Функция восстановления устаревшей языковой службы JavaScript более не доступна. Теперь пользователи сразу получают новую языковую службу JavaScript. Новая языковая служба основана исключительно на языковой службе TypeScript, которая базируется на статическом анализе. Это позволяет нам оптимизировать инструментарий, поэтому ваш код на JavaScript может использовать преимущества расширенной поддержки IntelliSense на основе определений типов. Новая служба имеет небольшой размер и использует меньше памяти, чем устаревшие службы, обеспечивая более высокую производительность пользовательского кода по мере его масштабирования. Также мы улучшили производительность языковой службы для обработки более крупных проектов.
Поддержка TypeScript
Visual Studio 2019 предоставляет несколько вариантов для интеграции компиляции TypeScript в проект.
- Пакет NuGet для TypeScript. Когда в проект устанавливается пакет NuGet или TypeScript 3.2 или более новой версии, в редактор загружается соответствующая версия языковой службы TypeScript.
- Пакет npm для TypeScript. Когда в проект устанавливается пакет npm или TypeScript 2.1 или более новой версии, в редактор загружается соответствующая версия языковой службы TypeScript.
- Также как и стандартный SDK, который можно скачать из VS Marketplace, TypeScript SDK доступен в установщике Visual Studio по умолчанию.
Для проектов, которые разработаны в Visual Studio 2019, рекомендуется использовать пакеты TypeScript NuGet и TypeScript npm. Они обеспечивают лучшую портативность в различных средах и платформах. Дополнительные сведения см. в статьях Компиляция кода TypeScript (ASP.NET Core) и Компиляция кода TypeScript (Node.js).
Проекты
Приложения UWP на JavaScript больше не поддерживаются в Visual Studio 2019. Невозможно создать или открыть проекты UWP на JavaScript (файлы с расширением JSPROJ). Дополнительные сведения см. в документации по созданию прогрессивных веб-приложений (PWA), эффективно работающих на Windows.
Сценарии на TypeScript
Сценарий — это код на языке TypeScript, который позволяет реализовать сложную логику работы с объектами системы.
Принципы написания сценариев в ELMA365, описание типов данных, глобальных констант и т. д. приводятся в справке ELMA365 TS SDK.
Сценарии используются в бизнес-процессах и виджетах, подробно об этом можно прочитать в следующих статьях:
- Сценарий — сценарий добавляется в бизнес-процесс при помощи специального блока, из этой статьи вы узнаете, как его настроить.
- Сценарии (вкладка) — в этой статье описывается вкладка редактирования сценариев в бизнес-процессах.
- Шлюзы — данная статья рассказывает о том, как можно использовать сценарии в шлюзах для вычисления значений служебной переменной.
- Виджет «Код» — сценарии можно использовать в виджетах для обработки данных приложений, страниц или взаимодействия с внешними системами.
- Дополнительные параметры — в этой статье вы найдете подробную информацию о том, как задать дополнительные параметры для сценариев, а также сможете ознакомиться с примером их использования. Дополнительные параметры позволяют донастроить процесс или внести изменения в сценарий без перепубликации.
Использование пакетов Azure SDK для JavaScript и TypeScript
Для программного доступа к службам Azure используйте пакеты Azure SDK для JavaScript. Как правило, эти пакеты SDK область с пакетом npm @azure область, опубликованным azure-sdk.
Различия между пакетами SDK и REST API
Используйте следующие сведения, чтобы понять, когда следует использовать тип механизма доступа.
- Пакеты Azure SDK являются предпочтительным способом доступа к службе Azure. Пакеты Azure SDK абстрагируют шаблонный код, требуемый для управления облачными запросами REST платформы Azure, такими как аутентификация, повторные попытки и ведение журнала.
- Интерфейсы REST API Azure — это предпочтительный метод, если вы:
- работаете со службами в предварительной версии, которые не имеют доступа к пакетам Azure SDK; рассматриваете свой код как код в предварительной версии, который будет обновлен после общей доступности службы с наличием SDK пакетов;
- хотите напрямую осуществлять вызовы REST, чтобы весь пакет SDK не использовал один REST API, или хотите получить больше возможностей для управления HTTP-запросами.
Клиентские библиотеки и библиотеки управления Azure
Выпуски пакетов Azure SDK доступны в следующих форматах:
- Пакеты SDK для управления: библиотеки управления позволяют вам подготавливать и администрировать ресурсы Azure через Azure Resource Manager (ARM). Их можно распознать по наличию @azure/arm- в имени пакетов.
- Документация и примеры кода
- Файл README.md в каждом пакете включает соответствующую документацию и примеры.
Установка пакетов npm для Azure
Пакеты Azure SDK бесплатно доступны на сайте NPM. Установите требуемые отдельные пакеты SDK. Каждый пакет SDK предоставляет определения TypeScript.
Для использования клиента и браузера необходимо добавить пакеты Azure SDK в процесс объединения.
Использование примера кода для пакета npm в Azure
Каждый пакет содержит документацию для быстрого начала работы с пакетом. Дополнительные сведения об их использовании можно найти в каждом конкретном пакете NPM.
Предоставление учетных данных для аутентификации
Пакеты Azure SDK требуют предоставления учетных данных для аутентификации на платформе Azure. Классы учетных данных, предоставляемые @azure/identity , предоставляют несколько преимуществ:
- Быстрое подключение.
- Самый безопасный способ.
- Независимость механизма аутентификации от кода. Это позволяет использовать один и тот же код локально и на платформе Azure, хотя учетные данные различаются.
- Предоставление цепочки аутентификации для доступности нескольких механизмов.
Создание клиента пакета SDK и вызов методов
После программного создания учетных данных передайте учетные данные в клиент пакета Azure SDK. Клиенту может потребоваться дополнительная информация, например идентификатор подписки или URL-адрес службы. Эти значения доступны на портале Azure для ресурса.
Список подписок, доступ для чтения которых доступен этим учетным данным.
const < ClientSecretCredential, DefaultAzureCredential, >= require("@azure/identity"); const < SubscriptionClient >= require("@azure/arm-subscriptions"); require("dotenv").config(); let credentials = null; const tenantId = process.env["AZURE_TENANT_ID"]; const clientId = process.env["AZURE_CLIENT_ID"]; const secret = process.env["AZURE_CLIENT_SECRET"]; if (process.env.NODE_ENV && process.env.NODE_ENV === "production") < // production credentials = new DefaultAzureCredential(); >else < // development if (tenantId && clientId && secret) < console.log("development"); credentials = new ClientSecretCredential(tenantId, clientId, secret); >else < credentials = new DefaultAzureCredential(); >> async function listSubscriptions() < try < // use credential to authenticate with Azure SDKs const client = new SubscriptionClient(credentials); // get details of each subscription for await (const item of client.subscriptions.list()) < const subscriptionDetails = await client.subscriptions.get( item.subscriptionId ); /* Each item looks like: < id: '/subscriptions/123456', subscriptionId: '123456', displayName: 'YOUR-SUBSCRIPTION-NAME', state: 'Enabled', subscriptionPolicies: < locationPlacementId: 'Internal_2014-09-01', quotaId: 'Internal_2014-09-01', spendingLimit: 'Off' >, authorizationSource: 'RoleBased' >, */ console.log(subscriptionDetails); > > catch (err) < console.error(JSON.stringify(err)); >> listSubscriptions() .then(() => < console.log("done"); >) .catch((ex) => < console.log(ex); >);Асинхронное разбиение результатов на страницы
Метод пакета SDK может возвращать асинхронный итератор PagedAsyncIterableIterator для поддержки асинхронных результатов. Результаты могут использовать маркеры разбиения на страницы и продолжения для разбиения результирующих наборов.
В следующем примере JavaScript демонстрируется асинхронное разбиение на страницы. Код задает искусственно небольшой размер разбиения на страницы (2) для быстрой визуальной демонстрации процесса при выполнении примера кода в режиме отладки.
const < BlobServiceClient >= require("@azure/storage-blob"); const blobAccountConnectionString = "REPLACE-WITH-YOUR-STORAGE-CONNECTION-STRING"; const blobAccountContainerName = "REPLACE-WITH-YOUR-STORAGE-CONTAINER-NAME"; const pageSize = 2; const list = async () => < console.log(`List`); let continuationToken = ""; let currentPage = 1; let containerClient=null; let currentItem = 1; // Get Blob Container - need to have items in container before running this code const blobServiceClient = BlobServiceClient.fromConnectionString(blobAccountConnectionString); containerClient = blobServiceClient.getContainerClient(blobAccountContainerName); do < // Get Page of Blobs iterator = (continuationToken != "") ? containerClient.listBlobsFlat().byPage(< maxPageSize: pageSize, continuationToken >) : containerClient.listBlobsFlat().byPage(< maxPageSize: pageSize >); page = (await iterator.next()).value; // Display list if (page.segment?.blobItems) < console.log(`\tPage [$] `); for (const blob of page.segment.blobItems) < console.log(`\t\tItem [$Дополнительные сведения о разбиении на страницы и итераторах в Azure:
Длительные операции
Метод пакета SDK может возвратить ответ длительной операции (LRO). Этот ответ включает в себя следующие сведения:
- запрос завершен;
- запрос еще выполняется.
В следующем примере JavaScript демонстрируется, как обеспечить ожидание завершения LRO с запуском .pollUntildone() перед продолжением.
const < BlobServiceClient >= require("@azure/storage-blob"); const blobAccountConnectionString = "REPLACE-WITH-YOUR-STORAGE-CONNECTION-STRING"; const blobAccountContainerName = `test-$`; const files = [ < "url": "https://github.com/Azure/azure-sdk-for-js/blob/main/README.md", "fileName": "README.md" >, < "url": "https://github.com/Azure/azure-sdk-for-js/blob/main/gulpfile.ts", "fileName": "gulpfile.ts" >, < "url": "https://github.com/Azure/azure-sdk-for-js/blob/main/rush.json", "fileName": "rush.json" >, < "url": "https://github.com/Azure/azure-sdk-for-js/blob/main/package.json", "fileName": "package.json" >, < "url": "https://github.com/Azure/azure-sdk-for-js/blob/main/tsdoc.json", "fileName": "tsdoc.json" >, ]; const upload = async() => < // get container client const blobServiceClient = BlobServiceClient.fromConnectionString(blobAccountConnectionString); // get container's directory client const containerClient = blobServiceClient.getContainerClient(blobAccountContainerName); files.forEach(async(file) =>< await ( await containerClient .getBlobClient(file.fileName) .beginCopyFromURL(file.url) ).pollUntilDone(); >) > upload(() => < console.log("done"); >).catch((ex) => console.log(ex) );Дополнительные сведения о длительных операциях в Azure:
Отмена асинхронных операций
Пакет @azure/abort-controller предоставляет классы AbortController и AbortSignal. Используйте AbortController для создания AbortSignal, который затем можно передать операциям пакета Azure SDK для отмены ожидающих заданий. Операции пакета Azure SDK можно:
- прервать на основе вашей логики;
- прервать на основе ограничения по времени выполнения;
- прервать на основе сигнала родительской задачи;
- прервать на основе сигнала родительской задачи или ограничения по времени выполнения.
Подробное ведение журнала из пакета SDK
При использовании пакета Azure SDK вам может потребоваться выполнить отладку приложения.
- Чтобы включить ведение журнала во время сборки, задайте для переменной среды AZURE_LOG_LEVEL значение info .
- Чтобы включить ведение журнала во время выполнения, используйте пакет @azure/loger :
import < setLogLevel >from "@azure/logger"; setLogLevel("info");Объединение
Дополнительные сведения об объединении с помощью пакета Azure SDK:
- Выполнение объединения пакетов Azure SDK
- Примеры объединения
Следующие шаги
- Вывод списка подписок с помощью пакета SDK @azure/arm-subscriptions
- Вывод списка последних операций ресурсов с помощью пакета SDK для @azure/arm-monitor
- Создание виртуальной машины с помощью пакета SDK для @azure/arm-вычислений
- Остановка, запуск, получение состояния виртуальной машины с помощью пакета SDK @azure/arm-compute
Как переписать SDK на TypeScript, обновить платформу и ни о чем не жалеть
У нас новая версия WebSDK – v4. Пока это только public beta версия, но она уже стабильна для большинства повседневных кейсов. Мы старались сохранить обратную совместимость новой версии.
А еще обновилась платформа – v3. Там много всего нового и интересного. Все работает быстрее и веселее. О подробностях ниже.
Как видите, у нас дабл страйк! Под катом – что получилось за 6 месяцев перекрестного дебага, непрерывного улучшения и боли. Спойлер: больше никакого древнего Flash. Только чистый WebRTC + ORTC.
Hовые штуки в SDK
Мы переписали все на TypeScript. Буквально каждую строку и функцию SDK с нуля. Основной причиной стала поддержка. Typescript гораздо проще поддерживать, чем Vanilla JS. С помощью рискованного шага мы сможем предоставлять вам обновления гораздо чаще. К тому же, мы скоро представим новые tsd файлы для вашего любимого языка.
Вес SDK увеличился всего на 12КБ. Такова была цена внедрения TypeScript. Это небольшая проблема, если вы совершаете голосовые и видеозвонки. Если вас смущает объем в 111 КБ, рекомендую использовать async режим загрузки. Вообще, советую всегда пользоваться именно async загрузкой нашего скрипта. Лишние моменты ожидания ваших пользователей расстраивают и нас тоже.
Собираем все с помощью Webpack. Предыдущая версия SDK собиралась при помощи Gulp, sh и божественной помощи. Нам нужен был стабильный автодеплой и простота конфигурирования, автосборка документации, сборка npm модулей, tsd, автоматическое версионирование… Я мог бы продолжать вечно, да и любой сможет докинуть в этот список пару-тройку пунктов из личных DevOps желаний. И так случилось что Webpack может все, что мы хотели. Да еще он работает быстро.
Сделали доступными аудио звонки в/из Microsoft Edge. ORTC вместо WebRTC, отсутствие решений на StackOverflow (Ctrl+C -> Ctrl+V не мог нас спасти), 7 кругов ада поддержки MS, недокументированные ошибки. О боли и страдании одного отдельного программиста с одним отдельным Ежом вы можете почитать в моей предыдущей статье. На то чтобы выковать ежовые рукавицы для нашего SDK и сделать вам удобный API ушла приличная часть цикла разработки. В результате можно говорить с пользователями Edge, они могут говорить с вами. Вскоре в Edge появится VP9 – сможете увидеться.
Можно сделать приоритетным h 264 кодек или установить приоритеты других кодеков. Как правило, мобильные устройства имеют hardware кодирование/декодирование h264 и software кодирование/декодирование VP8. Если позвонить на мобильный с Chrome с приоритетом по умолчанию, будет выбран VP8. Software rendering. Кто играл с ним в игры, сразу знает, что это боль. К сожалению, с браузерами чаще все строго наоборот. Это позволит вам делать энергоэффективные звонки на мобильные приложения с нашим WebSDK или настраивать приоритет кодеков для экзотических железок и кейсов.
Можно включать/выключать видео во время звонка. Это Renegotiation, товарищи! Renegotiation – это повторный обмен возможностями ваших браузеров в момент, когда вы включили/выключили видео. Объясню на Павлах. Допустим Павел А. звонит Павлу Б. голосом. Два Павла счастливо общаются в браузерах. Теперь Павел Б. хочет показать свою новую двухголовую черепаху Павлу А. Без renegotiation надо было бы закончить аудиозвонок и начать видео. А теперь Павлы могут не прерываться. Правда, они никогда не узнают про renegotiation. Павел Б. нажимает кнопку и мощью нашего SDK его видит Павел А.! К тому же один из Павлов может показывать свое видео, а второй – нет. Прямо как в скайпе.
Hold/Unhold сделан средствами WebRTC и работает теперь и в Peer-To-Peer режиме. Hold – это когда вы ставите звонок с на удержание и магическим образом звук и видео не идут. Unhold – это когда вы снимаете звонок с удержания и магическим образом все снова идет. В старой версии SDK тоже был такой функционал, но барьером между потоками звука становился наш сервер. Трафик шел. Теперь трафик не идет. Ваш браузер скажет серверу или другому клиенту о том, что вы временно приостанавливаете обмен и все счастливы. Меньше трафика и дольше жизни батареи.
Фильтры и маски для реализаций ваших идей. Можно взять входящий аудиопоток и сделать голос бурундука. Взять исходящий и отправить голос Дарта. При этом добавив компрессии и митола! Можно взять видеопоток, прогнать его через canvas и нейронную сеть и добавить усы в стиле Пикассо. Решать вам! Даешь свой MSQRD в браузере!
Новые штуки в серверной части
Уменьшилась задержка звука и видео. Мы поменяли схему звонка. RTP трафик теперь ходит через один сервер, а раньше ходил через цепочку в три сервера. Тесты показали сокращение задержки на 180м/с в обе стороны.
Улучшена работа на плохих сетях для Chrome. Добавлена поддержка технологии REMB. Это технология позволяет управлять качеством картинки и звука на слабых каналах. Помогает от заиканий и пропадания звука на слабых сетях. Технология умная, она не будет понижать качество сигнала на хорошем соединении. А если качество соединения скачет, то подстроится.
Теперь можно только в серверном сценарии выбирать, как пойдет звонок P2P/ViaServer. Наша платформа умеет работать в 2 режимах: PeerToPeer и через наш медиа сервер. В случае работы в Peer-To-Peer медиа трафик идет от абонента к абоненту напрямую. Ни мы, ни вы его не увидим и не сможем записать или отправить в телефонную сеть, например. Для серверного сценария все идет через наш сервер со всеми плюсами. Раньше клиентские приложения для этих двух сценариев отличались — нужно было передать флаг X-DirectCall при старте звонка, да еще и в сценарии VoxEngine все правильно обработать. Теперь все проще. Решение принимается в сценарии VoxEngine. При старте звонка вы сможете определить — нужен ли вам серверный звонок или достаточно Peer-To-Peer и правильно соединить абонентов.
Аудио/видео треки теперь синхронизируются в Firefox и Chrome. На стороне облака происходит интеллектуальный выбор контекста синхронизации, расчет задержек на основе RTCP статистики. А браузер согласно контексту синхронизации правильно собирает пары аудио-видео. Мелочь, а приятно — не надо будет смотреть в прошлое, а слушать настоящее.
Боевые потери
Удалено старое Messaging API. Немного спойлеров – мы делаем его лучше, свежее, быстрее и сексуальней. Скоро скоро, когда разрешит тимлид, оно попадет в публичную beta. А пока на его месте временно ничего.
Мы удалили Flash. Не вообще из веба, мы такого не можем, в отличие от Google, который этим активно занимается, а только из нашего SDK. Хотя нашей радости нет предела, но есть и немного грустного в этом. Преданным пользователям Safari и IE придется пользоваться плагином от Temasys для имитации WebRTC. Если ваши пользователи как раз те самые 4.9% Рунета, рекомендую немного подождать, пока они обновятся, или использовать старую версию нашего SDK.
В заключение всему хочу сказать, что мы обновили документацию и открыли gitter канал, где вы можете оперативно получить техническую поддержку по новой версии sdk. Тестируйте его.