Question

将TypeScript与React结合使用是新的。当我从.tsx文件导入组件时，默认情况下假定它是.js文件。该错误表明该目录中没有About.js文件或Contact.js文件。此外，TS linter不允许我将.tsx添加到文件路径的末尾。如何解决这个问题？我使用了'npx create-react-app project_name --typescript'。这是我的代码

import React from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import Home from './views/Home'
import About from './views/About'
import Contact from './views/Contact'
import Navbar from './components/Navbar'
import Footer from './components/Footer'

const App: React.FC<{}> = () => {
  return (
    <BrowserRouter>
      <Navbar title="Website" links={['About', 'Contact']} color="blue"/>

      <Route exact path="/" component={Home}/>
      <Route path="/home" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/contact" component={Contact}/>

      <Footer/>
    </BrowserRouter>
  )
}

export default App

Answer 1

您使用过create react应用吗？如果您不使用或退出并退出它，则应将此配置添加到您的webpack配置文件中：

{
  resolve: {
    extensions: [".js", ".json", ".ts", ".tsx"],
  },
}

如果您使用了create react应用并且没有弹出它，则可以将这些规则添加到typescript-eslint

module.exports = {
  settings: {
    'import/resolver': {
      'node': {
        'extensions': ['.js','.jsx','.ts','.tsx']
      }
    }
  }
};

反应：无法导入.tsx文件

1 个答案: