Is there support for TypeScript and JSX/TSX syntax?

[Vazerthon]

Hey folks, I've been playing with Mithril for the first time, trying to set up a basic project. I'm coming from React and TSX so trying to keep things as familiar as possible as I get started but I'm seeing a lot of TypeScript errors that I don't know how to resolve. The app does compile and run though, so that's cool :metal:

Am I trying to do something that's not supported? Or is there something I should be changing? Any help much appreciated!

I have a demo repo here - https://github.com/Vazerthon/mithril-test

In Test.tsx I'm trying to use mithril-tsx-component but I get

Property '__tsx_attrs' is missing in type '{ view: () => JSX.Element; }' but required in type 'MithrilTsxComponent<IFooCompAttrs>'.ts(2741)

import * as m from "mithril";
import { MithrilTsxComponent } from "mithril-tsx-component";

export interface IFooCompAttrs {
  attrs: {};
}

export function Test({}: IFooCompAttrs): MithrilTsxComponent<IFooCompAttrs> {
  return {
    view: () => <div>Hello World!</div>,
  };
}

In Button.tsx I tried a plain approach but got a different error

'Btn' cannot be used as a JSX component. Its instance type 'Button' is not a valid JSX element. Type 'Button' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.ts(2786)

import * as m from "mithril";
import { Button as Btn } from "construct-ui";

interface Attrs {
  attrs: {
    onclick: () => void;
  };
}

function Button({ attrs: { onclick } }: Attrs): m.Component<Attrs> {
  const state = {
    count: 0,
  };

  const handleClick = () => {
    state.count++;
    onclick();
  };

  return {
    view: () => (
      <Btn onclick={handleClick} fluid label={`Click me (${state.count})`} />
    ),
  };
}

export default Button;

And in App.tsx all custom components complain something along the lines of

'Button' cannot be used as a JSX component. Its return type 'Component<Attrs, {}>' is not a valid JSX element. Type 'Component<Attrs, {}>' is missing the following properties from type 'Element': tag, attrs, state, type, propsts(2786)

[thequailman]

hey there, one issue I see is with your attrs:

interface Attrs {
  attrs: {
    onclick: () => void;
  };
}

should be :

interface Attrs {
  onclick: () => void;
}

The interface you define is assumed to lived under attrs (vnode.attrs.onclick)

See if that helps. I don't use JSX/TSX so I can't comment on that bit. hyperscript is love, hyperscript is life.

[aychernov]

JSX element type 'HeaderComponent' does not have any construct or call signatures. Do you gets this error?