Search code examples
typescriptgnome-shell-extensions

Gnome shell extension in typescript. How to import .ts files


I am trying to develop a gnome shell extension with typescript. The issue I am having is that I get errors importing .ts files. The gnome shell docs say to setup tsconfig as follows found here Gnome typescript docs:

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

But If I import with no extension I get the following error :

1. tsserver: Relative import paths need explicit file extensions in ECMAScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean './constants.js'? [2835]

So then if I import with the extension import { SOME_CONSTANT } from './constansts.ts I get the following error:

1. tsserver: An import path can only end with a '.ts' extension when 'allowImportingTsExtensions' is enabled. [5097]

If I enable this rule then I get a compile error:

tsconfig.json:5:35 - error TS5096: Option 'allowImportingTsExtensions' can only be used when either 'noEmit' or 'emitDeclarationOnly' is set.

5     "allowImportingTsExtensions": true,
                                ~~~~

It compiles but the .ts extension is left in the import statement so the compiled file cannot be found. I can't set any of the noEmit or emitDeclarationOnly settings because I need to emit javascript files as Gnome shell uses plain js with es import modules. I've tried to change the moduleResolution to ESNext and a couple of other ones but then I can't import any of gnomes library. I'm lost at this point. Can anyone please help. Also if anyone knows what modules to enable in the docs please leave in the comments that would also be helpful.


Solution

  • I think you should be able to specify "constants.js" in your .ts file, referencing what will be emitted, rather than "constants.ts" that you actually wrote, which seems unintuitive, but that's how my TypeScript looks (though not part of a GNOME Extension).