Typescript: Stateless function components for jsx

[Lenne231]

ReactJS gets stateless function components https://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html

How does it work with the current JSX support in TypeScript? It would be nice if something like this would work as well:

[mhegazy]

//cc: @RyanCavanaugh

[Lenne231]

const Headline = (title: string) => <h1>{title}</h1>; doesn't make sense because JSX attributes have names and parameters of a function not.

But const Headline = (props : { title: string }) => <h1>{props.title}</h1>; should work!

[RyanCavanaugh]

This needs a spec if we're going to do automatic inference from it.

As @Lenne231 points out, the example posted doesn't seem to be how it works.

Given the example from the release notes:

var Aquarium = ({species}) => (
  <Tank>
    {getFish(species)}
  </Tank>
);

We could type this fairly easily:

// Put this somewhere
interface ReactStateless<T> extends React.Component<T, {}> {
  (props: T): JSX.Element;
}

var Aquarium: ReactStateless<{species: string}> = ({species}) => (
  <Tank>
    {getFish(species)}
  </Tank>
);

[Lenne231]

Is there a reason why we are currently not inferring the valid JSX components and the matching JSX properties from the React.createElement function? Don't we have all information we need?

type JSX = typeof React.createElement

// Type of valid JSX components: type of the first parameter of JSX
// Type of matching JSX properties: first generic parameter of JSX

[Lenne231]

There will probably be a third kind of component in the future, so it would be nice if the implementation is flexible enough to handle that:

https://github.com/reactjs/react-future/blob/master/07%20-%20Returning%20State/04%20-%20Callback%20Chaining.js

[RyanCavanaugh]

Fleshing out the design at #5478