web-dev-qa-db-ja.com

2つのプロジェクト間のプロジェクト間参照

2つの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つのプロジェクト内で機能しますが、他のプロジェクトから表示する方法がわかりません...たぶん今のところ不可能です。

[編集1。]
TestModule.Interface1パターンを使用しようとすると、同じエラーが発生します（別の言い方をすると）。しかし、IntelliSenseは私のInterface1を認識します。

IntelliSense

[編集2。]
他のプロジェクトのファイルを使用できないことに気付きました。正しい参照（/// <reference ...）を追加して、最初のプロジェクトのすべてのファイルをリンクした場合でも。

visual-studioreferencetypescript
28
Nickon

これを行う方法はたくさんあります。

オプション1-プロジェクト参照（TypeScript 3.0 +）

TypeScript 3.0を使用している場合は、プロジェクト参照の使用を確認してください。続きを読む こちら 。

オプション2-ビルドスクリプト

gulp-TypeScript 、 grunt-ts 、または単にバッチスクリプトなどを使用して、ファイルをメインプロジェクトのフォルダーにコピーします。

または、Visual Studioで ビルドイベントを実行 を実行して、ファイルをメインプロジェクトにコピーします。

オプション3-npmパッケージ

Npmを使用する場合、他のプロジェクトのパッケージを作成できます。その後、メインプロジェクトでパッケージを使用できます。 ローカル依存関係の指定 は、これを行うため、またはプライベートリポジトリサーバーである sinopia のようなものを使用することによる良い方法です。使用したことはありませんが、問題なく動作するようです。

オプション4-NuGetパッケージ

nugetパッケージを作成する を調べ、次に ローカルにインストールする を調べます。

オプション5-_--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

ライブラリプロジェクトをリビルドするたびに、変更内容でメインプロジェクトが自動的に更新されます。

23
David Sherret

@dhstoによって提案された解決策は機能しますが、リンクされたフォルダーを使用する別の方法を見つけました。私は この記事で詳しく説明しています を持っています、これはどのように実装できるかです：

これは、参照を保持するフォルダーを作成することで実現できます。これに「_referencesTS」という名前を付けます。このフォルダーには、Test1からのファイルへのすべてのリンクが含まれます。これは個別に行うことができますが、新しいTSファイルごとに行う必要がある場合は非常に面倒になります。ただし、フォルダーをリンクすると、その下にあるすべてのファイルがリンクされます。これは、csprojファイルを編集することで実行できます。

ファイルを編集するには、Test2プロジェクトを右クリックして[Unload Project]をクリックし、次にプロジェクトを右クリックして[Edit Test2.csproj]をクリックします。 <ItemGroup>タグを含む<TypeScriptCompile>に移動し、以下のコードを挿入します。

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

Test1のTSファイルの場所への相対パスを置き換えます。これは、ワイルドカード（*）を使用して、すべてのサブフォルダー（*.tsで指定）内のすべての.tsファイル（\**\で指定）をリンクします）。

これらのフォルダー内のTSファイルはTest2内でリンクされて表示され、TypeScriptの自動参照が可能になります。

注：このアプローチの唯一の欠点は、リンクされたフォルダー内のTest1に新しいファイルを追加するときに、ユーザーがプロジェクトをアンロードしてロードするか、ソリューションを閉じて開いてTest2に表示する必要があることです。

10
Martyn0627

現状に不満を抱いていた私は、この問題をほとんど解決するNuGetパッケージを作成しました。 NuGetパッケージを使用すると、あるプロジェクトから別のプロジェクトへの参照を追加するだけで、誤って間違ったファイルを編集してしまわないようにファイルをコピーし、インテリセンスとデバッグを提供できます。

詳細はReadme.mdに記載されています。または、NuGetパッケージをインストールして実行することもできます（少なくとも使用方法のセクションを読むことをお勧めします）。

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

6
Micah Zoltu

TypedAppプロジェクトへのlibファイルは、ビルド後のイベントに依存するのではなく、リンクファイルとして追加できるというDavid Sherretの回答に追加したいだけです。多くのプロジェクトがある大きなソリューションでビルド後のイベントにいくつか問題があり、リンクファイルは問題なく動作しています。 （評判ポイントが35しかないため、回答にコメントを追加できません）。

4
Allan.C

basaratの答えは、プロジェクト間のTypeScript参照に対する最も信頼できるソリューションであることに最も近いものです。ただし、共有TypeScriptコードを参照プロジェクトのTypeScriptとマージする場合（たとえば、異なるECMAScriptバージョンをターゲットにする必要がある場合など）、ソースマップファイルは共有プロジェクトのディレクトリに解決されないため、デバッグは機能しません（実際、別のプロジェクトで参照されているファイルにブレークポイントを追加すると、Visual Studioがクラッシュすることがよくあります）。

