In Gnome extension development with typescript how do I import .ts files?

Desktop
1

I am trying to develop a gnome shell extension. 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 TypeScript and LSP | GNOME JavaScript.

{
  "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 like import { SOME_CONTSTANT } from './constants' 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.

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.

On a second note can anyone also suggest which sections of the docs to enable I am finding the docs hard to use. I have Shell, Gio, GObject, Meta, and GTK enabled. I will need to set keymaps, get open windows and change focus to windows so if someone knows what I should have enabled that would also help.

Thanks.

2

Hi, did you try what the error suggested and use:

import { SOME_CONSTANT } from './constants.js';

Someone in the Extensions channel offered this link: TSConfig Reference - Docs on every TSConfig option

3

Seems to work thanks. This goes against every intuition because your basically importing a file that doesn’t exist so I didn’t even think to do this. I guess just chalk it up to the current state of the javascript ecosystem.

4

I guess the TypeScript transpiler/compiler is smart enough to know where something will be emitted :person_shrugging:

5

I have the same problem but it seems to happen in @girs which makes it a bit harder to fix:

node_modules/@girs/gnome-shell/dist/ui/workspace.d.ts:4:31 - error TS2835: Relative import paths need explicit file extensions in ECMAScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean './windowPreview.js'?

4 import { WindowPreview } from './windowPreview';
                                ~~~~~~~~~~~~~~~~~

node_modules/@girs/gnome-shell/dist/ui/workspacesView.d.ts:1:27 - error TS2835: Relative import paths need explicit file extensions in ECMAScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean './workspace.js'?

1 import { Workspace } from './workspace';
                            ~~~~~~~~~~~~~


Found 2 errors in 2 files.

Errors  Files
     1  node_modules/@girs/gnome-shell/dist/ui/workspace.d.ts:4
     1  node_modules/@girs/gnome-shell/dist/ui/workspacesView.d.ts:1

This is just after following Typescript and LSP exactly.
I don’t really want to monkey patch these files locally because that is hardly a solution…

6

The solution is just to do as the error tells you :slightly_smiling_face:

Did you mean ‘./windowPreview.js’?
Did you mean ‘./workspace.js’?

import { windowPreview } from './windowPreview.js';
import { workspace } from './workspace.js';
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.