JSX: a way to make all the properties of value-based elements optional

[thorn0]

It's not documented, but currently, if the JSX.ElementAttributesProperty interface is declared empty,

declare namespace JSX { interface ElementAttributesProperty {} }

then the element attributes type becomes same as the element instance type. However, if the element instance type is a class, this leads to a situation where the compiler requires that all the members of the class be represented as attributes since they're not optional (and even cannot be marked as such as the class syntax doesn't allow optional members).

class MyComponent {
  myProp: string;
  private myMethod(): void;
}
var a = <MyComponent myProp='value'/>;
// error: Property 'myMethod' is missing in type MyComponent

This prevents me from using JSX for type-checking Angular 1 templates (you can find my experiments in this area here).

What if we introduce some way to tell the compiler that not all the properties are required, but only some of them? E.g. those having a certain decorator?

A related issue: #5151

[mhegazy]

So what is the proposal?

[RyanCavanaugh]

I think we could reasonably say that private / protected members get ignored when checking against the element attributes type.

[thorn0]

Probably something like

declare namespace JSX { interface ElementOptionalAttributesProperty {} }

All the properties would be considered optional. Not ideal but could be a good start.

Ideally, I'd like to use decorators to mark required properties, like @Input and @Output in Angular 2. But I can't think of a good way to tell the compiler about such rules.

[RyanCavanaugh]

Discussed at the backlog slog today. There are a lot of scenarios here that would be helped by this, but the technical implications of the first type operator are very large. Some more notes are at #8228. We're continuing to think about it.

Just in terms of setting expectations, this isn't going to be something we can do in time for TypeScript 2.0