reactjs – 如何在React应用程序中的typescript文件中导入js模块

import React from 'react';
import HOC1 from 'app/hocs/hoc1';
import compose from 'recompose/compose;

class MyComponent from React.Component {
     ...component stuff...
}

export default compose(HOC1())(MyComponent);

但是现在我在我的应用程序中添加了typescript,每当我导入时

import HOC1 from 'app/hocs/hoc1';

它说

TS2307: Cannot find module 'app/hocs/hoc1'.

我不想为所有HOC添加类型定义.什么是解决方案以及为什么我收到此错误？

[编辑]我也在tsconfig中使用baseUrl.我的文件夹结构是

/Project/configs/tsconfig
/Project/src/app/hocs

在tsconfig中,我通过this文档将baseUrl作为../src.

另一个编辑
我的webpack配置看起来像：

{
        test: /.(t|j)sx?$/,loader: 'happypack/loader?id=jsx-without-proptypes',include: [
          path.resolve(__dirname),path.resolve(__dirname,'../src'),],},

整个webpack配置看起来像

const config = {
  context: path.resolve(__dirname,mode: NODE_ENV,optimization: {
    splitChunks: false,nodeEnv: NODE_ENV,minimize: false,node: {
    net: 'empty',output: {
    path: path.resolve(__dirname,'../build/public/assets'),publicPath: '/assets/',sourcePrefix: '  ',pathinfo: DEBUG,//https://webpack.js.org/configuration/output/#output-pathinfo
  },module: {
    noParse: [/html2canvas/],rules: [
      {
        test: /.tsx?$/,enforce: 'pre',use: { loader: 'awesome-typescript-loader' },...shimLoaders,...selectiveModulesLoader,{
        test: /.(t|j)sx?$/,{
        test: /.jsx?$/,loader: 'happypack/loader?id=jsx-without-lodash-plugin',include: [
          path.resolve(__dirname,'../src/app/modules/insights/'),exclude: /node_modules/,loader: 'happypack/loader?id=jsx-with-proptypes',loader: 'babel-loader',query: {
          presets: [['env',{ include: ['babel-plugin-transform-es2015-template-literals'] }]],{
        test: /.css$/,use: getCssLoaders({
          pwd: PWD,debug: DEBUG,}),...getScssRules(DEBUG,PWD),{
        test: /.less$/,use: [DEBUG ? 'css-loader' : 'css-loader?minimize','less-loader'],{
        test: /.txt$/,loader: 'raw-loader',{
        test: /.svg$/,loader: 'spr-svg-loader',{
        test: /.(png|jpg|jpeg|gif)$/,loader: 'url-loader',query: {
          name: DEBUG ? '[path][name].[ext]' : '[hash].[ext]',// ?[hash]
          limit: 10000,{
        test: /.(woff|woff2)$/,loader: 'url-loader?name=fonts/[name].[ext]&limit=65000&mimetype=application/font-woff',{
        test: /.(otf|ttf)$/,loader: 'url-loader?name=fonts/[name].[ext]&limit=65000&mimetype=application/octet-stream',{
        test: /.eot$/,loader: 'url-loader?name=fonts/[name].[ext]&limit=65000&mimetype=application/vnd.ms-fontobject',{
        test: /.(wav|mp3)$/,loader: 'file-loader',// ?[hash]
        },{
        test: /.pug/,loader: 'pug-loader',{
        test: /.html$/,include: /src/app/,loader: StringReplacePlugin.replace({
          replacements: [
            {
              //Replaces ES6 strings from languagePack to simple string
              pattern: /__(s*`([^`]*)`s*)/gi,replacement: (match,p1) => {
                let replacedStr = p1;
                replacedStr = replacedStr.replace(new RegExp('${([w.:-]+)}','g'),'' + $1 + '');
                return `'${replacedStr}'`;
              },{
              //Following methods - look out carefully for the *quotes* (single/double)
              //doing what i18nPlugin would do for html files - with the *single* quotes
              pattern: /__(s*'(.+?)'s*)/g,p1) => {
                const replacedStr = p1;
                return `'${replacedStr}'`;
              },{
              //doing what i18nPlugin would do for html files - with the *double* quotes
              pattern: /__(s*"(.+?)"s*)/g,p1) => {
                const replacedStr = p1;
                return `"${replacedStr}"`;
              },resolve: {
    modules: [
      path.resolve(PWD),path.resolve(PWD,'..'),'node_modules','web_modules','src',extensions: ['.js','.jsx','.ts','.tsx','.json','.webpack.js','.web.js'],alias: ALIAS,// symlinks: false,//https://webpack.js.org/configuration/resolve/#resolve-symlinks,https://github.com/webpack/webpack/issues/1643
  },plugins: [getProvidePlugin(),getLoaderOptionPlugin({ debug: DEBUG }),...getHappypackPlugin({ debug: DEBUG })],resolveLoader: {
    modules: ['node_modules','../../node_modules'),'./config/loaders/')],alias: {
      text: 'raw-loader',// treat text plugin as raw-loader
      jst: 'ejs-loader',style: 'style-loader',imports: 'imports-loader',bail: !DEBUG,watch: DEBUG,cache: DEBUG,stats: DEBUG ?
    {
      colors: true,reasons: false,hash: VERBOSE,version: VERBOSE,timings: true,chunks: false,chunkModules: VERBOSE,cached: VERBOSE,cachedAssets: VERBOSE,performance: true,} :
    { all: false,assets: true,warnings: true,errors: true,errorDetails: false },};

另一个编辑

webpack config定义的别名也没有做到.