Использование TypeScript в существующем проекте веб-сайта Visual Studio
У меня есть существующий проект Visual Studio, который был настроен как проект "Веб-сайт". Вы можете создавать такие проекты, выбрав "Файл- > Новый веб-сайт". Это другой тип проекта, чем "Проект веб-приложений".
Я хочу добавить в этот проект TypeScript. Однако я не могу понять, как проинструктировать Visual Studio "создавать" мои файлы .ts и генерировать файлы .js. У меня есть плагин VS2012 TypeScript, и я могу создать проект TypeScript, как описанный здесь. Этот проект отлично работает, но это больше похоже на "Проект веб-приложений". Это другой тип проекта, чем "Проект веб-сайта".
Кроме того, когда я создаю файл .ts, внутри этого файла редактор дает мне TypeScript подсветку синтаксиса и intellisense. Но опять же, я не могу понять, как заставить его скомпилировать TypeScript для JavaScript.
Немного помочь?
Ответы
Ответ 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=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc" @(TypeScriptCompile ->'"%(fullpath)"', ' ')" IgnoreExitCode="true" />
</Target>
Здесь вы можете добавить необязательные флаги - например, --module amd
:
<Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc" --module amd @(TypeScriptCompile ->'"%(fullpath)"', ' ')" 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 в правильное направление.