Typescript - Respond to 0.14 stateless functional components

A 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 design function for JSX elements.

Note that the error relates to the use of the component (let x be an ad). It seems that perhaps the definition file for React does not allow this as valid JSX? I am using the latest React 0.14 definition file from tsd, what am I doing wrong?


Let's say I defined the following stateless functional component (React v0.14)

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

in another component, I use it as follows:

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

I get this error from typescript compiler:

error TS2605: JSX "" JSX. "render" "" .

? typescript? react.d.ts tsd

+4
3

, .

(.. React.createElement), React.StatelessComponent.

0

error TS2605: JSX "" JSX. "render" "".

TypeScript npm install typescript@latest.

0

typescript @next:

npm install typescript@next --save-dev


@next 1.9.0-dev.20160217.

, react.d.ts react-dom.d.ts... . ​​. typescript 1.7.5, .


: typescript @next ? -save-dev, !, npm, typescript @next --save-dev.

, npm update, , - :

. "^1.6.0-dev.20150818" ( package.json) 1.6.0-dev.20150825, 1.7.0-dev.20150901 npm update

npm --save-dev, package.json, "next" :

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

I personally have not tried it because I like to have full control over the version I am using. Anyway, I rarely run npm update.

0
source

Source: https://habr.com/ru/post/1623969/


All Articles