Typescript: Тип элемента JSX не имеет никаких конструкций или сигнатур вызовов в v3.2.0-rc

Здесь отсутствует остальная часть сообщения об ошибке, но для уверенности убедитесь, что вы используете последнюю версию @types/react и что в вашем node_modules или файле блокировки не осталось дубликатов.

EDIT: вы, вероятно, хотите использовать ComponentType, а не ReactType

@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 ...

Похоже, проблема связана с новыми изменениями "дискриминантов, допускающих значение NULL". Похоже, 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 имеют _схожие типы_, но 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, спасибо 👍 Теперь вопрос с назначением мне понятен, а как насчет этого?

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_ (плюс 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, потому что ошибка «index not found», которую он должен был выдать, никогда не возникала.

Эта проблема была отмечена как повторяющаяся, и за последний день по ней не было никаких действий. Он был закрыт для автоматического ведения хозяйства.

Возникла проблема, которая может быть связана. У меня есть следующий компонент:

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

   return <TagName>Woookie</TagName>
}

что приводит к

error TS2604: JSX element type 'TagName' does not 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 .

Используя последнюю версию @ types / react и @ types / react-dom, и проверил проблему в машинописных текстах 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

Я получил эту ошибку, потому что я импортировал default, но объявил соответствующий экспорт как named вместо default в файле .d.ts ... на некоторое время меня смутил

Просто хотел добавить это сюда. Не уверен, что это уже было сказано, но если вы выполняете компонент заказа найма, вы хотите использовать тип React.ComponentType

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

@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>

    )

}

Круто! Какую версию Typescript и какую версию @ types / response вы установили?

@ericmasiello

Круто! Какую версию Typescript и какую версию @ types / response вы установили?

[email protected]
@ типы / [email protected]

Я решил эту проблему, выполнив одно из этих двух действий:

Случай 1:

.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
}

niu b