typesafe-actions v2.0 doesn't work well with @babel/plugin-transform-typescript

[lnhrdt]

If I understand correctly, typesafe-actions v2.0 doesn't work well with @babel/plugin-transform-typescript.

I've been using @babel/plugin-transform-typescript in conjunction with react-app-rewired (via react-app-rewire-typescript-babel-preset so that I can use react-scripts from create-react-app rather than react-scripts-ts from create-react-app-typescript. I do this because I want to use all the upstream features in create-react-app that haven't made it to create-react-app-typescript yet.

I get a whole bunch of type errors in my IDE using typesafe-actions@2.0.0-rc.1 that I don't get when I try out your sample app. For example:

Creating actions like:

import {ActionsUnion, createStandardAction, getType} from "typesafe-actions";

const menuActions = {
    openMenu: createStandardAction('menu/OPEN')<void>(),
    closeMenu: createStandardAction('menu/CLOSE')<void>(),
};

type MenuActions = ActionsUnion<typeof menuActions>;

type RootAction = MenuActions | OtherActions;

type MenuState = {
    readonly show: boolean,
}

const menuReducer = (state = {show: false}, action: RootAction): MenuState => {
    switch (action.type) { // <---- one of the type errors (see below)
        case getType(menuActions.openMenu):
            return {show: true};
        case getType(menuActions.closeMenu):
            return {show: false};
        default:
            return state;
    }
};

Produces:

Property 'type' does not exist on type 'RootAction'.
Property 'type' does not exist on type '{ openMenu: B; closeMenu: B; }'.

I just asked a question in react-app-rewire-typescript-babel-preset to understand how this setup might differ from the one in your sample app. It seems the Babel TypeScript preset isn't using TypeScript at all and as a result there's a few language feature gotchas.

Can you help me determine if it's possible to use typesafe-actions v2.0 with @babel/plugin-transform-typescript rather than standard TypeScript compiler?

[piotrwitek]

I don't know what plugin-transform-typescript does, and sorry to say that but I'm not interested to know that.

For me it's really a simple tsc -p . --watch in the terminal, it works everywhere and always without any issues now and in the future, and I strongly recommend to start using it.

Then you can take JS stuff that tsc throw to out folder and from there it's just you know normal JS.

Closing because it seems that it cannot be solved on my end.

[lnhrdt]

Okay @piotrwitek. Thanks for taking the time to reply.

I sorted out my issue and thought I'd report back here in case other people have a similar issue – it turned out to not have anything to do with my use of @babel/plugin-transform-typescript.

In my IDE settings (I use IntelliJ) the TypeScript interpreter that was configured was too old (2.7.2). By upgrading that (or using the 2.8.1 IDE bundled version) I resolved all my issues using typesafe-actions.

Also worth noting (for anyone searching around) that typesafe-actions works great with @babel/plugin-transform-typescript. I'll write a short blog post writeup about this setup later this week and include the link here. I'd love to help expose more people to typesafe-actions, it's a great tool & approach! Thanks again @piotrwitek for creating it.

[piotrwitek]

Hey @lnhrdt, glad to hear that you solved it with success!
I use vs-code which is the best IDE for TypeScript projects, and it also automatically pick up the TS version from node_modules, so that's why I was confused about this issue :)