TypeScript：JSX元素类型没有任何构造或调用签名

Question

我正在使用React 16.2.0，TypeScript 2.7.1和任何作为类型。

主要组成部分：

// index.js

import * as React from 'react'
import Page from './page'
import i18n from '../i18n'

import PageContent from '../components/pageContent'
import withMoreInfo from '../hoc/withMoreInfo'

class Home extends React.Component {
  render () {
    return <Page title={ i18n.t('home.title') }>
      <PageContent />
    </Page>
  }
}

export default withMoreInfo(Home)

特别档案：

import * as React from 'react'

export default function withMoreInfo<T> (Wrapped: T) {
  return class WithMoreInfo extends React.Component<{ asPath: string }> {
    static async getInitialProps ({ asPath }: { asPath: string }) {
      return { asPath }
    }

    render () {
      const { asPath } = this.props
      const language = asPath.indexOf('/ro') === 0 ? 'ro' : 'en'
      return <Wrapped language={ language } pathname={ asPath } />
    }
  }
}

我无法解决此错误：error #TS2604: JSX element type 'Wrapped' does not have any construct or call signatures.

非常感谢任何提示。 谢谢，保罗

Answer 1

您需要告诉编译器该参数是一个构造函数，并返回一个具有属性language和pathname

的React组件

function withMoreInfo<T extends React.Component<{ language: string, pathname: string }, any>>(Wrapped: new (props: { language: string, pathname: string }, context?: any) => T) {
    return class WithMoreInfo extends React.Component<{ asPath: string }> {
        static async getInitialProps({ asPath }: { asPath: string }) {
            return { asPath }
        }

        render() {
            const { asPath } = this.props
            const language = asPath.indexOf('/ro') === 0 ? 'ro' : 'en'
            return <Wrapped language={language} pathname={asPath} />
        }
    }
}
// The component must have properties language and pathname and only those
class Home extends React.Component<{ language: string, pathname: string }> {
    render() {
        return <div />
    }
}

export default withMoreInfo(Home)

在您调用withMoreInfo(Home)的原始版本中，T确实是一个反应组件，但是您可以在调用withMoreInfo(1)之后调用T没有办法限制。对于传递给它的任何类型，泛型函数必须是正确的，因此编译器认为T可能是任何东西，所以它可以可靠地说不出来。 解决方案是让编译器知道Wrapped参数是反应组件的构造函数，即具有属性T的任何反应组件{ language: string, pathname: string }。构造函数与常规函数具有类似的签名声明，只有new关键字，因此new (props: { language: string, pathname: string }, context?: any) => T

Answer 2

在此处放置一个答案，因为它通常与错误有关。

我在类型定义中缺少public class Patient { private String patientfirstName; private String patientLastName; private List<String> allergyList; public Patient(String patientfirstName, String patientLastName, List<String> allergyList) { this.patientfirstName = patientfirstName; this.patientLastName = patientLastName; this.allergyList = allergyList; } *Patient patientobj = new Patient("sean","john","allegry1");*// this is wrong you have to pass a list not the string. you should do something like this: // first create a list and add the value to it List<String> list = new ArrayList<>(); list.add("allergy1"); // now create a object and pass the list along with other variables Patient patientobj = new Patient("sean","john",list); 。

new文件：

some-js-component.d.ts

并在我尝试导入无类型组件的import * as React from "react"; export default class SomeJSXComponent extends React.Component<any, any> { new (props: any, context?: any) } 文件中：

tsx