Skip to content

Generic components fail to typecheck #2895

@runarberg

Description

@runarberg

Stencil version:

 @stencil/core@2.5.1 

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

When you try to compile a component that has a generic type based on a property type it fails to compile:

[ ERROR ] TypeScript: ./src/components.d.ts:152:17 Cannot find name 'Data'. L151: */ L152: "data": Data[]; L153: /** 

Expected behavior:

The component should compile without issues

Steps to reproduce:

Related code:

If I have a component, say a table-like component that operates on generic types (e.g. emits events of said types), is it possible to make it generic?

@Component(/* ... */) export class MyTable<Data> { @Prop() data: Data[] = []; get result(): Data[] { // data will be sorted, filtered and sliced } // Pass the result to parent. @Event() update: EventEmitter<Data[]> }

Now when a consumer sets the data property of <my-table> to say Pokemon you would expect e.g. the update event to reflect that.

type Pokemon = { name: string; type: string; cp: number; }; const pokemon: Pokemon = [ { name: 'Pikachu', type: 'Electric', cp: 500 }, { name: Magikarp, type: 'Water', cp: 23 }, ]; myTable.data = pokemon; myTable.addEventListener('update', (event) => { // `event.detail` and `event.target.result` should be of type `Pokemon[]` });

Other information:

This is only a minor annoyance as it is trivial to use unknown in this case. But it could offer a nice quality of life if fixed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Help WantedResolution: RefineThis PR is marked for Jira refinement. We're not working on it - we're talking it through.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions