0

我正在使用 ts-loader 和 webpack 来编译我的打字稿文件。我已经能够让我的设置适用于在 @types 模块中具有类型的所有模块，但我无法让它与提供自己的类型文件的 styled-components 一起使用。

webpack.config.js：

module.exports = function(env) {
  return {
     module: {
        rules: [
           {
              test: /\.jsx?$/,
              loader: 'babel-loader',
              exclude: /node_modules/,
              options: {
                 babelrc: false,
                 cacheDirectory: true,
              }
           },
           {
              test: /\.tsx?$/,
              loader: 'ts-loader',
              options: {
                 configFile: path.resolve(__dirname, "tsconfig.json")
              },
           }
        ]
     },
     resolve: {
        modules: ['node_modules'],
        extensions: ['.js', '.jsx', '.ts', '.tsx']
     },
     context: __dirname,
     target: 'web',
  };
};

tsconfig.json：

{
   "compilerOptions": {
      "outDir": "./dist",
      "module": "commonjs",
      "target": "es5",
      "noImplicitAny": true,
      "moduleResolution": "node",
      "jsx": "react",
      "allowJs": true,
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
   }
}

当我尝试时，import { ThemedStyledFunction } from 'styled-components' 我得到：

Module '"node_modules/styled-components/dist/styled- components.browser.es"' has no exported member 'ThemedStyledFunction'

我尝试通过添加手动导入样式组件的类型：

"files": [
    "node_modules/styled-components/typings/styled-components.d.ts"
],

但这似乎不起作用。我什至尝试在 @types 下创建一个名为 styled-components 的目录并将类型复制到 index.d.ts 但我仍然遇到同样的错误。

4

0 回答 0