mithril.js icon indicating copy to clipboard operation
mithril.js copied to clipboard

TypeScript: How to use a generic component in another generic component?

Open kalxd opened this issue 3 years ago • 0 comments

Hi all, I'm using mithril 2.2.2 with tsconfig: "strict: true" and try to implement two generic components:

import * as m from "mithril";

interface Placeholder<T> {
	placeholder: T;
}

const C = <T>(_: m.Vnode): m.Component<Placeholder<T>> => ({
	view: () => {}
});

interface Value<T> {
	value: Placeholder<T>;
}

const D = <T>(_: m.Vnode): m.Component<Value<T>> => ({
	view: ({ attrs }) => m(C, attrs)
});

C is just a empty component that hold the generic interface Placeholder<T>, also the component D but using component C. but it compiled failed:

main.ts:16:25 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type '<T>(_: m.Vnode) => m.Component<Placeholder<T>>' is not assignable to parameter of type 'string'.

16  view: ({ attrs }) => m(C, attrs)
                           ~

  node_modules/@types/mithril/index.d.ts:56:9
    56         (selector: string, ...children: Children[]): Vnode<any, any>;
               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The last overload is declared here.

so I tried to fix the error:

const D = <T>(_: m.Vnode): m.Component<Value<T>> => ({
	view: ({ attrs }) => m<Value<T>, {}>(C, attrs)
});

it failed again. At last it passed when use the type any instead of Value<T>.

Any way, I don't tend to use any explicit, does anyone know how to fix this code without using type any?

thanks a lot.

kalxd avatar Jun 22 '22 12:06 kalxd