Babel /打字本别名不能正常工作

Question

我有一个类型记录环境，我用Gulp，tsify，浏览器化和babelify编译。我已经成功地配置了别名以更好地导航项目。

我试图通过以下操作将节点模块(比如query-string )导入到component.ts中：

import * as querystring from 'query-string';

traceResolution选项tsconfig.json向我展示了以下内容：

模块名'query-string‘被成功地解析为’/node_ Module /query-string/index.js‘。

但我仍然在控制台上看到一个错误：

错误:无法从‘/components/示例-component/’中找到模块‘query’

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

/
|-- 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看起来是这样的：

{
  "presets": ["es2015"],
  "plugins": [
    ["module-resolver", {
      "cwd": "babelrc",
      "root": ["./ts"],
      "alias": {
        "@components": "./components"
      }
    }]
  ]
}

下面是实际工作的内容：

1. 使用相对路径导入.ts文件
2. 使用别名导入.ts文件(例如。import '@component/example-component/component.ts')
3. 将节点模块导入app.ts

Answer 1

成功地定位模块的入口点，这是根据您提供的traceResolution消息正确发生的事情，这与理解该模块是一个不同的问题。

为了让TypeScript理解模块，它需要找到一个描述模块类型的类型文件(.d.ts)。

查看查询字符串回购，它没有附带一个.d.ts文件，所以您需要从其他地方提取它。

但是，似乎查询字符串的类型在绝对类型的回购中是可用的，这意味着您应该能够运行npm install --save-dev @types/query-string并将这些类型添加到您的项目中。