リンクされたファイル（Visual Studioリンクとシンボリックリンク）は、システム（Visual Studio、Chrome、WebStormなど）でのデバッグでは機能しません。リンクされたファイルは、本質的にASP.NETデバッガーには存在しません。他のデバッガ; Visual Studioにのみ存在します。

Visual Studio、Chrome、Firefoxでの確実なコードメンテナンスとデバッグの両方に優れた機能を示しながら、共有コードと参照プロジェクトのコードを組み合わせる機能を維持していることを示すこの質問/回答を参照してください（たとえば、異なるECMAScriptバージョンを対象にする必要があります）： Visual Studio：IIS Expressおよびcross-project参照（ファイルのリンクまたは複製なし））を使用して共有プロジェクトでTypeScriptをデバッグする方法

1
Andre Light

複数のプロジェクト間でコードを共有する必要がある場合は、必要な各プロジェクトにいつでもシンボリックリンクを作成できます。 http://en.wikipedia.org/wiki/Symbolic_link

1
Aebsubis

--outパラメータを使用してコンパイルする場合は、/// <referenceを使用してModule2.tsからModule1.tsを参照するだけです。TypeScriptのコード編成パターンの詳細については、 http://www.youtube .com/watch？v = KDrWLMUY0R0＆hd = 1

ビジュアルスタジオ言語サービスで利用できる（すべて）とは、コンパイル時に実際に利用できるものとは異なります。

1
basarat

Sharedプロジェクトにブレークポイントが設定されている場合、受け入れられた回答はVisual Studioでのデバッグを許可しません。 （せいぜい、デバッガーはコンパイルされたJavaScriptの行で停止しますが、元のTypeScriptでは停止せず、元のプロジェクトの場所でも停止しません。）

共有プロジェクトのプロパティで、[Javascriptの出力を[単一の]ファイルに出力するがチェックされてAllShared.jsに設定されているとします。これにより、AllShared.d.tsファイルも作成されます宣言ファイルを生成するがチェックされており、ソースマップを生成するがチェックされているため、AllShared.js.mapも作成されます。

参照しているプロジェクトは、承認されたソリューションが行う方法でこれらのファイルをコピーまたはリンクしないでください。代わりに：

パート1、参照するプロジェクトで、/typings/tsd.d.tsが存在しない場合は作成し、そのファイルの最後に行///<reference path="../../SharedProject/AllShared.d.ts" />を追加します。これが完了すると（そしてSharedProjectの少なくとも1つの正常なコンパイルが完了すると）、IntellisenseとTypeScriptコンパイラーはInterface1などを表示するはずです（パス/ファイルが存在しない場合、ステートメントの下線に赤い波線が表示される可能性があります。 、ニースです。）

パート2、参照するプロジェクトのindex.htmlで、そのプロジェクトの独自のスクリプトタグの前に行<script src="http://localhost:29944/AllShared.js"></script>を追加します。 localhostパーツは、共有プロジェクトのプロパティ、Webタブ、プロジェクトURLから取得されます。 （「IIS Express」と「ローカルIIS」の両方が機能します。）

これで、参照元のプロジェクトを実行すると、Internet Explorer **がそれぞれの「ウェブサイト」から関連ファイルをリクエストしていることがわかります。 Visual Studioブレークポイントは、SharedProjectまたは参照元プロジェクトのどちらにあるかに関係なくヒットする必要があります。

。このソリューションはgulp/grunt/powershellがなくても機能しますが、Visual StudioのJavaScript出力を1つのファイルに結合は特定の順序でファイルを結合せず、最終的にはコードを破壊します。次に、Gulpなどを追加する必要があります。 <script src="http://localhost:29944...を手動で更新しておくのは適切なオプションではないため、Shared ***の各ファイルにindex.htmlタグを挿入するように参照プロジェクトに追加します。 （共有プロジェクトにGulpを追加して、.jsファイルと.d.tsファイルを単一に連結すると、単純に連結できない.js.mapファイルで問題が発生します。）

** IEとVSはどちらもMicrosoft製品であるため、WebブラウザではなくVSのブレークポイントとデバッガを使用したい場合、IEは実際に機能します。

*** GulpはURLの挿入を好みません。ファイルパスのみです。 index.htmlのような<!-- SharedStuff:js --><!-- endinject -->のHTMLコメントがある場合、これを次のように回避します。

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('./'));
});
0
Ron Newcomb