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

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