eclipsesource / eclipsesource/tabris-js

Cannot pass function argument to custom component

Open
#2,263 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
1.4k
Forks
171
PR merge metrics
No merged PRs in 30d

Description

### Problem description

When attempting to pass a function argument to a custom component, the TS compiler raises an error. Example:

```jsx
import { contentView, Composite, Properties } from 'tabris';
import { component, property } from 'tabris-decorators';

export class App {
public start() {
contentView.append(
'foo'} myStringProp='foo'/>,
/**
* Type '{ myFunctionProp: () => string; myStringProp: string; }' is not assignable to type 'JSXCompositeAttributes>'.
* Property 'myFunctionProp' does not exist on type 'JSXCompositeAttributes>'.ts(2322)
*/
new CustomComponent({ myFunctionProp: () => 'foo', myStringProp: 'foo' })
/**
* Argument of type '{ myFunctionProp: () => string; myStringProp: string; }' is not assignable to parameter of type 'Properties'.
* Object literal may only specify known properties, and 'myFunctionProp' does not exist in type 'Properties'.ts(2345)
*/
);
}
}

@component
class CustomComponent extends Composite {
@property public myFunctionProp: () => any;
@property public myStringProp: string;

constructor(properties: Properties) {
super();
this.set(properties);
}
}
```

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

- Tabris.js version: 3.9

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.