WebStormのTypeScriptでwebpackのエイリアスを解析するにはどうすればいいですか？

Question

私はWebStorm（2017.3）とWebpack（2.6.1）でTypeScript（2.6.2）を使用しています。

私はWebPACKのいくつかのエイリアスを作成：

TS2307: Cannot find module '@/src/short-night/Axis'. 

しかし、プロジェクトはWebPACKの

でエラーなしで実行することができます

//webpack.config.js 
resolve: { 
    alias: { 
    '@': path.resolve(__dirname, '../') 
    }, 
}, 

をWebStormは、私は活字体でエイリアスを使用するときに私にいくつかのエラーメッセージを語りました

WebStormの設定でwebpack.config.jsとtsconfig.jsonを選択しました。

フルプロジェクトが参照github: pea3nut/timeline

私はWebStormは、このようなエイリアスを理解させるために何ができますか？

Answer 1

Path mappingをtsconfig.jsonに使用すると正しい方法です。そしてあなたはすでにそれをセットアップしています。しかし問題は、tsconfig.jsonが存在するディレクトリの親フォルダにTypeScriptファイルがあることです。そのため、tsconfig.jsonに含まれる.tsファイルはdevelop/main.tsです。 https://www.typescriptlang.org/docs/handbook/tsconfig-json.htmlから：

The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. If the "files" and "include" are both left unspecified, the compiler defaults to including all TypeScript (.ts, .d.ts and .tsx) files in the containing directory and subdirectories except those excluded using the "exclude" property. 

だから、あなたは、プロジェクトのルートにtsconfig.jsonを移動し、それに応じてそこにパスを変更する必要があります。

{ 
    "compilerOptions": { 
    "outDir": "./develop/dist/", 
    "noImplicitAny": true, 
    "module": "es6", 
    "target": "es5", 
    "moduleResolution": "node", 
    "lib": ["es2015", "es2017", "dom"], 
    "baseUrl":".", 
    "paths": { 
     "@/*" :["./*"] 
    }, 
    "allowJs": true 
    } 
}