如何在导入时优先加载同名.tsx文件而非.ts文件？

• 明确指定扩展名导入
  直接在导入语句里加上.tsx后缀，精准定位要加载的文件：

import SomeButton from 'app/components/SomeButton.tsx';

这种方式最简单直接，不用改配置也不用换文件名，完美保留你的同名结构。

• 调整模块解析的扩展名优先级
  在项目的配置文件里修改扩展名的匹配顺序，把.tsx放在.ts前面：

  • 如果你用TypeScript，修改tsconfig.json的compilerOptions：

  {
    "compilerOptions": {
      "resolveExtensions": [".tsx", ".ts", ".js", ".jsx"]
    }
  }
  

  • 如果你用Webpack构建，修改webpack.config.js的resolve.extensions：

  module.exports = {
    resolve: {
      extensions: ['.tsx', '.ts', '.js', '.jsx']
    }
  };
  

  之后省略扩展名导入时，系统会优先匹配.tsx文件。

• 用package.json的exports字段指定默认导出
  在app/components目录下新建一个package.json，配置默认导出的文件：

{
  "exports": {
    ".": "./SomeButton.tsx"
  }
}

这样导入app/components/SomeButton时，会直接加载指定的.tsx文件，同时你仍然可以单独导入.ts文件来复用逻辑。

内容的提问来源于stack exchange，提问作者Arno van Oordt