使用 React.createClass 时，打字稿抱怨属性在类型 'JSX.IntrinsicElements' 上不存在？

Question

我正在使用 typescript 编写 redux 应用程序。

var item = React.createClass({
  render: function() {
    return (<div>hello world</div>)
  }
});

export default class ItemList extends Component<any, any> {
    render() {
        return (<item />)
    }
}

然后打字稿会这样抱怨：

Property 'item' does not exist on type 'JSX.IntrinsicElements'.

Answer 1

您的组件必须以大写字母 I 而不是小写字母 i 开头，否则 TypeScript 会大喊大叫。将 item 更改为 Item 应该可以修复它：

var Item = React.createClass({
  render: function() {
    return (<div>hello world</div>)
  }
});

export default class ItemList extends Component<any, any> {
    render() {
        return (<Item />)
    }
}

Answer 2

您可以像这样声明您的自定义元素类型：

import * as React from 'react'

declare global {
  namespace JSX {
    interface IntrinsicElements {
      item: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    }
  }
}

Answer 3

那是因为你的 item 组件名称没有以大写字母开头，导致 Typescript 报错。将 item 替换为 Item 可以解决此问题。

Answer 4

看起来我遇到了与这个问题相同的问题，但这是打字错误：/但我决定在这里分享它，因为错误看起来非常相似并且 google 把我带到这里。

我在声明中有错别字：

declare global {
    namespace JSX {
        interface IntrinisicElements {
            'about-me': { me: string }
        }
    }
}

而不是 IntrinsicElements 我有 IntrinisicElements（'Intrin' 之后的额外 'i' 字母）。编译器没有报错，因为是接口的定义，所以名字可以自己选。

错误是这样的：

Property 'about-me' does not exist on type 'JSX.IntrinsicElements'.

Answer 5

对于坚持这个的其他人。

解决方案是

rm -rf node_modules
npm install

打字稿抱怨

Property 'div' does not exist on type 'StyledInterface'.

和

Property 'div' does not exist on type 'JSX.IntrinsicElements'.

我认为根本原因是 vscode（我）不小心编辑了 node_modules 中的类型定义。

Answer 6

我用PascalCase写组件名然后错误消失了

Answer 7

记住：“item”在 TypeScript 中无效，必须声明为“Item”，首字母大写！它会像：

var Item = React.createClass({
  render: function() {
    return (<div>hello world</div>)
  }
});

美好的一天！

Answer 8

如果您只是通过在 VSCode 中按 F2 重命名标签，可能会发生这种情况，这可能会更改标签的类型。

重命名时，某些 index.d.ts 文件应该已在新选项卡中打开。检查选项卡是否仍处于打开状态。路径可能类似于 .../node_modules/@types/react/index.d.ts.

如果您找到该选项卡，请进入它，然后按 ctrl-z（cmd-z）撤消您的更改。

如果您没有看到该选项卡，您可能已经关闭了它。尝试使用热键重新打开最近关闭的标签页。如果您不知道热键，请使用命令面板 View: Reopen Closed Editor.

继续这样做直到找到文件，然后撤消更改。（VSCode 记住撤消的更改历史记录，即使在您关闭选项卡之后）

使用 React.createClass 时，打字稿抱怨属性在类型 'JSX.IntrinsicElements' 上不存在？

Typescript complains Property does not exist on type 'JSX.IntrinsicElements' when using React.createClass?

typescript

reactjs

redux

使用 React.createClass 时，打字稿抱怨 属性 在类型 'JSX.IntrinsicElements' 上不存在？

Typescript complains Property does not exist on type 'JSX.IntrinsicElements' when using React.createClass?

typescript

reactjs

redux

使用 React.createClass 时，打字稿抱怨属性在类型 'JSX.IntrinsicElements' 上不存在？