Typescript: JSX तत्व प्रकार में v3.2.0-rc में कोई निर्माण या कॉल हस्ताक्षर नहीं हैं

यह त्रुटि संदेश के बाकी हिस्सों को याद कर रहा है लेकिन, सुनिश्चित करने के लिए, सुनिश्चित करें कि आप @types/react के नवीनतम संस्करण पर हैं और आपके नोड_मॉडल या लॉक फ़ाइल में इसके आसपास कोई डुप्लिकेट नहीं बचा है।

संपादित करें: आप शायद कॉम्पोनेन्ट टाइप का उपयोग करते हैं और रिएक्ट टाइप का नहीं

@Kovensky

मैंने नवीनतम @types/react 16.7.7 और कोई डुप्लिकेट @types/react yarn.lock का उपयोग करके सुनिश्चित नहीं किया है।
यदि समस्या @types/react के दोहराव के कारण है, तो यह Duplication of definition ... त्रुटि को लौटा देगा।

मैं वापस "typescript": "^3.1.6" वापस लौटता हूं तब यह सामान्य रूप से काम करता है।

टाइपस्क्रिप्ट 3.2.1

अन्य उदाहरण

interface P1 {
  p?: boolean
  c?: string
}

interface P2 {
  p?: boolean
  c?: any // if you replace c with string, error goes away
  d?: any
}

declare var C: React.ComponentType<P1> | React.ComponentType<P2>


const a = <C p={true} /> // element does not have any ...

ऐसा लगता है, समस्या नए "अशक्त भेदभावियों" परिवर्तनों से संबंधित है। ऐसा लगता है कि ts उन प्रकारों के लिए सामान्य इंटरफ़ेस नहीं ढूँढ सकता है।
अन्य उदाहरण

interface P1 {
  p?: any
  c?: string // remove this and it's ok
}

interface P2 {
  p?: boolean
}

हमारे पास एक समान समस्या है, त्वरित उदाहरण:

import * as React from 'react'

//
// Types
//

interface Config<P> {
  ElementType: React.ReactType<P>
}

interface EmptyProps {
}

interface Props {
  a?: string
}

type HProps = {
  configEmpty: Config<EmptyProps>,
  config: Config<Props>
}

//
// Component
//

const H: React.FC<HProps> = ({ config, configEmpty }) => {
  const A: React.ReactType<EmptyProps> = configEmpty.ElementType // assigned
  const B: React.ReactType<EmptyProps> = 'div' // assigned

  const C: React.ReactType<Props> = config.ElementType // assigned
  const D: React.ReactType<Props> = 'div' // in this case assignment failed

  return (
    <div>
      <A/> {/* TS2604: JSX element type 'A' does not have any construct or call signatures. */}
      <B/>

      <C/>
      <D/>
    </div>
  )
}

export default H

मैं इस व्यवहार को पूरी तरह से अमान्य देखता हूं, क्योंकि A और B समान प्रकार हैं । एक ही समय में, B और D _similar type_ है, लेकिन D असाइन करने योग्य नहीं है

रेपो में कोड: https://github.com/layershifter/ts-issue

वे नहीं करते हैं, क्योंकि आप const का उपयोग कर रहे हैं। A का प्रकार typeof configEmpty.ElementType , लेकिन B का प्रकार 'div' । let s का उपयोग दोनों पर समान व्यवहार दिखाएगा।

@Kovensky क्या A और C ? C कार्य क्यों करते हैं जबकि A does not have any construct त्रुटि के साथ विफल हो जाते हैं?

ऐसा इसलिए है क्योंकि मैंने उन घटकों को बाहर करने के लिए ReactType के प्रकार में सुधार किया है जो आप उसे देने वाले प्रॉप्स को प्राप्त करने में सक्षम नहीं होंगे। क्योंकि DOM तत्वों में से कोई भी { a: string | undefined } प्राप्त नहीं कर सकता है, वे सभी को बाहर रखा गया है, और केवल फ़ंक्शन / वर्ग घटकों को अभी भी इसे असाइन करने की अनुमति है।

@Kovensky आपको धन्यवाद the अब असाइनमेंट के साथ मुद्दा मेरे लिए स्पष्ट है, लेकिन इस बारे में क्या?

import * as React from 'react'

//
// Types
//

interface Config<P> {
  ElementType: React.ReactType<P>
}

interface Empty {}
interface Props { a?: string }

type HProps = {
  configEmpty: Config<Empty>,
  config: Config<Props>
}

//
// Component
//

const H: React.FC<HProps> = ({ config, configEmpty }) => {
  const A: React.ReactType<Empty> = configEmpty.ElementType // is React.ReactType<Empty>
  const B: React.ReactType<Empty> = 'div' // is string
  const C: React.ReactType<Props> = config.ElementType // is React.ReactType<Props>

  return (
    <div>
      {/* React.ReactType<Empty> */} <A/> {/* <--- TS2604: JSX element type 'A' does not have any construct or call signatures. */}
      {/* React.ReactType<Empty> */} <B/>
      {/* React.ReactType<Props> */} <C/>
    </div>
  )
}

