打字稿 - 反应0.14无状态功能组件

Question

Simple example:

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"/>;

Result:

(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 maybe 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?

---

Say I have defined the following stateless functional component (React v0.14)

let GreeterComponent = (props: {name: string}){
    return <div>Hi {props.name}!</div> 
}

in a different component, I am using it like this:

class WrappingComponent extends React.Component{
    render(){
        let names = ['tom', 'john', 'simon'];
        return (
           <div className="names">
               {names.map((name)=> <GreeterComponent name={name} />)}
           </div>
          );
    } 
}

I am getting this error from typescript compiler:

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

How can I fix it? What is the correct to work with stateless functional components in typescript? I am using the latest react.d.ts from tsd

Answer 1

When you define a stateless component, it's a plain and simple function.

When you instantiate it (ie pass it to React.createElement ), it gets wrapped with React.StatelessComponent .

Answer 2

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

That will work fine in TypeScript latest npm install typescript@latest .

Answer 3

I had to install the typescript using @next :

npm install typescript@next --save-dev

At the moment of this answer, the @next version is 1.9.0-dev.20160217 .

In the beginning I though the problem was with the react.d.ts or react-dom.d.ts ... but it was not. The latest version of these are already installed here. But the real problem was I installed typescript version 1.7.5, the latest release.

Some notes about this: as per the blog post Using typescript@next nightly package? Don't rely on –save-dev to be up-to-date! , you cannot rely on npm updating your dependency of typescript to a greater version number after installing with @next and --save-dev .

As they explain, npm update seems not to update from one beta version to the next:

eg The dependency string "^1.6.0-dev.20150818" (inside the package.json ) will have the package updated to 1.6.0-dev.20150825 , but not to 1.7.0-dev.20150901 when running npm update

What they recommend is to change the dependency string that npm --save-dev saved inside your package.json to just "next" to be always with the latest of the latest version:

{
  ...
  "devDependencies": {
    ...
    "typescript": "next",
    ...
  }
}

I personally didn't try it, because I like to have full control over the version I am using. I rarely run npm update anyway.