Visual Studio 2022中带扩展名TypeScript模块的构建错误解决

核心原因 #

你使用的TypeScript 4.9.5不支持allowImportingTsExtensions和bundler模块解析策略——这两个特性是TypeScript 5.0及以上版本才引入的，直接添加这些配置会触发未知选项错误。

解决方案 #

方案1：升级TypeScript到5.0+（推荐） #

这是最彻底的解决方式，直接适配Rollup的扩展名需求：

1. 执行命令升级TS依赖：

   npm install typescript@latest --save-dev
   

2. 更新tsconfig.json配置：

   {
     "compilerOptions": {
       "allowImportingTsExtensions": true,
       "moduleResolution": "bundler",
       "noEmit": true,
       // 保留原有其他配置，比如编译目标、模块类型等
       "target": "ESNext",
       "module": "ESNext"
     },
     "include": ["src/**/*"]
   }
   

3. 配置Visual Studio 2022使用npm安装的TS版本：
   • 打开「工具」→「选项」→「文本编辑器」→「JavaScript/TypeScript」→「语言服务」
   • 勾选「使用npm安装的TypeScript版本」，确保VS识别到升级后的TS版本

方案2：不升级TS，用Rollup插件自动处理无扩展名导入 #

如果暂时不想升级TS，可通过Rollup插件实现导入语句不加.ts扩展名，同时保证Rollup正确解析：

1. 安装必要插件：

   npm install @rollup/plugin-typescript @rollup/plugin-node-resolve --save-dev
   

2. 修改rollup.config.js配置：

   import typescript from '@rollup/plugin-typescript';
   import resolve from '@rollup/plugin-node-resolve';
   
   export default {
     input: 'src/index.ts',
     output: {
       file: 'dist/bundle.min.js',
       format: 'iife',
       minify: true
     },
     plugins: [
       resolve({
         extensions: ['.ts', '.js'] // 让Rollup自动识别这些扩展名的文件
       }),
       typescript({ tsconfig: './tsconfig.json' })
     ]
   };
   

3. 移除导入语句中的.ts扩展名，比如把import { foo } from './Module.ts'改成import { foo } from './Module'——这样TS编译器不会报TS2691，Rollup也能通过插件找到对应文件。

方案3：临时抑制VS的TS2691错误（权宜之计） #

如果以上方案无法实施，可临时抑制错误：

• 在出现错误的导入行上方添加单行注释：

  // @ts-ignore TS2691
  import { foo } from './Module.ts'
  

• 注意：该方法需要逐个修改导入语句，不利于维护，仅作为临时过渡方案使用。

内容的提问来源于stack exchange，提问作者Gup3rSuR4c