使用TypeScript开发Gnome Shell扩展的TS文件导入问题

问题分析 #

你当前的核心矛盾在于：使用NodeNext/Node16模块解析时，TypeScript要求相对导入必须带扩展名，但添加.ts扩展名后，编译生成的JS文件会保留该扩展名，导致Gnome Shell无法找到对应的JS文件；而启用allowImportingTsExtensions又必须配合noEmit或emitDeclarationOnly，这与生成可执行JS文件的需求冲突。

可行解决方案 #

调整tsconfig.json的模块解析配置，改用Bundler模块解析策略，同时保留对Gnome库的导入支持：

修改后的tsconfig.json

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolvePackageJsonExports": false,
    "outDir": "./dist",
    "sourceMap": false,
    "strict": true,
    "target": "ES2022",
    "lib": ["ES2022"],
    "allowSyntheticDefaultImports": true
  },
  "include": ["ambient.d.ts"],
  "files": ["extension.ts", "prefs.ts"]
}

导入语句写法

直接使用不带扩展名的相对路径导入：

import { SOME_CONSTANT } from './constants';

方案说明 #

1. moduleResolution: "Bundler"：模拟打包工具的解析逻辑，允许不带扩展名的相对导入，TypeScript会自动匹配对应的.ts文件；编译时会自动将导入路径替换为.js扩展名，刚好适配Gnome Shell的原生ES模块要求。
2. resolvePackageJsonExports: false：关闭package.json exports字段的解析逻辑，确保能正常导入Gnome的GJS模块（如gi://Gio这类特殊路径）。
3. allowSyntheticDefaultImports：可选配置，用于兼容部分Gnome模块的默认导出语法，避免类型检查报错。

额外注意事项 #

确保你的ambient.d.ts文件已正确引入GJS的类型定义（如通过@girs/*系列npm包），这样TypeScript才能正确识别Gnome相关的API。

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