React stateless functional components

[Shadowfaxenator]

let ByComponentIoS = ({ name: string })=> <h1>{name}</h1>

export default class ByComponent extends React.Component<IByComponentProps,{}> { 

    constructor(props: IByComponentProps) {
        super(props);    
    }
    render() {
        return <ByComponentIoS name="test"/>

    }
}

I get error TS2605: JSX element type 'Element' is not a constructor function for JSX elements.Property 'render' is missing in type 'Element'.

How to fix it?

[Lenne231]

I haven't tried your example but ByComponentIos has a wrong signature. You have to use

let ByComponentIoS = ({ name } : { name : string })=> <h1>{name}</h1>

[Shadowfaxenator]

Could you explain why?

[Lenne231]

You can take a look at the JS output: http://www.typescriptlang.org/Playground#src=let%20ByComponentIoS%20%3D%20(%7B%20name%20%3A%20string%20%7D)%20%3D%3E%20%22%22%3B%0D%0A

It seems to use destructuring to extract "name" from the parameter and give it the name "string".

[Lenne231]

https://blog.mariusschulz.com/2015/11/13/typing-destructured-object-parameters-in-typescript

[wereHamster]

Still, the error remains. TSX in 1.6 doesn't seem to support stateless functional components. Is there a plan to add support for those?

[RyanCavanaugh]

#5596 will implement support for them

[tomenden]

@RyanCavanaugh Was this issue ever solved? Can you help with this perhaps? - http://stackoverflow.com/questions/34749564/typescript-react-0-14-stateless-functional-components/34752460

[RyanCavanaugh]

@tomenden the posted code has both syntactic and (unrelated) semantic errors, and the shown error refers to an identifier that isn't even in the provided code. I don't think that question can be answered as written today.

[tomenden]

@RyanCavanaugh OK, I will fix it, was written real quickly and perhaps without enough attention, my apologies. Could you please clarify how you would write in Typescript the following example from the official React Docs:

var Aquarium = ({species}) => (
  <Tank>
    {getFish(species)}
  </Tank>
);
// Then use: <Aquarium species="rainbowfish" />

I see a similar issue open here - DefinitelyTyped/DefinitelyTyped#7468

[RyanCavanaugh]

@tomenden that is literally the code you would write.

Expanded self-contained example:

declare function getFish(x: any): any;
declare var Tank: any;

var Aquarium = ({species}) => (
  <Tank>
    {getFish(species)}
  </Tank>
);
// OK
let x = <Aquarium species="rainbowfish" />
// Error
let y = <Aquarium specie="rainbowfish" />

C:\github\TypeScript>node built\local\tsc.js --jsx preserve a.tsx C:\github\DefinitelyTyped\react\react-global.d.ts a.tsx(12,9): error TS2324: Property 'species' is missing in type 'IntrinsicAttributes & { species: any; }'.

[tomenden]

@RyanCavanaugh - thank you for your replies, I appreciate your help.
I tried a minimal example and just copied what you provided, and I still can't get it to work:

import * as React from 'react'
declare function getFish(x: any): any;
declare var Tank: any;

var Aquarium = ({species}) => (
  <Tank>
      {getFish(species)}
  </Tank>
);
let x = <Aquarium species="rainbowfish"/>;

I still get this error:
(10,9): error TS2605: JSX element type 'Element' is not a constructor function for JSX elements.

Note the error is in regards to the usage of the Component (let x declaration). It seems as if the definition file for React is not allowing this as a valid JSX. I am using the latest React 0.14 definition file from tsd, what am I doing wrong?

Thanks

[tomenden]

@RyanCavanaugh - Sorry for the misunderstanding, I just noticed now that this issue is marked as Typescript 1.8 milestone, and I am currently using the last stable release (1.75), since the combination of tslint and tslint-loader for webpack require this. I just tested the lines of code using the nightly builds (typescript@next) and it works

[RyanCavanaugh]

Thanks for the follow-up -- glad the nightly build is working for you. Let me know if you see anything weird there.