How to use it in Typescript about jsx-control-statements

[tomitrescak]

I am using this successfully with Babel 7 (example repo https://github.com/strothj/react-app-rewire-typescript-babel-preset).
Here is the .d.ts file

declare var If: React.SFC<{ condition: boolean }>;
declare var For: React.SFC<{ each: string; index: string; of: Array }>;
declare var Choose: React.SFC;
declare var When: React.SFC<{ condition: boolean }>;
declare var Otherwise: React.SFC;

[avityaz]

For TS you can use ts-control-statements

[KonstantinSimeonov]

I've rolled this that provides the same syntax, but for the typescript compiler.

[AlexGilleran]

Added to readme 😎

[texttechne]

Since this plugin is a Babel plugin you defintely need to use Babel. You have two options:

1. Mature but complex: Use Babel for transpiling JSX code and typescript for transpiling everything else
   • https://www.typescriptlang.org/docs/handbook/jsx.html
2. Beta but promising: Use Babel7 with TS support
   • http://artsy.github.io/blog/2017/11/27/Babel-7-and-TypeScript/

No examples, but maybe a pointer in the right direction?

[danielkcz]

What a shame. I was kinda excited to find this lib expecting it's just set of components that would make my life easier. I am using TypeScript too and I certainly don't want to add Babel into the mix just because of this.

I am not expecting to get a babel free variant here. I am more of curious why this actually need to be a Babel plugin? I mean is there really that much of performance gain by transpiling this?

[AlexGilleran]

The babel plugin isn't actually for performance, it's because the interior of a React component gets executed even if it's not rendered: https://github.com/AlexGilleran/jsx-control-statements/wiki/Why-Transform.

I've been thinking you could do a lot of this with render props at the cost of slightly uglier syntax, but haven't gotten around to it :(.

[danielkcz]

I see now, thanks for the explanation. Haven't really thought about this issue before, it's kinda eye opener :) That link to the wiki should probably be in readme, not many people will check wiki imo.

I was kinda thinking about using this more for a boolean value checks then for existence checks, but I can get away by making my own component for that. Doing this with render props would not probably make sense, it would get too bloated. Personally I have a limit of 2 render prop component in a single jsx tree.

It's a pity that TypeScript plugin system cannot really do what Babel can. It's not possible to extend syntax in any way. Well, perhaps it's a good thing also as it keeps the code consistent without surprises.

[AlexGilleran]

whoa! rad!

[KonstantinSimeonov]

[tomitrescak]

@AlexGilleran would you consider adding the tsx syntac to the for statement?

<For of={names} body={(name, i) => (
        <li key={name}>
            {i}<string>{name}</strong>
        </li>
    )} />

The work of @KonstantinSimeonov is pretty amazing, but it does not allow to be used with babel-loader which effectively makes things complicated around CRA.