Typescript return type for mithril components about mithril.js

[osban]

Hello, have you looked here: https://github.com/MithrilJS/mithril.d.ts?

[EverettMcKay]

None of those patterns seem to work for my component shape. I tried this:

const MyComponent = (): m.Component<myAttrs, myState> => ({
  tag: "MyComponent",
  title: "<placeholder>",
  oninit: ({attrs, state}) => {<set title>},
  onbeforeupdate: ({attrs, state}) => {<update title>},
  attrs: () => {},
  state: () => {},
  view: ({attrs, state}) =>
    <p>My component: {state.title}</p>
});

And ts complains about the tag, title, attrs, and state fields:
Object literal may only specify known properties, and 'attrs' does not exist in type 'Component<myAttrs, myState>
But if I remove them, I get

MyComponent ' cannot be used as a JSX component.
  Its return type 'Component<myAttrs, myState>' is not a valid JSX element.
    Type 'Component<myAttrs, myState>' is missing the following properties from type 'Vnode<{}, {}>': tag, attrs, state

It's been awhile since I chose that particular component shape, so I don't know why I chose it...beyond the fact that ts seems to insist on it.

[osban]

I'm not familiar with Typescript, so I can't help you, sorry. Hopefully someone else can.

[sonkwl]

Typescript does not mix with mithril.
mithril is a front-end component that follows ecmascript. typescript is a superset of ecmascript.

[EverettMcKay]

OK, thanks. Will close.

If anyone knows how to make this work, please share. Also, would love to know the recommended way to include JSX.Element, that would really help. I'm asking because the way(s) I tried didn't appear to work (or seemed overly convoluted to be right.)

[dead-claudia]

@EverettMcKay Feel free to ignore that prior comment. It's wrong and they got kicked out for similarly low quality comments in other issues.

Our current recommendation (due to a number of TS type checker-related issues) is to use TSX with m as the pragma and m.Fragment as the fragment component type.

And TS in general currently requires you to specify a return value of JSX.Element for function components (there's an open issue about this, but I'm on mobile), which is incompatible with Mithril's closure components, so our current recommendation is instead to use class components universally.

[EverettMcKay]

Thank you. Could you provide a typescript declaration I could use for JSX.Element? That will take me to the next level (so I don't have to return "any").

[dead-claudia]

Thank you. Could you provide a typescript declaration I could use for JSX.Element? That will take me to the next level (so I don't have to return "any").

That namespace definition should exist by simply importing Mithril, assuming you're using @types/mithril.

[EverettMcKay]

I have confirmed that I have @types/mithril, but when I refer to JSX, I get "'JSX' is not defined". If I import explicitly, I get "Module '"mithril"' has no exported member 'JSX'.".

[EverettMcKay]

Never mind. It was installed, but I installed again (to be sure), and it's working now. Thanks!

[dead-claudia]

Never mind. It was installed, but I installed again (to be sure), and it's working now. Thanks!

If you were just checking in your editor @EverettMcKay, I've had success just restarting the TS server and/or editor in picking up global augments. The language server can be a bit finicky sometimes with that.

[EverettMcKay]

Awesome. Thanks again for your help!

[EverettMcKay]

Weird...the definition of JSX.Element somehow disappeared again. Restarting the TS server did not fix it.

The exact error: 'JSX' is not defined.

[dead-claudia]

@EverettMcKay In any case, you'll get better luck asking around in TS-specific communities instead.

They can help you figure out your setup issue and resolve it for good.