Bagaimana cara membuat TypeScript di WebStorm untuk mengurai alias dari webpack?

Saya menggunakan TypeScript (2.6.2) di WebStorm (2017.3) dengan webpack (2.6.1).

Saya membuat beberapa alias dari webpack:

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

WebStorm memberi tahu saya beberapa pesan kesalahan saat saya menggunakan alias di TypeScript:

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

Tetapi proyek dapat dijalankan tanpa kesalahan oleh webpack

Saya telah memilih webpack.config.js dan tsconfig.json di pengaturan WebStorm.

Proyek lengkap lihat github: pea3nut/timeline

Apa yang bisa saya lakukan agar WebStorm memahami alias semacam itu?

Jawaban #1

Menggunakan pemetaan Path di tsconfig.json adalah cara yang tepat. Dan Anda sudah mengaturnya. Tetapi masalahnya adalah bahwa file TypeScript Anda terletak di folder induk dari direktori tempat tsconfig.json berada. Jadi satu-satunya file .ts yang disertakan dalam tsconfig.json Anda adalah develop/main.ts. Dari 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.

Jadi, Anda harus memindahkan tsconfig.json ke root proyek dan mengubah jalurnya di sana sesuai:

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

Artikel terkait