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

Question

I am using typescript to write redux application.

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

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

Then typescript complains this:

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

Answer 1

Your component must start with a capital letter I instead of small letter i otherwise TypeScript would yell. Changing item to Item should fix it:

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

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

Answer 2

You can declare your custom element type like this:

import * as React from 'react'

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

Answer 3

That is because your item component's name does not start with a capital letter, causing Typescript to complain. Replacing item with Item could solve this problem.

Answer 4

For anyone else stuck on this.

The solutions was to

rm -rf node_modules
npm install

Typescript complained

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

and

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

I think the root cause was vscode (me) accidentally editing type definitions in node_modules .

Answer 5

It looked like I had the same problem as in this question, but it was typo :/ But I've decided to share that here since error looked very similar and google led me here.

I had typo in declaration:

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

Instead of IntrinsicElements I had IntrinisicElements (extra 'i' letter after 'Intrin'). The compiler didn't complain that because it is definition of interface, so the name can be of our choice.

And the error was like that:

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

Answer 6

Remember: "item" is not valid in TypeScript, you must declare as "Item", UpperCase the first letter! It is will be like:

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

Good day!

Answer 7

This could happen if you just renamed a tag by pressing F2 on it in VSCode, which could change the typing of the tag.

When the rename happened, some index.d.ts file should have opened in a new tab. Check if the tab is still open. The path might be something like .../node_modules/@types/react/index.d.ts .

If you find the tab, go into it, then press ctrl-z (cmd-z) to undo your change.

If you don't see the tab, you probably have closed it. Try to use your hotkey to reopen recently closed tabs. If you don't know the hotkey, use command palette View: Reopen Closed Editor .

Keep doing it until you find the file, then undo your change. (VSCode remembers the change history for undo, even after you close the tab)

Answer 8

我使用 PascalCase 编写组件的名称，然后错误消失