Using lookahead to detect generic JSX elements?

[dead-claudia]

Initially from a couple different comments, but elaborated here.

Currently, in order to use a generic JSX element, you must alias both the type and interface to a non-generic specialization.

class Select<T> extends React.Component<SelectProps<T>, any> {}

// Alias
type StringSelect = new () => Select<string>
const StringSelect = <StringSelect> Select

const Form = () => <StringSelect items={['a','b']} />

It would be a lot more convenient and consistent to use something like this:

const Form = () => <Select<string> items={['a', 'b']} />

In order to differentiate the latter, you can use a single token of lookahead in the parser to know if it's a generic JSX element:

• If the next token is a <, like in < Select <, then consume the rest of the type as a generic type. After consuming that:
  • If the next token is a >, then finish the type as a generic type cast.
  • If the next token is an identifier or a { (for spread attributes, when they get implemented), then parse the rest as a JSX element.
  • Otherwise, parse the rest as a type cast.
• If the next token is a >, like in < Select >, then finish the type as a simple type cast.
• If the next token is an identifier or a {, then parse the rest as a JSX element.
• Otherwise, consume the rest as a type cast.

I don't know of any reason that wouldn't be feasible to do, considering async arrow functions, which are already implemented, require potentially a whole call expression of parsing to differentiate between let f = async (x, y), which is a call expression, and let f = async (x, y) => x, which is an async arrow function. (I feel sorry for whoever ends up implementing that in V8, which doesn't support any backtracking or much lookahead for memory reasons.)

/cc @RyanCavanaugh

[RyanCavanaugh]

We've gotten this request a number of times and it does seem reasonable in terms of parsing.

[RyanCavanaugh]

Accepting PRs.

This should be easy to parse but I think it's going to be some rather difficult work in the checker.

[stepancar]

@RyanCavanaugh whats status of this issue?
It's very impotant functionality.

import * as React from 'react';

interface MyTestProps<T> {
    values: Array<T>;
    selectHandler: (selectedVal: T) => void;
}

export class MyTest<T> extends React.Component<MyTestProps<T>, {}> {

    render() {
        return (
            <ul>
                { this.props.values.map(val =>
                    <li>{val}</li>
                ) }
            </ul>
        );
    }
}

class TestMyTest extends React.Component<{}, {}> {
    render() {
        return (
            <MyTest values={[1, 2, 3, 4]} selectHandler={(val) => { } } />
        );
    }
}

compiler throws error "type number[] is not assignable to type T[]"

But in this example

import * as React from 'react';

interface MyTestProps<T> {
    values: Array<T>;
    selectHandler: (selectedVal: T) => void;
}

export class MyTest<T> extends React.Component<MyTestProps<T>, {}> {

    render() {
        return (
            <ul>
                { this.props.values.map(val =>
                    <li>{val}</li>
                ) }
            </ul>
        );
    }
}

new MyTest({ values: ['a', 'b'], selectHandler: (v) => { v.length } });

selectHandler param v have type string;

[donaldpipowitch]

@RyanCavanaugh Could this be part of a future planned milestone? 2.1 or 2.2?

Maybe a nicer API as workaround: we introduce a static function of on components with generics:

import React, { Component } from 'react';
interface FooProps<T> {
  data: T;
  someCallback: (data: T) => void;
}

class Foo<T> extends Component<FooProps<T>, void> {
  // `of` is created here
  static of<T>() {
    return Foo as new () => Foo<T>;
  }

  render() {
    // make something with this.props.data here...
    return (
      <div onClick={() => this.props.someCallback(this.props.data)}>
        Click me!
      </div>
    );
  }
}

interface CoolData {
  baz: string;
}

const coolData: CoolData = {
  baz: 'Hello'
};

// `of` is used here
const FooWithCoolData = Foo.of<CoolData>();

const Bar = () =>
  <FooWithCoolData
    data={coolData}
    someCallback={data => console.log('I know data is CoolData here!')}
  />;

Or if we don't want to use <T> syntax, but use the actual object, we do this (I'm still surprised this works):

// new `of` inside `class Foo<T>`
  static of<T>(t: T) {
    return Foo as new () => Foo<T>;
  }

// new usage of `of`
const FooWithCoolData = Foo.of(coolData);

[RyanCavanaugh]

We'll be basically redoing JSX typechecking in 2.1 or 2.2 and can probably look at this at that time.

[donaldpipowitch]

Cool. Thank you for the update! :)