typescript react -奇怪的组件导入问题

// 假设你的组件文件在 src/components/MyComponent.tsx
import MyComponent from './components/MyComponent';

// MyComponent.tsx
const MyComponent = () => {
  return <div>My Component</div>;
};
export default MyComponent;

// 导入时
import MyComponent from './components/MyComponent';

// MyComponent.tsx
export const MyComponent = () => {
  return <div>My Component</div>;
};

// 导入时
import { MyComponent } from './components/MyComponent';

import MyComponent from './components/MyComponent.tsx';

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"]
    }
  }
}

import MyComponent from '@components/MyComponent';

// src/components/MyComponent.tsx
import React from 'react';

const MyComponent: React.FC = () => {
  return <div>My Component</div>;
};

export default MyComponent;

// src/App.tsx
import React from 'react';
import MyComponent from './components/MyComponent';

const App: React.FC = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

export default App;