Подтвердить что ты не робот

Использование TypeScript в существующем проекте веб-сайта Visual Studio

У меня есть существующий проект Visual Studio, который был настроен как проект "Веб-сайт". Вы можете создавать такие проекты, выбрав "Файл- > Новый веб-сайт". Это другой тип проекта, чем "Проект веб-приложений".

Я хочу добавить в этот проект TypeScript. Однако я не могу понять, как проинструктировать Visual Studio "создавать" мои файлы .ts и генерировать файлы .js. У меня есть плагин VS2012 TypeScript, и я могу создать проект TypeScript, как описанный здесь. Этот проект отлично работает, но это больше похоже на "Проект веб-приложений". Это другой тип проекта, чем "Проект веб-сайта".

Кроме того, когда я создаю файл .ts, внутри этого файла редактор дает мне TypeScript подсветку синтаксиса и intellisense. Но опять же, я не могу понять, как заставить его скомпилировать TypeScript для JavaScript.

Немного помочь?

4b9b3361

Ответ 1

Visual Studio теперь поддерживает "компиляцию при сохранении" для файлов TypeScript. Я использую Visual Studio 2013 Обновление 2, и я могу включить это в проекте веб-сайта, перейдя в Инструменты → Параметры → Текст Редактор → TypeScript → Проект и установите флажок "Автоматически компилировать файлы TypeScript, которые не являются частью проекта". Я не знаю, почему это помечено так, потому что это явно компилирование файлов, которые являются частью моего проекта...

Многие другие ответы на это не применимы к проектам веб-сайтов, потому что вы не можете подключиться к процессу сборки. С проектом веб-сайта нет файла csproj или vbproj, поскольку сборка обрабатывается IIS, а не Visual Studio.

Если вы используете проект веб-сайта и "скомпилировать с сохранением" не подходит для вас, существует только несколько альтернатив:

1) Используйте компилятор TSC командной строки для компиляции кода вручную.

2) Создайте собственный инструмент для ручной компиляции ваших файлов. Вы можете настроить это для использования в Visual Studio.

3) Создайте "компиляцию по требованию".aspx-страницу, которая скомпилирует TypeScript и вернет ее как JavaScript.

4) Используйте TypeScript Скомпилировать проект JavaScript для автоматического использования вашего кода в браузере. Это дает вам "компиляцию по требованию", которая обычно поставляется с проектами веб-сайтов.

Прежде чем "скомпилировать с сохранением" работал в VS, я использовал TypeScript Compile. Теперь я с удовольствием использую "компиляцию при сохранении".

Ответ 2

Это была немного движущаяся цель, но только потому, что команда TypeScript улучшала то, как все это работает. Я попытался охватить как можно больше сценариев, начиная с самого нового и самого старого.

Самое последнее, что это должно теперь работать в последних версиях Visual Studio (в настоящее время v1.4) даже для веб-проектов.

Я взял эти сокращенные примечания из моего гораздо более длинного ответа о добавлении TypeScript к существующему проекту.

VS 2013/0.9.5

Если вы используете расширение Visual Studio для 0.9.5 или выше вместе с Visual Studio 2013, вы должны обнаружить, что он автоматически настроит все, как только вы добавите первый файл TypeScript.

Авто TypeScript -изменение не работает?

Автоматическая конфигурация только добавляет несколько строк - вы можете сделать это вручную:

  <ItemGroup>
    <TypeScriptCompile Include="Scripts\app.ts" />
  </ItemGroup>
  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />

VS 2012/0.9.x

Должна работать следующая конфигурация файла проекта:

  <ItemGroup>
    <TypeScriptCompile Include="app.ts" />
  </ItemGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
  </PropertyGroup>
  <Import Project="$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets')" />

Еще более старая настройка?

Я нашел самый надежный способ добавить TypeScript к существующему проекту - добавить в файл проекта следующее:

<ItemGroup>
    <AvailableItemName Include="TypeScriptCompile" />
 </ItemGroup>
 <ItemGroup>
    <TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
 </ItemGroup>
 <Target Name="BeforeBuild">
    <Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot;  @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" IgnoreExitCode="true" />
 </Target>

Здесь вы можете добавить необязательные флаги - например, --module amd:

    <Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; --module amd  @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" IgnoreExitCode="true" />

