Support typing for extra fields in component instance

[LastLeaf]

When adding a custom field in a component (defined with definition API), its type is hard to specify.

Solution 1

Add a definition field for specifying types for the extra fields, e.g.

componentSpace.defineComponent({
  extraThisFieldsType: undefined as unknown as { /* SOME CUSTOM FIELDS TYPE */ }
})

The data type of extraThisFieldsType can be merged into ThisType of the component.

Solution 2

Add another initiation function, which returns some fields that will be written into this (of the method caller, if any), e.g.

componentSpace.defineComponent({
  extraThisFields: () => { /* SOME CUSTOM FIELDS */ }
})

If some fields cannot be set during initiation, its type should be given manually, e.g.

componentSpace.defineComponent({
  extraThisFields: () => {
    delayedField: undefined as SomeType | undefined
  }
})

Solution 3

Add a sopport for chaining only.

componentSpace.define()
  .extraThisFieldsType<{ delayedField: SomeType }>()
  .registerComponent()

This requires a polyfill to run on legacy framework, and requires more code changes.