WebStorm에서 TypeScript를 사용하여 webpack의 별칭을 구문 분석 할 수 있습니까?

Question

webcat (2.6.1)과 함께 WebStorm (2017.3)의 TypeScript (2.6.2)를 사용합니다.

내가 웹팩의 일부 별칭 생성 :

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

그러나 프로젝트가 웹팩

으로 오류없이 실행할 수 있습니다

//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 
    } 
}