How to get TypeScript Types-Hints on pebble imports? (Alloy)

Watchapp/Face Developers Corner
1

I would expect that there are Typings on the imports. To help with auto-completion and finding type mis-matches.

But on the import I’m not sure what to do.

image
image1132×652 123 KB

How to reproduce:

1) clone this repo: GitHub - Moddable-OpenSource/pebble-examples · GitHub

  1. Open the TypeScript example in VSCode.

  2. Hover over the Button or import

1 Like
2

Found some Type Definitions in the SDK, but unsure how to import them yet.

$ cd /home/david/.pebble-sdk/SDKs/4.9.148/toolchain/moddable/typings/pebble/
$ ls
accelerometer.d.ts  button.d.ts   device.d.ts  location.d.ts  piu.d.ts
battery.d.ts        compass.d.ts  global.d.ts  message.d.ts   poco.d.ts
1 Like
3

There are 316 typing files, so ideally I would like a systematic solution.

david@yoman:~/.pebble-sdk/SDKs/4.9.148/toolchain/moddable$ find ./typings/ -type f | wc -l
316

1 Like
4

Solution I created so far:

Make a tsconfig.json file in the root of the project, paste this content in:

{
  "compilerOptions": {
    "typeRoots": [
      "./node_modules/@types",
      "/home/david/.pebble-sdk/SDKs/4.9.148/toolchain/moddable/typings"
    ],
  },
  "include": [
    "src",
    "/home/david/.pebble-sdk/SDKs/4.9.148/toolchain/moddable/typings/**/*.d.ts"
  ]
}

This wouldn’t work in a scalable open-source Github hosted project, unless everyone’s name is David, but it works enough for me for now.

1 Like
5

Moddable provides a type definition package. I think this will solve your problem.

https://www.npmjs.com/package/@moddable/typings

1 Like
6

This is a sample tsconfig.jsonwith @moddable/typings package.

{
    "compilerOptions": {
        "allowJs": true,
        "module": "es2022",
        "forceConsistentCasingInFileNames": true,
        "lib": [
            "es2024"
        ],
        "outDir": "dist",
        "sourceMap": true,
        "target": "ES2024",
        "paths": {
            "embedded:sensor/Accelerometer": ["./node_modules/@moddable/typings/pebble/accelerometer"],
            "embedded:sensor/Battery": ["./node_modules/@moddable/typings/pebble/battery"],
            "embedded:sensor/Compass": ["./node_modules/@moddable/typings/pebble/compass"],
            "embedded:sensor/Location": ["./node_modules/@moddable/typings/pebble/location"],
            "embedded:provider/builtin": ["./node_modules/@moddable/typings/pebble/device"],
            "pebble/button": ["./node_modules/@moddable/typings/pebble/button"],
            "pebble/message": ["./node_modules/@moddable/typings/pebble/message"]
        },
        "types": [
            "./node_modules/@moddable/typings/pebble/global",
            "./node_modules/@moddable/typings/pebble/piu",
            "./node_modules/@moddable/typings/pebble/poco",
            "./node_modules/@moddable/typings/easing",
            "./node_modules/@moddable/typings/piu/MC",
            "./node_modules/@moddable/typings/piu/MC-types"
        ]
    },
    "include": [
        "./src/embeddedjs/**/*"
    ]
}
1 Like