stenciljs/core

Generic components fail to typecheck

Open

#2 895 ouverte le 28 avr. 2021

Voir sur GitHub
 (8 commentaires) (8 réactions) (0 assignés)TypeScript (844 forks)auto 404
Help WantedResolution: Refine

Métriques du dépôt

Stars
 (13 111 stars)
Métriques de merge PR
 (Métriques PR en attente)

Description

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.

Guide contributeur