web-dev-qa-db-ja.com

TypeScriptのルートパスからモジュールをインポートする

私がプロジェクトを運営しており、その主なソースディレクトリが次のとおりであるとします。

C:\product\src

このディレクトリに基づいて、すべてのインポートパスはそれに対する相対パスになります。つまり、次のように仮定します：

// Current script: C:\product\src\com\name\product\blah.ts

import { thing } from '/com/name/product/thing';

と同じ：

// Current script: C:\product\src\com\name\product\blah.ts

import { thing } from '../../../com/name/product/thing';

私のエントリー編集ファイルは次の場所にあります。

C:\product\src

例えば。だから、コンパイラオプションでこのようなエントリパス（C:\product\srcなど）を指定する方法はありますか？ webpackを使用するため、tsconfig.jsonファイルでこれを指定する必要があります。

上記の例を試しましたが、TypeScriptは要求されたモジュールが見つからないと言います：

// Current script: A.ts

import { B } from '/com/B';


// Current script: B.ts

export const B = 0;

私のtsconfig.jsonファイル（別のプロジェクト内ですが、どちらも似ています）：

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noUnusedLocals": true,
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "strictNullChecks": true,
        "target": "ES6"
    },

    "include": [
        "./src/**/*.ts",
        "./src/**/*.d.ts"
    ]
}
typescripttypescript2.0typescript1.8typescript2.1typescript2.2
9
user7536774

（子犬ソケットを避けるために私の回答を再投稿します。）

compilerOptions.baseUrl property以下のインポートを行うことができました。これにより、完全なルートから期待されるパスを得ることができました。これにより、コードのメンテナンスが容易になり、現在のフォルダーとは無関係に任意のファイルで動作します。以下の例では、モジュールルートとしてプロジェクトのsrcフォルダーがあります。

重要なアドバイス：このbaseUrlプロパティは（少なくとも私にとっては）エントリwebpackファイルに影響しないため、この例でsrcフォルダー内のメインファイルを分離し、エントリから実行します（つまり、import { Main } from './src/Main'; new Main;）、 1回だけ。

// browser: directory inside src;
//   * net: A TS file.
import { URLRequest } from 'browser/net';

tsconfig.json例：

{
    "compilerOptions": {
        "baseUrl": "./src",
        "module": "commonjs",
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noUnusedLocals": true,
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "strictNullChecks": true,
        "target": "ES6"
    },

    "include": [
        "./src/**/*.ts",
        "./src/**/*.d.ts"
    ]
}

ただし、webpackでは直接動作しません。 webpackオプションでも同じことを行う必要があります。これがwebpack 2での動作です：

module.exports = {
  ...
  , resolve: {
      ...
      , modules: [ path.join(__dirname, './src') ]
    }
}
10
user7536774

TypeScriptインポートでは、パスの先頭で/を使用してルートディレクトリを示します。現在のファイルに関連するファイルをインポートするには、最初のスラッシュを省略するか、./を使用します。

// Current script: C:\product\src\com\name\product\blah.ts
import { thing } from './com/name/product/thing';

デフォルトでは、TypeScriptコンパイラは、プロジェクトのルートがtsconfig.jsonの場所と同じであると想定します。

TsconfigでrootDirプロパティのcompilerOptionsプロパティを指定することにより、新しいルートを指定できます。

使用可能なすべてのプロパティ設定のリストについては、tsconfig定義を参照してください here 。

6
Teddy Sterne

tsconfig.json{ "compilerOptions": { "baseUrl": "./src", "rootDir": "./src", ... }のsrcフォルダーを指すようにbaseUrlとrootDirの両方を設定する必要がありました。その後、接頭辞「/」を付けずに.tsxファイルをインポートできました。相対パス。

例えばimport BreadCrumb from 'components/BreadCrumb'

1
Damian Green

記録のためだけに

プロジェクトから絶対インポートを使用する場合は、/などの接頭辞として/src/config/cfgを使用せず、src/config/cfgとしてのみ使用します

https://stackoverflow.com/a/46229294/7529562 pointed、/はSystem rootを表します、

tscは文句を言いますcannot find module

1
toffee

thing.tsのimportステートメントのソリューションは

_import {} './product/blah'
_

あなたのプロジェクト構造は

enter image description here

説明付きのその他の可能なオプション

私は次のアプリケーション構造を持ち、それを

C:\\Users\\(username)\\Documents\firstAngular2App

スクリーンショットのように。

enter image description here

App.module.tsにコンポーネントをインポートしています

  1. ./は現在のフォルダー（アプリ）を表示します

    _import { } from './'; 
_

enter image description here

  1. ../はルートフォルダー（firstAngular2App-master）を参照します

    _import { } from '../'; 
_

enter image description here

  1. ../../はルートフォルダー（ドキュメントフォルダー）を参照します

    _import { } from '../../'; 
_

enter image description here

  1. ../ app /はappフォルダーを参照しますが、root（firstAngular2App）から参照されます

    _import {} from '../app/';
_

enter image description here

1
Aravind