react.js - react-ts项目导入路径不能以tsx扩展结束？

Question

新生成的项目，导入文件不能以tsx扩展结束，去搜了一圈也没找到答案，大佬们能给下提示吗？

这里是tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "paths": {
      "@/*": ["./src/*"],
    },
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

这里是tsconfig.node.json的内容

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

这里是vite.config.ts的内容

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: { 
    alias: { 
      '@': path.resolve(__dirname, './src') 
    } 
  }
})

Answer 1

先说解决方案，修改 tsconfig.json：

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
+   "allowImportingTsExtensions": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "paths": {
      "@/*": ["./src/*"],
    },
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

这是 TypeScript5.0 新增的选项，具体可参见：

• https://devblogs.microsoft.com/typescript/announcing-typescri...
• 原文翻译版

Answer 2

去.tsx