จะทำอย่างไรให้ TypeScript ใน WebStorm แยกวิเคราะห์ alias ของ webpack ได้?

ฉันกำลังใช้ TypeScript (2.6.2) ใน WebStorm (2017.3) กับ webpack (2.6.1)

ฉันสร้างอาลิอาสบางอย่างของ webpack:

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

WebStorm บอกฉันเกี่ยวกับข้อความแสดงข้อผิดพลาดบางอย่างเมื่อฉันใช้ alias ใน TypeScript:

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

แต่โครงการสามารถทำงานได้โดยไม่มีข้อผิดพลาดโดยใช้ webpack

ฉันได้เลือก webpack.config.js และ tsconfig.json ในการตั้งค่า WebStorm

โครงการเต็มดูได้ที่ github: pea3nut/timeline

ฉันสามารถทำอะไรเพื่อให้ WebStorm เข้าใจ alias แบบนี้ได้บ้าง?

คำตอบ #1

การใช้การแมปเส้นทาง (Path mapping) ใน tsconfig.json เป็นวิธีที่ถูกต้อง และคุณได้ตั้งค่าไว้แล้ว แต่ปัญหาคือไฟล์ TypeScript ของคุณอยู่ในโฟลเดอร์หลักของไดเรกทอรีที่ tsconfig.json อยู่ ดังนั้นไฟล์ .ts เพียงไฟล์เดียวที่ถูกรวมใน tsconfig.json ของคุณคือ 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
  }
}