Babel / Typescript别名无法正常工作

Question

我有一个使用Gulp，tsify，browserify和babelify编译的Typescript环境。我已成功配置别名以更好地导航项目。

我试图通过这样做将节点模块（简称query-string）导入component.ts：

import * as querystring from 'query-string';

traceResolution的{​​{1}}选项向我显示了这一点：

  

模块名称'query-string'已成功解析为'/node_modules/query-string/index.js'

但是我在控制台中仍然收到错误说：

  

错误：无法从'/ components / example-component /'

中找到模块'query-string'

想象一下这样的项目结构：

tsconfig.json

我的/ |-- node_modules/ | |-- ts/ | |-- app.ts //this is the main file, it imports component.ts | |-- components/ | |-- example-component/ | |-- component.html | |-- component.ts //attempting to import a node module here | |-- gulpfile.js |-- tsconfig.json |-- .babelrc |-- package.json 文件如下所示：

tsconfig.json

我的{ "compilerOptions": { "noImplicitAny": false, "target": "es2015", "sourceMap": true, "baseUrl": "./ts", "traceResolution": true, "paths": { "@components/*": ["../components/*"], "*": ["../node_modules/*"] } } } 看起来像这样：

.babelrc

以下是实际工作的内容：

1. 使用相对路径导入{ "presets": ["es2015"], "plugins": [ ["module-resolver", { "cwd": "babelrc", "root": ["./ts"], "alias": { "@components": "./components" } }] ] } 个文件
2. 使用别名导入.ts个文件（例如.ts）
3. 将节点模块导入import '@component/example-component/component.ts'

Answer 1

成功找到模块的入口点，这是根据您提供的traceResolution消息正确发生的事情，是理解该模块的另一个问题。

要让TypeScript了解模块，需要找到描述模块类型的文件夹文件（.d.ts）。

查看query-string repo，它不包含.d.ts文件，因此您需要从其他地方提取。

但是，Definitely Typed repo显示查询字符串的类型可用，这意味着您应该能够运行npm install --save-dev @types/query-string，并且会将类型添加到您的项目中。< / p>