Typescript and BangleJS

Posted on
  • How vibrant is the Typescript + Espruino community? I see a "getting started" and a type definition for Espruino but it is fairly outdated. Attempting to update the repo gets stuck in use of the var global property in Espruino's type definition. I believe it conflicts with Node's own Type definitions.

    I am planning to hack together something to get TypeScript and BangleJS working. If more people are interested I will try to be clean enough to be able to push it to DefinitelyTyped repository.

    Cheers.

  • I'm a recent convert to TS and would love to have pre-built type definitions for Espruino (I found that most of the issues that come with porting legacy apps to TS is the lack of typedefs and therefore wrestling with TS to just get things done).

  • @parasquid I am an Espruino noob, so I can't speak for the type definition referred to in this post -> https://www.espruino.com/Typescript+and+­Visual+Studio+Code+IDE

    I have a fork of the quickstart here but I still haven't managed to get all bits running without errors. Atleast it has all dependencies upgraded and latest version of Gulp.

    I am not going to mess up the Espruino type definition in DefinitelyTyped unless someone files a bug for it. But you probably need to dig into the node_modules\@types\espruino\index.d.ts and comment out line number 3692 that says declare var global: any; The variable 'global' conflicts with another one in node.d.ts I believe.
    I think I'll start a self contained repository for the BangleJS typedef and slowly get familiar with Espruino myself. I'll post updates here.

    Cheers.

  • Regarding this global: may be some other ways of implementation could help. Node is JS but it is not the birth place of JS. It was the browser, and in the browser there is an implicit 'global'... where all the things 'hang of', similar as in Smalltalk, where #Smalltalk is the global.

    In a microcontroller context where resources are extremely scarce, some (software) technologies / techniques used in other contexts are not that overall beneficial. On the other hand - if developed in a simulation environment / cross-developed and then 'broken'/converted/transpiled down for the 'little cousin runtime environment - why not to use. Unfortunately, these transpilers & cie. are machines and deliver results not that easy for humans to consume... yes, I know, this already starts with source code maps... but for Espruino, they already cost the runtime code byte(s) for each of the functions.

  • Vanilla javascript should work in Typescript as well, although it can help to prevent some bugs. I like the clean one on one IDE. If you work in Typescript, you'll have to build/compile it to javascript before uploading it to an Espruino device.

    Maybe typescript uses a lot of polyfills, which would make the code bigger than vanilla javascript. Although Typescript can have its benefits. I'll doubt if it will be better for use in Espruino.

    I'm working on a StencilJS PWA-application, which works in Typescript, just like many other front-end applications. I started to convert https://www.puck-js.com/puck.js to a typescript module, but it's a bit tricky.

    For now, I have put it in index.html and 'imported' window.Puck to use the Bluetooth connectivity.

    Regards, Peter

  • @Dutch_Peter

    ...it can help to prevent some bugs.

    And it does - like any other well typed language. It prevents from simple typos getting the better of the code. Nice in many IDEs and linters are that they indicate undefined / uninitialized references and help to get these issues as well.

  • @Dutch_Peter whatever works. This thread is for bringing forward experiences/issues using Typescript to develop BangleJS apps in particular which can be expanded to Espruino in general.

    I am halfway through Type definition of Bangle API. Still wondering if I should takeup the challenge of updating the entire Espruino type definition. It is a bit of Yak shaving I rather not get stuck in. I want to have a Bangle JS App ready rather quickly.

    The TS quickstart project I referred to (above) has a lot of Espruino specific steps that actually sets you up well for Espruino devices. I'll try and adapt it to Bangle as far as possible.

    I am not rewriting anything in Typescript, rather I am just creating Type definitions for existing APIs to help use TS to write Espruino code.

    I am pretty sure the TS compiler/transpiler generates better JS code than I can hope to write. For those who can write better JS code directly, rock on folks!

  • @PiOfThings (@Dutch_Peter), did you consider to integrate the type description w/ the sources and let the generation/ pub of the site - in particular the reference and (minified) modules generate / pub it at the same time? ...this way it could be kept in sync much easier?

  • I am halfway through Type definition of Bangle API

    I can't remember for sure, but I think the initial definition may have been made with a script? There should be a decent amount of info in the Espruino codebase (those /*JSON comments in the code) to help, and if it's not detailed enough we could look at improving that, so we have a way of always creating typescript decls that are up to date.

    https://github.com/espruino/Espruino/blo­b/master/scripts/build_jsstub.py is a simple example, but there's actually much more type info in there

  • @Gordon that is a nice trick. It seems Typescript now has the ability to generate TypeDefinition stubs from JsDocs... I'll give it a go and update here.

    My progress has been slowed down due to other hobby distractions, please bear with me :-)

  • Imo the current @types/espruino under DefinitelyTyped is incomplete. eg. there's no definition for the Storage module.
    I've found this other one in this Github repository but have no idea where this came form, seems to be generated as well. Can't reach the owner.

    I've just finished porting my existing NodeMCU + Lua code to Espruino + Typescript, and it worked quiet well. Although one needs to be careful, because even though you can target ES6, some features are missing. eg. initially I was using the Map structure to handle some things, but that was not working and went back to basic JS dictionaries (where Typescript can still gives a bunch of type hints fortunately).

    I wonder what other people use for transpiling and minification. I'm using Rollup + Uglify right now, but maybe Babel would do more and polyfill some missing stuff and make it a more transparent experience. I don't know if it's possible to define a more specific set of supported ECMAScript features for a transpiler; an up-to-date Espruino fitting profile could be done that way.

    (Also I would love to play with this watch, but I was too late for the Kickstarter party, and it's kind of expensive now. :( Got me thinking if there are other open source watches available, and interestingly the PineTime seems to use a very similar hardware; I wonder if the manufacturer behind is the same or not.)

  • Keep on working on typescript :)

    WRT the Pinetime: it ships with a locked firmware, so you can't change it without opening it. And after opening, it won't be water proof. Search the forum if you are interested in alternatives, a good starting point is Espruino on your watch!

    • you have a PM :)
  • Sat 2020.01.25

    'no definition for the Storage module.'

    Not entirely sure what you are after, but has the actual source been inspected?

    https://github.com/espruino/Espruino/blo­b/master/src/jswrap_storage.c


    'too late for the Kickstarter party, and it's kind of expensive now'

    Last month I had a link for top ten hackable watches. looking now

    "kind of expensive" Relative term. I thought so too, until I started fetching detail. While I'm sure there are less expensive and cheap (meaning quality) CN equivalents, most started around $150 and up. So one can see, Bangle.js is nicely priced.

  • I meant that the @types/espruino Typescript definition doesn't have the Storage module covered. This thread is about Typescript.

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview
About

Typescript and BangleJS

Posted by Avatar for PiOfThings @PiOfThings

Actions