如何使用ts-loader获得样式化组件的输入？

Question

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

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，但是我仍然遇到同样的错误。