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

Межпроектные ссылки между двумя проектами

Можно ли сделать ссылку между двумя проектами TypeScript? Предположим, что мы имеем следующую структуру проекта:

Structure

Module1.ts содержит:

module TestModule {
    export interface Interface1 {
    }
}

Module2.ts содержит:

module TestModule {
    export interface Interface2 extends Interface1 {
    }
}

Test1 ссылается на Test2. Я получаю сообщение об ошибке Could not find symbol 'Interface1' в Module2.ts. Он работает в рамках одного проекта, но я не знаю, как сделать его видимым из другого проекта... Возможно, пока это невозможно.

[Изменить 1.]
Когда я пытаюсь использовать шаблон TestModule.Interface1, я получаю ту же ошибку (по-разному). Но IntelliSense видит мой Interface1:

IntelliSense

[Изменить 2.]
Я заметил, что не могу использовать файлы из другого проекта. Даже если у меня есть правильная ссылка (/// <reference ...), добавлены и связаны все файлы в моем первом проекте.

4b9b3361

Ответ 1

Есть много способов сделать это.

Вариант 1 - Сборка script

Используйте что-то вроде gulp-typescript, grunt-ts или просто пакет script, чтобы скопировать файлы в папку в основном проекте.

В качестве альтернативы запустите событие сборки в Visual Studio, которое скопирует файлы в основной проект.

Вариант 2 - пакет npm

Если вы используете npm, вы можете создать пакет для своего другого проекта. Затем вы можете использовать свой пакет в своем основном проекте. Указание локальной зависимости - это хороший способ сделать это или используя что-то вроде sinopia, который является частным сервером репозитория. Я никогда не использовал его, но похоже, что он будет работать хорошо.

Вариант 3 - пакет NuGet

Вы можете посмотреть создание пакета nuget, а затем установить его локально.

Вариант 4 - --declaration --outDir вариант компилятора

Вы можете установить параметр компилятора --outDir или свойство outDir в tsconfig.json с каталогом в другой проект, затем также скомпилируйте его с помощью --declaration, чтобы он также генерировал файлы декларации (.d.ts). Например: --declaration --outDir ../Test1/External.

Оригинальный ответ (с помощью --out)

Вы можете сделать что-то подобное в Visual Studio, если вы щелкните правой кнопкой мыши на проекте библиотеки и щелкните свойства. На вкладке TypeScript Build установите флажок Combine JavaScript output into file и укажите местоположение в своем основном проекте, который вы хотите, чтобы он прошел (пример $(SolutionDir)/TypedApp/External/TypedLibrary.js). Затем также отметьте Generate declaration files, чтобы сгенерировать файл .d.ts.

Setting up project for automated builds

Как только это будет сделано, создайте проект библиотеки, а затем включите .js и .d.ts в свой основной проект. Добавьте файл .js в свой html и укажите .d.ts в своих typescript файлах.

Include files in main project

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

Ответ 2

Решение, предлагаемое @dhsto, работает, но я нашел альтернативу, используя связанные папки. Я подробно описал это в этой статье, вот как это можно реализовать:

Это может быть достигнуто путем создания папки для хранения ваших ссылок, мне нравится называть это "_referencesTS", папка будет содержать все ссылки на файлы из Test1. Это можно сделать индивидуально, но это станет очень громоздким, если это нужно сделать для каждого нового файла TS. Связывание папки, однако, свяжет все файлы под ней, это можно сделать, отредактировав файл csproj.

Чтобы отредактировать файл, щелкните правой кнопкой мыши проект Test2 и нажмите "Unload Project", затем щелкните правой кнопкой мыши проект и нажмите "Edit Test2.csproj". Перейдите к <ItemGroup>, который содержит теги <TypeScriptCompile>, и вставьте следующий код:

<TypeScriptCompile Include="..\Test1\**\*.ts">
   <Link>_referencesTS\%(RecursiveDir)%(FileName)</Link>
</TypeScriptCompile>

Замените относительный путь к местоположению ваших TS файлов в Test1, это использует подстановочный знак (*) для связывания всех файлов .ts(продиктованных *.ts) во всех подпапках (продиктованных \**\)..

Файлы TS в этих папках теперь будут отображаться в Test2, что позволяет автоматически ссылаться на typescript.

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

Ответ 3

Разочарованный положением дел, я написал пакет NuGet, который в основном решает эту проблему. Используя пакет NuGet, вы можете просто добавить ссылку из одного проекта в другой, и он будет выполнять работу по копированию файлов таким образом, чтобы это было безопасно от случайного редактирования неправильного файла и все еще дает intellisense и отладки.

Подробности можно найти в Readme.md, или вы можете просто установить пакет NuGet и запустить (я рекомендую по крайней мере прочитать, как использовать раздел).

https://github.com/Zoltu/BuildTools.TypeScript.FromReferences

Ответ 4

Я просто хочу добавить к ответу Дэвида Шеррета, что файлы lib в проекте TypedApp могут быть добавлены как файлы ссылок, а не в зависимости от событий пост-сборки. У меня возникли проблемы с событиями пост-сборки в больших решениях с большим количеством проектов, и теперь файлы ссылок работают нормально для меня. (Я не могу добавить комментарий к ответу, потому что у меня есть только 35 точек репутации).

Ответ 5

Если вы компилируете параметр --out, вы можете просто ссылаться на Module1.ts из Module2.ts, используя /// <reference Чтобы узнать больше о шаблонах организации кода в TypeScript, см. http://www.youtube.com/watch?v=KDrWLMUY0R0&hd=1

Какие визуальные услуги студийного языка доступны (что есть все) отличается от того, что вы компилируете и на самом деле имеете на время выполнения.

Ответ 6

Если вам нужно разделить код между несколькими проектами, вы всегда можете создать символическую ссылку для каждого проекта, где вам это нужно. http://en.wikipedia.org/wiki/Symbolic_link

Ответ 7

Ответ basarat наиболее близок к тому, чтобы быть самым надежным решением для межпроектных ссылок TypeScript. Однако при объединении общего кода TypeScript с ссылочным проектом TypeScript (важно, например, если вам нужно настраивать разные версии ECMAScript), файл исходной карты не разрешается для общих каталогов проектов, поэтому отладка выиграла ' (на самом деле, Visual Studio часто сбрасывается после добавления точек останова в файлы, упомянутые в другом проекте).

Связанные файлы любого типа (ссылки Visual Studio и символические ссылки) не работают с отладкой в ​​любой системе (Visual Studio, Chrome, WebStorm и т.д.). Связанные файлы по существу не существуют для ASP.NET отладчик или любой другой отладчик; они существуют только в Visual Studio.

Пожалуйста, ознакомьтесь с этим вопросом/ответом, указывающим на то, что отлично поработало как для надежного обслуживания кода, так и для отладки в Visual Studio, Chrome и Firefox, сохраняя при этом возможность комбинировать общий код с кодом проектов ссылок (что важно, например, если вам нужно настроить разные версии ECMAScript): Visual Studio: отладка TypeScript в совместном проекте с использованием IIS Express и кросс-проектных ссылок (без связывания или дублирования файлов)

Ответ 8

Принятый ответ запрещает отладку в Visual Studio, когда точка останова задана в проекте Shared. (В лучшем случае отладчик остановится на строке в скомпилированном javascript, но не в исходном Typescript и, конечно же, не в исходном местоположении проекта.)

В свойствах проекта Shared, скажем, что выведенный Combine Javascript в [один] файл проверен и установлен в AllShared.js, который также создает файл AllShared.d.ts, потому что файлы декларации Generate проверены, а также делает AllShared.js.map, потому что проверяется создание исходных карт.

Проект ссылки не должен копировать или связывать эти файлы так, как это принято в принятом решении. Вместо этого:

Часть 1, в проекте ссылки, создайте /typings/tsd.d.ts, если она еще не существует, и добавьте в конец этого файла строку ///<reference path="../../SharedProject/AllShared.d.ts" />. Как только это будет сделано (и по крайней мере один успешный компилятор SharedProject будет выполнен), компилятор Intellisense и Typescript должен увидеть Interface1 и т.д. (Вероятно, вы получите красную строку squiggly, подчеркивающую оператор, если путь/файл не работает, t существует, что приятно.)

Часть 2, в проекте привязки index.html, добавьте строку <script src="http://localhost:29944/AllShared.js"></script> перед этим тегом проекта script. Часть локального хоста происходит из свойств проекта "Общие", "Веб-вкладка", "URL проекта". (И "IIS Express", и "Local IIS" работают.)

Теперь, когда вы запускаете проект ссылок, вы должны увидеть, что Internet Explorer ** запрашивает соответствующие файлы со своих соответствующих "веб-сайтов". Контрольные точки Visual Studio должны быть удалены независимо от того, находятся ли они в SharedProject или проекте ссылки.


. Хотя это решение работает без gulp/grunt/powershell, вывод Visual Studio Combine Javascript в один файл не склеивает файлы в каком-либо конкретном порядке, и в конечном итоге он сломает ваш код. Затем вам нужно добавить gulp/etc. к проекту привязки для вставки тега <script src="http://localhost:29944... для каждого файла в Shared ***, потому что сохранение index.html обновляется вручную - это плохой вариант. (Добавление Gulp в проект Shared для согласования файлов .js и .d.ts в синглах запускает проблему с файлами .js.map, которые нельзя просто контактировать.)

** IE и VS - оба продукта Microsoft, поэтому IE действительно работает лучше, если вы хотите использовать контрольные точки и отладчик VS вместо веб-браузера.

*** Gulp не нравится вводить URL-адреса, только пути к файлам. Учитывая комментарии HTML в index.html как <!-- SharedStuff:js --><!-- endinject -->, обходите это так:

gulp.task('insert-into-html', [], function () {
    var common = gulp.src(['../SharedProject/**/*.js'], { read: false });
    return gulp.src('./index.html')
            .pipe(inject(common, {
                relative: true,
                name: "SharedStuff",
                transform: function (filepath) {
                    return '<script src="http://localhost:29944/'+filepath+'"></script>';
                }
            }))
            .pipe(gulp.dest('./'));
});