花生PeA 花生PeA - 10 months ago 10263
TypeScript Question

How can make TypeScript in WebStorm to parse alias of webpack?

I using TypeScript (2.6.2) in WebStorm (2017.3) with webpack (2.6.1).

I create some alias of webpack:

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


WebStorm told me some error messages when I use alias in TypeScript:

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


But the project can run with no error by webpack

I had selected
webpack.config.js
and
tsconfig.json
in WebStorm setting.

The full project see github: pea3nut/timeline

What can I do to make WebStorm understand such alias?

Answer Source

Using Path mapping in tsconfig.json is the right way to go. And you have it set up already. But the issue is that you have your TypeScript files located in the parent folder of the directory where tsconfig.json resides. So the only .ts file included in your tsconfig.json is develop/main.ts. From 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. 

So, you have to move tsconfig.json to the project root and change the paths there accordingly:

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

enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download