Starting with version 2.2, Kea officially supports TypeScript!
Get type completion when
... and while writing it:
There's just one gotcha.
TypeScript doesn't support the funky loopy syntax that Kea uses, making impossible to automatically generate types for code like this:
I tried many ways to get this to work, but it was just not possible.
Even if I'd totally change the syntax of Kea itself, several things would
not be possible be hard to implement or have big limitations
with today's TypeScript. For example selectors that
recursively depend on each other... or plugins.
Check out this blog post for a full overview of all the failed approaches.
Thus a workaround was needed.
Automatic types with
kea-typegen write or
kea-typegen watch and get a bunch of
The generated types will be automatically added to the
It's a bit of extra work, but works like magic once set up!
First install the
Add this to your
Typefiles are generated and used mainly for coding assistance and CI/CD, so it doesn't make sense to pollute commits with them. Plus they will cause merging issues at pull requests. Just ignore them.
If you're transpiling TypeScript via
babel, you won't need to generate any types before a build.
- While developing, run
kea-typegen watch, and it'll generate new types every time your logic changes.
kea-typegen writeto generate all the types, for example before a production build.
kea-typegen checkcan be used to see if any types need to be written
Here's a sample
pacakge.json, that uses
kea-typegen watch together with webpack while developing and
kea-typegen write before building the production bundle.
The only places you need to specify types are
action parameters and defaults (e.g. for
Files generated with kea-typegen will automatically import any types they can, and add the rest as type arguments
- Using namespaced types like
ExportedApi.RandomThingis slightly broken. You may sometimes need to create an
extendsthe original type. Creating a
typealias will not work, as "One difference is that interfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. "
With some tools you might need to "Reload All Files" or explicitly open
logicType.tsto see the changes.
Plugins aren't supported yet. I've hardcoded a few of them (loaders, router, window-values) into the typegen library, yet that's not a long term solution.
logic.extend()doesn't work yet
Found a bug? Some type wrongly detected? Post an issue here.
It's possible to write the type files into a different folder as arguments to the
or with a
However, experience would suggest against doing so. Having the
logicType.ts files in the same folder as the code
helps detect possible coding and typing issues sooner (the files show up red in the sidebar).
At the end of the day, we are forced to make our own
logicTypes and feed them to
However nothing says these types need to be explicitly made by
You could easily make them by hand. Follow the example
and adapt as needed!
To help with the most common cases, Kea 2.2.0 comes with a special type:
Pass it a bunch of interfaces denoting your logic's
and you'll get a close-enough approximation of the generated logic.
The result is a fully typed experience:
You'll even get completion when coding the logic:
Thank you to the team at Elastic for inspiring this approach!
- Read about Debugging to be even more productive when writing Kea code.