Starting with version 2.2, Kea officially supports TypeScript!
In addition to increased type safety, this massively improves developer ergonomics, as you can now autocomplete all your actions and values, both while using logic in a component:
... 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 still not be possible with today's TypeScript. For example typing selectors that recursively depend on each other... or supporting plugins.
Check out this blog post for a full overview of all the failed approaches.
Thus a workaround was needed.
kea-typegen write or
kea-typegen watch will generate a bunch of
... which you must then import and pass on to the
It's a bit of extra work, but works like magic once set up!
If, like in the screencast above, you have logic that connects to other logic or selectors that depend on other
kea-typegen will run in multiple passes
until there are no more changes to write.
First install the
Then create a
.kearc file in the root of your project, with the relevant
You may also specify these paths as arguments to the
kea-typegen commands, though
it's easier to have them in the
- 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.
I recommend keeping all the generated types in an adjacent folder to your app's
sources and adding it to
You can, of course, save the
logicType.ts files next to the
themselves and commit them in, but in my experience
doing so causes a lot of headache, especially when working with many branches and
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.
Types in Reducers
kea-typegen automatically detects the types used in your actions, reducers,
selectors and so on. It may however be the case that you need to manually specify the
type of your reducers.
In the following example the type of
blogId is be autodetected as
since we can't read more out of the default value.
as keyword you can improve on this and provide the exact type for your
This is the very first version of
kea-typegen, so there are still some rough edges.
- You must manually import the
logicTypeand insert it into your logic. This will be done automatically in the future.
- You must manually hook up all type dependencies by adding them on the
kea-typegenwill then put the same list inside
logicType. This will also be done automatically in the future.
- When connecting logic together,
you must use
Sometimes you might need to "Reload All Files" in your editor... 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.
These are all solvable issues. Let me know which ones to prioritise!
Option 2: MakeLogicType<V, A, P>
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.