Typescript для visual studio

Компиляция кода TypeScript (ASP.NET Core)

Область применения:Visual StudioVisual Studio для Mac Visual Studio Code

Вы можете добавить в проекты поддержку TypeScript, используя пакет TypeScript SDK, который доступен по умолчанию в Visual Studio Installer или в виде пакета NuGet. Для проектов, разработанных в Visual Studio 2019 или более поздней версии, мы рекомендуем использовать пакет NuGet TypeScript для повышения переносимости на разных платформах и средах.

Для проектов ASP.NET Core чаще всего пакеты NuGet используются для компиляции TypeScript с помощью .NET Core CLI. Пока файл проекта не будет вручную изменен для импорта целевых объектов сборки из установки TypeScript SDK, пакет NuGet останется единственным способом включения компиляции TypeScript с помощью команд .NET Core CLI, таких как dotnet build и dotnet publish . Кроме того, для интеграции MSBuild с ASP.NET Core и TypeScript следует выбрать пакет NuGet, а не пакет npm.

Добавление поддержки TypeScript с использованием NuGet

Пакет NuGet TypeScript позволяет включить поддержку TypeScript. Когда в проект устанавливается пакет NuGet или TypeScript 3.2 или более новой версии, в редактор загружается соответствующая версия языковой службы TypeScript.

Если среда Visual Studio установлена, файл node.exe, который входит в комплект, в ней будет выбран автоматически. Если у вас не установлена среда Node.js, мы рекомендуем установить версию LTS с веб-сайта Node.js.

1. В Visual Studio откройте проект ASP.NET Core.
2. Выбор в обозревателе решений Щелкните правой кнопкой узел проекта и выберите Управление пакетами NuGet. На вкладке Обзор найдите Microsoft.TypeScript.MSBuild, а затем нажмите кнопку Установить справа, чтобы установить пакет. Visual Studio добавляет пакет NuGet в раздел Зависимости узла в обозревателе решений. Следующая ссылка на пакет добавляется в файл *.csproj.

 all runtime; build; native; contentfiles; analyzers; buildtransitive  

• include указывает компилятору, где искать файлы TypeScript (*.ts).
• Параметр outDir указывает выходную папку для обычных файлов JavaScript, которые преобразуются компилятором TypeScript.
• Параметр sourceMap указывает, нужно ли компилятору создать файлы sourceMap.

В приведенной выше конфигурации представлен пример базовой конфигурации TypeScript. Сведения о других параметрах см. в разделе о файле tsconfig.json.

Построение приложения

1. В проект добавьте файлы TypeScript ( .ts) или TypeScript JSX ( .tsx), а затем добавьте код TypeScript. В качестве простого примера TypeScript используйте следующий код:

let message: string = 'Hello World'; console.log(message); 

Пример использования gulp с запускателем задач для сборки приложения см. в разделе о ASP.NET Core и TypeScript.

Если возникнут проблемы, из-за которых Visual Studio будет использовать для Node.js или стороннего средства не ту версию, возможно, потребуется задать путь для использования в Visual Studio. Выберите Средства>Параметры. В разделе Проекты и решения выберите Управление веб-пакетами>Внешние веб-инструменты.

Выполнение приложения

Нажмите клавишу F5 или кнопку Запуск в верхней части окна.

Сведения о структуре пакета NuGet

Microsoft.TypeScript.MSBuild.nupkg содержит две основные папки:

• Папка build. Эта папка содержит два файла. Оба файла представляют собой точки входа: для основного целевого файла TypeScript и файла .props соответственно.
  1. Microsoft.TypeScript.MSBuild.targets. В этом файле указываются переменные, определяющие платформу среды выполнения, например путь к TypeScript.Tasks.dll, перед импортом Microsoft.TypeScript.targets из папки tools.
  2. Microsoft.TypeScript.MSBuild.props. Этот файл используется для импорта Microsoft.TypeScript.Default.props из папки tools и определения свойств, указывающих на то, что сборка инициирована с помощью NuGet.
• Папка tools. В пакетах версий до 2.3 содержится только папка tsc. На корневом уровне расположены файлы Microsoft.TypeScript.targets и TypeScript.Tasks.dll. В пакетах версии 2.3 и выше на корневом уровне расположены файлы Microsoft.TypeScript.targets и Microsoft.TypeScript.Default.props . Дополнительные сведения об этих файлах см. в разделе о конфигурации MSBuild. Кроме того, в папке содержатся три вложенные папки:
  1. net45. Эта папка содержит библиотеку TypeScript.Tasks.dll и другие библиотеки DLL, от которых она зависит. Если проект создается на платформе Windows, MSBuild использует библиотеки DLL из этой папки.
  2. netstandard1.3. Эта папка содержит другую версию TypeScript.Tasks.dll , которая используется при создании проектов на компьютере с ОС, отличающейся от Windows.
  3. tsc. Эта папка содержит tsc.js , tsserver.js и все файлы зависимостей, которые нужно запускать в качестве скриптов узла.

Примечание Если среда Visual Studio установлена, файл node.exe, который входит в комплект, будет выбран автоматически. В противном случае вам нужно будет установить Node.js на компьютере.

Удаление файлов, импортированных по умолчанию

В старых проектах ASP.NET Core, где используется формат не в стиле SDK, может потребоваться удалить некоторые элементы файла проекта.

Если вы используете пакет NuGet для поддержки MSBuild в проекте, файл проекта не должен импортировать Microsoft.TypeScript.Default.props или Microsoft.TypeScript.targets . Файлы импортируются пакетом NuGet, поэтому их отдельное включение может привести к непредвиденным последствиям.

