В Typescript почему JSX.IntrinsicElements не работает, как описано в документации?

Question

Я пытаюсь использовать JSX на стороне сервера, без React.Я следую документам по машинописи о JSX здесь и написал следующее в .tsx файле.

declare namespace JSX {
  interface IntrinsicElements {
    foo: any
  }
}
let elt1 = <foo/>
let elt2 = <bar/>

В связанных документах сказано:

В приведенном выше примере <foo/> будет работать нормально, но <bar/> приведет к ошибке ...

Но для меня они оба приводят к одной и той же ошибке:

Свойство 'foo' не существует для типа 'JSX.IntrinsicElements'.
Свойство 'bar' не существует для типа 'JSX.IntrinsicElements'.

Answer 1

Вам нужно модуль расширения .Я получил ответ от здесь .Попробуйте это:

import React from "react";

declare module "react" {
  namespace JSX {
    interface IntrinsicElements {
      foo: any
    }
  }
}

let elt1 = <foo/>
let elt2 = <bar/>

Демонстрация

Причина, по которой ваш код не работает, заключается в том, что JSX.IntrinsicElements взято из @types/react и повторное выделение пространства имен выиграно 'т работа.Также вы заметите, что ваш код будет работать, если вы не импортируете реакции ( demo ).Расширение модуля в основном расширяет типы @types/react.

Answer 2

Вместо создания пространства имен в файле .tsx попробуйте создать файл global.d.ts в папке src (или там, где вы храните файлы TS).

Это должно служить вашим файлом глобальных интерфейсов, и у вас больше не должно быть этой проблемы.