When attempting to pass a function argument to a custom component, the TS compiler raises an error. Example:
import { contentView, Composite, Properties } from 'tabris';
import { component, property } from 'tabris-decorators';
export class App {
public start() {
contentView.append(
<CustomComponent myFunctionProp={() => 'foo'} myStringProp='foo'/>,
/**
* Type '{ myFunctionProp: () => string; myStringProp: string; }' is not assignable to type 'JSXCompositeAttributes<CustomComponent, Widget<any>>'.
* Property 'myFunctionProp' does not exist on type 'JSXCompositeAttributes<CustomComponent, Widget<any>>'.ts(2322)
*/
new CustomComponent({ myFunctionProp: () => 'foo', myStringProp: 'foo' })
/**
* Argument of type '{ myFunctionProp: () => string; myStringProp: string; }' is not assignable to parameter of type 'Properties<CustomComponent>'.
* Object literal may only specify known properties, and 'myFunctionProp' does not exist in type 'Properties<CustomComponent>'.ts(2345)
*/
);
}
}
@component
class CustomComponent extends Composite {
@property public myFunctionProp: () => any;
@property public myStringProp: string;
constructor(properties: Properties<CustomComponent>) {
super();
this.set(properties);
}
}
Problem description
When attempting to pass a function argument to a custom component, the TS compiler raises an error. Example:
As a workaround, the
jsxAttributes
type can be overwritten, see https://docs.tabris.com/latest/declarative-ui.html#adding-special-attributes.Expected behavior
One should be able to use properties with function types in custom components.
Environment