React/Typescript/VScode - 导入路径不能以“.tsx”扩展名结尾
在使用React和TypeScript开发项目时，我们通常使用VScode作为主要的代码编辑器。然而，有时我们可能会遇到一个问题，即导入路径不能以“.tsx”扩展名结尾。这个问题可能会导致一些困惑，特别是对于新手开发者来说。在本文中，我们将探讨这个问题，并提供解决方案。问题背景在React和TypeScript项目中，我们通常会创建许多组件，并将它们分别放置在不同的文件中。当我们想要在一个组件中导入另一个组件时，我们需要使用导入路径来指定被导入组件的位置。通常，我们会使用相对路径或绝对路径来指定导入路径。例如，假设我们有一个名为"Button.tsx"的组件，并且我们想要在一个名为"App.tsx"的组件中导入这个组件。我们可以使用以下代码来实现导入：tsximport Button from './Button';这里，我们使用相对路径"./Button"来指定导入路径。这样，我们就可以在"App.tsx"中使用"Button"组件了。问题解释然而，有时我们可能会犯一个错误，即在导入路径中添加“.tsx”扩展名。例如，我们可能会写成这样：
tsximport Button from './Button.tsx';这个错误的原因是我们误以为导入路径应该包括文件的扩展名。然而，在使用相对路径或绝对路径时，我们不需要在导入路径中添加扩展名。实际上，如果我们这样写，编译器会报错，并显示以下错误消息：
This import is never used as a value and must use 'import type' because the 'importsNotUsedAsValues' is set to 'error'.这个错误消息告诉我们，我们不能将导入路径作为值使用，并且需要将其改为使用'import type'。解决方案要解决这个问题，我们需要简单地删除导入路径中的“.tsx”扩展名即可。我们只需使用相对路径或绝对路径指定被导入组件的位置，而不需要添加扩展名。例如，我们可以将错误的导入路径：
tsximport Button from './Button.tsx';改为正确的导入路径：
tsximport Button from './Button';这样做后，编译器将不再报错，并且我们可以正常地使用导入的组件。案例代码下面是一个简单的案例代码，演示了如何在React/TypeScript项目中解决导入路径不能以“.tsx”扩展名结尾的问题：
tsx// Button.tsximport React from 'react';interface ButtonProps { text: string;}const Button: React.FC = ({ text }) => ( );export default Button; tsx// App.tsximport React from 'react';import Button from './Button';const App: React.FC = () => (在这个案例中，我们创建了一个名为"Button.tsx"的组件，并在"App.tsx"中导入并使用了这个组件。注意，在导入路径中，我们没有添加“.tsx”扩展名。在使用React和TypeScript开发项目时，我们需要注意导入路径的书写。尤其是在使用相对路径或绝对路径指定导入路径时，我们不应该在路径末尾添加“.tsx”扩展名。这个错误的导入路径会导致编译器报错，但很幸运，解决这个问题只需简单地删除扩展名即可。希望本文对解决导入路径不能以“.tsx”扩展名结尾的问题有所帮助，并能提升你在React/TypeScript项目开发中的效率。);export default App;