1. Щелкните проект правой кнопкой мыши и выберите пункт Выгрузить проект.
2. Щелкните проект правой кнопкой мыши и выберите Изменить имя файла проекта> . Откроется файл проекта.
3. Удалите ссылки на Microsoft.TypeScript.Default.props и Microsoft.TypeScript.targets . Удаляемые импорты имеют примерно следующий вид:

Источник

JavaScript and TypeScript in Visual Studio

Applies to: Visual Studio Visual Studio for Mac Visual Studio Code

Visual Studio 2022 provides rich support for JavaScript development, both using JavaScript directly, and also using the TypeScript programming language, which was developed to provide a more productive and enjoyable JavaScript development experience, especially when developing projects at scale. You can write JavaScript or TypeScript code in Visual Studio for many application types and services.

JavaScript language service

The JavaScript experience in Visual Studio 2022 is powered by the same engine that provides TypeScript support. This engine gives you better feature support, richness, and integration immediately out-of-the-box.

The option to restore to the legacy JavaScript language service is no longer available. Users have the new JavaScript language service out-of-the-box. The new language service is solely based on the TypeScript language service, which is powered by static analysis. This service enables us to provide you with better tooling, so your JavaScript code can benefit from richer IntelliSense based on type definitions. The new service is lightweight and consumes less memory than the legacy service, providing you with better performance as your code scales. We also improved performance of the language service to handle larger projects.

TypeScript support

By default, Visual Studio 2022 provides language support for JavaScript and TypeScript files to power IntelliSense without any specific project configuration.

For compiling TypeScript, Visual Studio gives you the flexibility to choose which version of TypeScript to use on a per-project basis.

In MSBuild compilation scenarios such as ASP.NET Core, the TypeScript NuGet package is the recommended method of adding TypeScript compilation support to your project. Visual Studio will give you the option to add this package the first time you add a TypeScript file to your project. This package is also available at any time through the NuGet package manager. When the NuGet package is used, the corresponding language service version will be used for language support in your project. Note: The minimum supported version of this package is 3.6.

Projects configured for npm, such as Node.js projects, can specify their own version of the TypeScript language service by adding the TypeScript npm package. You can specify the version using the npm manager in supported projects. Note: The minimum supported version of this package is 2.1.

The TypeScript SDK has been deprecated in Visual Studio 2022. Existing projects that rely on the SDK should be upgraded to use the NuGet package. For projects that cannot be upgraded immediately, the SDK is still available on the Visual Studio Marketplace and as an optional component in the Visual Studio installer.

For projects developed in Visual Studio 2022, we encourage you to use the TypeScript NuGet or the TypeScript npm package for greater portability across different platforms and environments. For more information, see Compile TypeScript code using NuGet and Compile TypeScript code using tsc.

Project templates

Starting in Visual Studio 2022, there is a new JavaScript/TypeScript project type (.esproj) that allows you to create standalone Angular, React, and Vue projects in Visual Studio. These front-end projects are created using the framework CLI tools you have installed on your local machine, so the version of the template is up to you. To migrate from existing Node.js projects to the new project system, see Migrate Node.js projects.

Within these new projects, you can run JavaScript and TypeScript unit tests, easily add and connect ASP.NET Core API projects and download your npm modules using the npm manager. Check out some of the quickstarts and tutorials to get started. For more information, see Visual Studio tutorials | JavaScript and TypeScript.

A simplified, updated template is available starting in Visual Studio 2022 version 17.5. Compared to the ASP.NET SPA templates available in Visual Studio, the .esproj SPA templates for ASP.NET Core provide better npm dependency management, and better build and publish support.

Visual Studio 2019 provides rich support for JavaScript development, both using JavaScript directly, and also using the TypeScript programming language, which was developed to provide a more productive and enjoyable JavaScript development experience, especially when developing projects at scale. You can write JavaScript or TypeScript code in Visual Studio for many application types and services.

JavaScript Language Service

The JavaScript experience in Visual Studio 2019 is powered by the same engine that provides TypeScript support. This gives you better feature support, richness, and integration immediately out-of-the-box.

The option to restore to the legacy JavaScript language service is no longer available. Users now have the new JavaScript language service out-of-the-box. The new language service is solely based on the TypeScript language service, which is powered by static analysis. This enables us to provide you with better tooling, so your JavaScript code can benefit from richer IntelliSense based on type definitions. The new service is lightweight and consumes less memory than the legacy service, providing you with better performance as your code scales. We also improved performance of the language service to handle larger projects.

TypeScript support

Visual Studio 2019 provides several options for integrating TypeScript compilation into your project:

• The TypeScript NuGet package. When the NuGet package for TypeScript 3.2 or higher is installed into your project, the corresponding version of the TypeScript language service gets loaded in the editor.
• The TypeScript npm package. When the npm package for TypeScript 2.1 or higher is installed into your project, the corresponding version of the TypeScript language service gets loaded in the editor.
• The TypeScript SDK, available by default in the Visual Studio installer, as well as a standalone SDK download from the VS Marketplace.

For projects developed in Visual Studio 2019, we encourage you to use the TypeScript NuGet or the TypeScript npm package for greater portability across different platforms and environments. For more information, see Compile TypeScript code using NuGet and Compile TypeScript code using tsc.

Projects

UWP JavaScript apps are no longer supported in Visual Studio 2019. You cannot create or open JavaScript UWP projects (files with extension .jsproj). You can learn more using our documentation on creating Progressive Web Apps (PWAs) that run well on Windows.

Источник