CODEWITHSUNDEEP
typescriptwebpackwebstorm
pea3nut
pea3nut

Reputation: 2184

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?

Upvotes: 3

Views: 2220

Answers (1)

lena
lena

Reputation: 93898

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

Upvotes: 4

Related Questions