export default H

A और B में समान रूप से परिभाषित प्रकार हैं, A विफल क्यों हैं? यह वास्तव में भ्रमित करने वाली बात है।

मैं शायद कहूंगा @rexpan और @goloveychuk की त्रुटि # 28795 और # 28768 कंडीशनल JSX कंस्ट्रक्टर पर आधारित है।

हम्म, इसलिए मुद्दा यह है कि ReactType<any> _every बिलिन jsx tag_ का एक संघ देता है (प्लस ComponentType<any> , लेकिन वह हिस्सा समस्याग्रस्त नहीं है), और उन घटकों के लिए हस्ताक्षर तुच्छ रूप से सरल नहीं करते हैं (वहाँ है) एक हस्ताक्षर नहीं है जो पूरी तरह से अन्य सभी को शामिल करता है)। यह भी # 7294 पर निर्भर करता है। प्लस साइड पर, इन सभी JSX मुद्दों के लिए ठीक करने के लिए आवश्यक अंतर्निहित परिवर्तन समान है।

संदर्भ के लिए, हम प्रभावी रूप से इस प्रकार का निर्माण करते हैं:

declare const JsxSigs: {[K in keyof JSX.IntrinsicElements]: ((props: JSX.IntrinsicElements[K]) => JSX.Element)}[keyof JSX.IntrinsicElements];

जो अद्वितीय हस्ताक्षर के एक टन के संघ होने के रूप में समाप्त होता है।

इससे पहले कि मैं इसे सभी बिलिन jsx टैग्स का एक संघ बना देता, यह _just_ string | ComponentType<any> था, जो कि और भी बुरा था।

ऐ, विशेष रूप से 3.2 से पहले, टैग में string प्रकार केवल चुपचाप _Disabled_ typechecker, क्योंकि "इंडेक्स नहीं मिला" त्रुटि यह जारी करने वाला था कि यह कभी नहीं हुआ था।

इस मुद्दे को एक डुप्लिकेट के रूप में चिह्नित किया गया है और अंतिम दिन में कोई गतिविधि नहीं देखी गई है। यह स्वत: गृह-रखने के उद्देश्यों के लिए बंद कर दिया गया है।

एक समस्या है कि संबंधित हो सकता है में चल रहा है। मेरे पास निम्नलिखित घटक हैं:

function MaybeLabel(props: { useLabel: boolean }) {
   const { useLabel } = props;
   const TagName = useLabel ? 'label' : 'div';

   return <TagName>Woookie</TagName>
}

जिसके परिणामस्वरूप

error TS2604: JSX element type 'TagName' does नहीं have any construct or call signatures.

जबकि

function MaybeLabel2(props: { useLabel: boolean }) {
   const { useLabel } = props;
   const TagName = useLabel ? 'span' : 'div';

   return <TagName>Woookie</TagName>
}

टाइपस्क्रिप्ट कंपाइलर के लिए पूरी तरह से स्वीकार्य है। जैसा है:

export function MaybeLabel3(props: { useLabel: boolean }) {
    const { useLabel } = props;
    const TagName = useLabel ? 'label' : 'div';

    return React.createElement(TagName, 'Wookie')
}

कहाँ में फर्क सिर्फ इतना है MaybeLabel2 है कि मैं का उपयोग कर रहा है span के बजाय label (का उपयोग कर span के बजाय div भी स्वीकार्य लगता है )। MaybeLabel3 इसे और भी अधिक अजनबी बनाता है, जैसा कि ठीक यही होना चाहिए कि MaybeLabel संकलन हो।

@ प्रकार / प्रतिक्रिया और @ प्रकार / प्रतिक्रिया-डोम के नवीनतम संस्करण का उपयोग करना, और टाइपोग्राफी 3.2.1, 3.2.2 और 3.3.0-dev.20181219 में समस्या को सत्यापित करना। 3.1.6 में यह सब अपेक्षा के अनुसार काम करता है (उदाहरणों में से कोई भी त्रुटि उत्पन्न नहीं करता है)

मेरे लिए समाधान था:

export type WrapperProps = {
    mainApp: React.ElementType
}

@ TacB0sS कृपया विस्तृत करें।

मुझे धागा गलत समझा जा सकता है, लेकिन मैं एक jsx तत्व का संदर्भ किसी अन्य jsx तत्व में देना चाहता था:

export const AppWrapper = hot(module)((props: WrapperProps) => {

    const MainApp = props.mainApp;
    if (!MainApp)  // <-- JSX elements MUST start with upper case!!
        throw new ImplementationMissingException("mainApp was not specified!!");

    return (
        <Router history={BrowserHistoryModule.getHistory()}>
            <MainApp prop1={"value"}/>
        </Router>)
});

के साथ साथ:

export type WrapperProps = {
    mainApp: React.ElementType<{prop1:string}>
}

@ TacB0sS मेरे लिए मुख्य ट्रिक if कंडीशन जोड़ रही थी। ऐसा लगता है कि आप React.ComponentType या React.ElementType

