web-dev-qa-db-ja.com

VSCodeのTypeScriptファイルの絶対モジュールパス解決

TypeScriptモジュールの絶対パスを解決するようVSCodeを説得することはできないようです。相対パスは機能しますが、絶対パスは機能しません。 VSCodeで./srcフォルダーからのモジュールパスを解決したいと思います。

// this works when source file is in /src/here/there/file.ts
// and importing an interface in /src/api/interfaces.ts
import { Interface } from '../../api/interfaces';

// this doesn't work
import { Interface } from 'api/interfaces';
import { Interface } from '/api/interfaces';
import { Interface } from 'src/api/interfaces';
import { Interface } from '/src/api/interfaces';

// this works but is of course not supposed to be used
import { Interface } from 'c:/..../src/api/interfaces';

もちろん、最後の1つは、各開発者のプロジェクトパスが異なる可能性が高いためカウントされません。しかし、システム変数%ProjectXRoot%をすべて設定したとしても、コードでこの変数を使用することはできません。 VSCodeはそのようなモジュールパスを解決しません。私はもう試した。

// won't work
import { Interface } from '%ProjectXRoot%/api/interfaces';

現在インストールされているバージョン
•TypeScript：1.8.10
•VSCode：1.1.1

質問

VSCodeを何らかの方法で絶対モジュールパスを解決するように構成しようとしましたが、そうすることはできません。 2つの異なる場所にbaseUrlを追加してtsconfig.json（プロジェクトルート内）を構成しようとしました。

{
    ...
    "compilerOptions": {
        "baseUrl": "./src", // doesn't work
        ...
    },
    "baseUrl": "./src", // doesn't work either
    ...
}

src、./src、および./src/のような値を試しましたが、いずれの設定場所でも機能しません。

VSCodeをどのように構成するかは、特定のフォルダーからの絶対モジュールパスを解決しますか？

それが不可能な場合は、少なくともプロジェクトルートからの絶対パスを解決することをお勧めします。 VSCodeがそれをどのように決定するのか分かりませんか？ フォルダを開くの場所ですか、または。vscodeのフォルダの場所ですか？わからない。しかし、それでも絶対パスの実行可能なソリューションです。 VSに似た~を使用しようとしましたが、どちらも使用できませんでした。

編集 （未解決）

@ steinso が彼の答えで指摘しているように、/、./、または../で始まるすべてのモジュールは相対的と見なされます。特に、最初のものは、プロジェクトのルート相対パスであると通常考えているため、私を完全に驚かせました。しかし、この事実は、基本的にmain questionが次のようになることを意味します：絶対パスとしてモジュールインポートを提供するにはどうすればよいですか （いくつかのprojectルートフォルダーパスから） まったく？通常、スラッシュでパスを開始することは絶対を意味しますが、この場合はそうではありません。

コンパイラオプションmoduleResolutionをclassicに設定した場合でも（モジュールの解像度がnode_modulesフォルダーを調べることはありません）、上記のインポートの2番目のセットは実際にはall workMicrosoftのリンクされたドキュメントによる。しかし、何らかの理由で、VSCodeに赤い波線が表示され、コンパイル中にエラーが発生します。

では、特定のプロジェクトモジュールをインポートするには、正確な相対パスを指定せずに、独自のプロジェクト相対パスを指定するだけでよいのでしょうか。

moduletypescriptvisual-studio-code
28
Robert Koritnik

VSCodeを使用してTypeScriptでインポートからの絶対パスを使用できるようにするには、TypeScriptの次のバージョン-TypeScript@next（TypeScript v2）を使用する必要があります。そのためには、次のことを行います。

  1. TypeScript v2.xをインストールするために、npmを介してTypeScript @ nextをインストールします

    npm i TypeScript@next -D

  2. VSCodeで

    i）gotoFile> Preferences> Workspace Settings[これにより、プロジェクトルートに.vscodeディレクトリが生成され、settings.jsonファイルが初期化されます]

    ii）次のkey:valueペアをsettings.jsonファイルに入れます

    "TypeScript.tsdk": "node_modules/TypeScript/lib"

  3. tsconfig.jsonで、次のkey：valueペアを'compilerOptions'に追加します

{
  "compilerOptions" : {
    "baseUrl": "./",
    "paths" : {
      "src/*": ["./src/*"]
    }
  }
}
  1. VSCodeをリロードする

次のディレクトリ構造がある場合：

+ node_modules
+ src
| + app
| |  + shared
| |  |  -service.ts
| |  -main.ts
+ typings
- tsconfig.json
- webpack.config.json
- package.json
- index.html

/src/app/shared/service.tsからmain.tsをインポートするには、import {} from 'src/app/shared/service;

ts-loaderファイルをトランスコンパイルするためにwebpackおよび.tsを使用している場合、webpack.config.js構成ファイルのresolveセクションに以下を追加する必要があります。

resolve: {
    extensions: ['', '.js', '.ts'],
    alias: {
      "src": path.resolve('./src')
    }
  }

モジュールの絶対解像度については、 this を参照してください。

21
Lekhnath

以下を指定する必要があります。

    "compilerOptions": {
        "moduleResolution": "classic"
        ...

基本パスはデフォルトでtsconfig.jsonのディレクトリになり、compilerOptionsにrootDirを追加して変更します。 編集：これは効果がないようです。

これにより、次のようなインポートが可能になります。

import { Interface } from 'api/interfaces';

.または../または/で始まるパスは相対パスと見なされることに注意してください。

編集：モジュールの解決

モジュールの解決方法に注意してください。モジュールパスは、現在のファイルに対して相対的なものです。

例を使用して、現在のシナリオを説明しましょう。

ソースファイルimport { Interface } from "api/interfaces"からの/src/views/View.tsとしましょう。 TypeScriptは、次のパスでモジュールを探します。

  1. / src/views/api/interfaces.ts
  2. / src/api/interfaces.ts
  3. / api/interfaces.ts

注：これがどのように相対的であるか、import {Home} from "Home/Home"にいるときに/src/views/View.tsを想像してください。この場合、パスが/src/views/Home/Homeであっても機能します。

可能な解像度は次のとおりです。

  1. / src/views/Home/Home->これがどのように機能するかに注意してください。
  2. / src/Home/Home
  3. / Home/Home

詳細については、こちらをご覧ください。 http://www.typescriptlang.org/docs/handbook/module-resolution.html

6
steinso

パスを正しく設定した場合、ここに来る他の人に対して：

{
  …
  "compilerOptions": {
    …
    "baseUrl": ".",
    "paths": {
      "~/*": ["app/assets/javascript/*"],
      "*": ["node_modules/*", "app/assets/javascript/packs/*"]
    }
  }
}

まだ問題があります。vscodeをリロードしてみてください：cmd + shift + Pを入力してreload window。

私のためにランダムに動作を停止し、問題を報告しました。私は、VS Codeが絶対パス解決でグリッチを起こす可能性があることを理解するために、何が変わったのかを理解しようとしてオンラインで約20分費やしました。

0
RWDJ