Ответ 3

Начиная с версии 0.8.2, выпущенной 21 января 2013 года, плагин VS2012 TypeScript поддерживает компиляцию при сохранении без использования WebEssentials. Перейдите в раздел "Инструменты" > "Параметры" > "Текстовый редактор" > TypeScript > "Проект" и установите флажок "Автоматически компилировать...".

Если вы хотите скомпилировать все ваши .ts файлы в один .js файл как часть процесса сборки (что вам, вероятно, и нужно), убедитесь, что app.ts script имеет <reference> s для всех файлы, которые должны быть включены, и добавьте следующий шаг предварительной сборки в ваш проект:

"C:\Program Files (x86)\Microsoft SDKs\TypeScript\tsc.exe" --out app.js app.ts

(Указание параметра -out указывает tsc включать все файлы, на которые делается ссылка.)

Ответ 4

Поскольку нет файла проекта, вам, возможно, придется вернуться к "ручному" запуску компилятора TypeScript.

Откройте командную строку Visual Studio (Пуск → Программы → Microsoft Visual Studio 20xx → Инструменты Visual Studio → Командная строка разработчика).

Запуск: tsc your_input_file.ts --target ES5

Чтобы предоставить несколько файлов .ts, используйте текстовый файл с параметром @args_file_name.

Когда вы устанете от этого, поместите все это в пакетный файл.

Когда вам надоело использовать пакетный файл, конвертируйте приложение в веб-приложение и измените файл .proj в соответствии с ответом Sohnee.

Ответ 5

Josh, я использую Visual Studio 2012 Express для Интернета, и я понял, что каждый раз, когда вы сохраняете файл .ts, он автоматически генерирует .js.

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

Ответ 6

Для этого, чтобы работать с моей настройкой, у меня установлен флажок "Автоматически компилировать TypeScript файлы, которые не являются частью проекта".

Но этого было недостаточно. Для автоматической компиляции для работы в проекте веб-сайта мне пришлось создать файл tsconfig.json со следующими конфигурациями:

{
"compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "alwaysStrict": true,
    "module": "amd"
},
"compileOnSave": true,
"exclude": [
    "node_modules",
    "wwwroot",
    "packages"
]
}

Значение "compileOnSave": true является ключевым здесь. Это то, что запускает автоматическую компиляцию.

Typescript версия 2.1.5 на Visual Studio 2017

Ответ 7

Я читаю сообщения выше, когда я пытаюсь использовать файлы *.aspx и *.ts в одном проекте VS-2015. Непреднамеренно я нашел простой и понятный рецепт "Как комбинировать *.ASPX и *.TS файлы кода в одном проекте Visual Studio" и я хочу поделиться этим решением для всех. Извините, если это слишком легко.

Для использования *.aspx и *.ts файлов в одном VS-проекте создайте новый проект типа "ASP.NET Web Application". Затем, на следующем шаге, выберите "Пусто" в верхней панели "ASP.NET 4.5.2 Templates" и "Веб-формы" и "Веб-API" внизу "Добавить папки и основные ссылки для:". Я добавляю две фотографии с этими шагами.

Кроме того, у меня есть ошибка script, когда я использую переменные типа JQuery в моем коде TypeScript. Для использования типа JQuery мне нужно добавить три вложенных папки в проект: Сценарии\типизации\JQuery и добавьте файл jquery.d.ts с определениями типов для jQuery. Я думаю, детали легки для поиска в Интернете.

Спасибо за моего друга, который помогает мне найти это решение. первый шаг проекта создания

второй шаг проекта создания

Ответ 8

Проверьте, связаны ли ваши файлы .ts в свойствах с TypeScriptCompiler.

Имейте в виду, что открытие файла .ts в VS в так называемом виртуальном проекте не совпадает с ссылкой на файл в веб-проекте VS. Первый из них не позволит вам установить на нем действие сборки. Пока другой будет.

PS. Получите надстройку надстройки Web Essentials VS, чтобы получить преобразования в файле save, texteditor ts/js split и встроенный минимизатор.

Изменить. Да, я не заметил, что в начале проекта нет таких действий по сборке с другими проектами. Но, эй, я толкнул Sohne в правильное направление.