Typescript: TSX rejects custom elements

[jamiewinder]

return <my-custom-element />;

Results in error: Property 'my-custom-element' does not exist on type 'JSX.IntrinsicElements'. As far as I'm aware, this ought to be valid JSX and so compile to:

React.createElement("my-custom-element").

I can get around this by using the second form, but it'd be nice to avoid the check for standard elements (unless it's there for a good reason?)

[weswigham]

declare module JSX {
  interface IntrinsicElements {
    "my-custom-element": MyCustomElementClass
  }
}

You can do this to remove the type error, if you'd like.

[stevemao]

@weswigham what if the element doesn't have a class?

[weswigham]

Try typing it as any?

[stevemao]

Isn't any a bad pattern?

[weswigham]

If you have no type which describes the attributes allowed on the object, any may be acceptable, in order to allow any attribute to be applied. Alternatively, write an interface for the component.

[jyotendra]

See this, typescript complains if React component does not start with a capital letter.

[Alino]

I confirm that changing my react components name first letter to uppercase did fix the problem on typescript version 2.3.2

[ak99372]

@jyotendra thanks for that starting the component with capital letter fixed the error for me too.
Conclusion:
-> This error is misleading and should spell it out what the actual issue is or...
-> Why on earth is typescript dictating for components to start with uppercase?

[weswigham]

It's part of jsx - lowercased names are considered intrinsics, while uppercased names are custom components. They get called differently, too. Intrinsics are just a string passed into createElement, while custom components pass in their constructor.