मुझे यकीन नहीं है कि मैं इसके परिणाम को समझता हूं। मेरे पास एक समान त्रुटि है जिसे मैं हल करने में सक्षम नहीं हूं। यहाँ मेरा उपयोग मामला है:

// Logo.tsx

import classNames from 'classnames';

interface Props extends React.HTMLAttributes<HTMLElement> {
  tag?: React.ReactType;
}

const Logo: React.SFC<Props> = props => {
  const { tag: Tag = 'div', className, ...rest } = props;
  return (
    <Tag
      className={classNames(styles.logo, className)}
      {...rest}
      dangerouslySetInnerHTML={{ __html: logo }}
    />
  );
};

और फिर मैं इसका उपयोग दूसरे घटक में इस तरह कर रहा हूँ जैसे:

const Header: React.SFC<{}> = () => {
  return (
    <div>
      <Logo tag="h1" aria-label="Syn By Design: Eric Masiello's Portfolio" />
      Header online
    </div>
  );
};

जब मैं संकलक चलाता हूं, तो मुझे यह त्रुटि मिलती है:

components/Logo.tsx:13:6 - error TS2604: JSX element type 'Tag' does not have any construct or call signatures.

13     <Tag
        ~~~


Found 1 error.

किसी भी विचार कैसे यह काम करने के लिए?

के बजाय Component , का उपयोग ComponentClass

मुझे यह त्रुटि मिली क्योंकि मैंने डिफ़ॉल्ट आयात किया था लेकिन .d.ts फ़ाइल में डिफ़ॉल्ट के बजाय संबंधित निर्यात घोषित किया गया था ... थोड़ी देर के लिए मुझे भ्रमित कर दिया

बस यहीं जोड़ना चाहते थे। यकीन नहीं होता कि यह पहले से ही कहा गया था, लेकिन यदि आप एक हायर ऑर्डर कंपोनेंट कर रहे हैं तो आप टाइप करना चाहते हैं React.ComponentType

। " https://flow.org/en/docs/react/types/#toc -react-Componentstype"

@ericmasiello मैं एक गतिशील रूप से घटक में पारित करने के लिए React.ElementType का उपयोग कर समाप्त हो गया। मेरा उपयोग मामला मूल रूप से निम्नलिखित है:

type Props = {
    heading: React.ElementType
}
const Header: FC<Props> = props => {
    const Header = props.heading ?? 'h2';
    return (
        <Header className="some-class"><children /></Header>
    )
}

@ericmasiello मैं एक गतिशील रूप से घटक में पारित करने के लिए React.ElementType का उपयोग कर समाप्त हो गया। मेरा उपयोग मामला मूल रूप से निम्नलिखित है:

type Props = {

    heading: React.ElementType

}

const Header: FC<Props> = props => {

    const Header = props.heading ?? 'h2';

    return (

        <Header className="some-class"><children /></Header>

    )

}

ठंडा! टाइपस्क्रिप्ट के किस संस्करण और आपके द्वारा स्थापित @ प्रकार / प्रतिक्रिया का कौन सा संस्करण है?

@ericmasiello

ठंडा! टाइपस्क्रिप्ट के किस संस्करण और आपके द्वारा स्थापित @ प्रकार / प्रतिक्रिया का कौन सा संस्करण है?

[email protected]
@ प्रकार / प्रतिक्रिया@16.9.49

मैंने इन दो चीजों में से किसी एक को करके इस समस्या को हल किया:

मामला एक:

.d.ts फ़ाइल:

declare module "foo" {
   interface PropFoo {
      propy: string;
   }

   class MyTypedComponent extends React.Component<PropFoo> { }
}

प्रतिक्रिया:

import MyTypedComponent from "foo";

function AnotherComponent() {

   /* Notice in here we have to use the dot operator and reference the component */
   return <MyTypedComponent.MyTypedComponent /> 
}

ध्यान दें कि, नए टाइप किए गए घटक का उपयोग करने के लिए, हमें _MyTypedComponent.MyTypedComponent_ लिखना होगा। यह कुछ लोगों के लिए स्पष्ट हो सकता है, लेकिन मैंने बहुत समय बर्बाद किया जब मुझे करना था कि आयात पर डॉट ऑपरेटर का उपयोग करना और घटक को संदर्भित करना था।

केस 2 [केस 1 लिखने का एक और तरीका]:

.d.ts फ़ाइल:

declare module "foo" {
   interface PropFoo {
      propy: string;
   }

   export default class MyTypedComponent extends React.Component<PropFoo> { } //Notice the export default in here
}

प्रतिक्रिया:

import MyTypedComponent from "foo";

function AnotherComponent() {

   /* Since this component is default exported, no need to use the dot operator */
   return <MyTypedComponent /> 
}

सू, मूल रूप से, अपने निर्यात, डिफ़ॉल्ट निर्यात और आयात की जांच करें और सुनिश्चित करें कि आप सही ढंग से संदर्भित कर रहे हैं।

मुझे अपनी अंग्रेजी पर बहुत खेद है और मुझे आशा है कि इससे मदद मिलेगी।

मेरे लिए समाधान था:

export type WrapperProps = {
  mainApp: React.ElementType
}

नीउ ब