Developing in Typescript

[DizzyHSlightlyVoided]

Has anyone had any luck making Node-flavored Slint in Typescript? I've tried ...

/* ui/MainWindow.slint */
export component MainWindow inherits Dialog {
    /* ... */
}

/* main.ts */
import * as slint from "slint-ui";

const ui = slint.loadFile('./ui/MainWindow.slint');
const mainWindow = new ui.MainWindow();

... but I immediately ran into an error: Property 'MainWindow' does not exist on type 'Object'.

[hunger]

@FloVanGH: Any ideas?

[FloVanGH]

Has anyone had any luck making Node-flavored Slint in Typescript? I've tried ...

/* ui/MainWindow.slint */
export component MainWindow inherits Dialog {
    /* ... */
}

/* main.ts */
import * as slint from "slint-ui";

const ui = slint.loadFile('./ui/MainWindow.slint');
const mainWindow = new ui.MainWindow();

... but I immediately ran into an error: Property 'MainWindow' does not exist on type 'Object'.

Hi, on the first view it looks ok to me. Can you share a link with the whole code? Or can you sent paste the whole code of each file?

[DizzyHSlightlyVoided]

Here you go:

package.json

{
  "name": "slint-helloworld",
  "version": "0.0.1",
  "main": "js/main.js",
  "type": "module",
  "scripts": {
    "start": "node ."
  },
  "dependencies": {
    "slint-ui": "^1.7.2"
  },
  "devDependencies": {
    "@types/node": "^22.5.5",
    "typescript": "^5.6.2"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    "outDir": "js",
    "moduleResolution": "Node"
  },
  "include": [
    "./ts/**/*.ts"
  ]
}

`ts/main.ts

import * as slint from "slint-ui";

const ui = slint.loadFile('./ui/MainWindow.slint');
const mainWindow = new ui.MainWindow();

mainWindow.ok_clicked = mainWindow.hide;

await mainWindow.run();

process.exit();

ui/MainWindow.slint

import { StandardButton } from "std-widgets.slint";

export component MainWindow inherits Dialog {
    messageLabel := Text {
        text: "Hello, world!";
        wrap: word-wrap;
    }

    runButton := StandardButton {
        kind: ok;
    }
}

Notably, the Javascript itself works fine after running npm install and npx tsc, even though the Typescript has errors.

[FloVanGH]

You have to add an as any to get it working:

import * as slint from "slint-ui";

const ui = slint.loadFile('./ui/MainWindow.slint') as any;
const mainWindow = new ui.MainWindow();

mainWindow.ok_clicked = mainWindow.hide;

await mainWindow.run();

process.exit();

[DizzyHSlightlyVoided]

And of course, my immediate reaction was to put as any next to new ui.MainWindow() instead of next to loadFile. Thanks!