Typescript: TSX: Can't use a component stored in a variable

[rigdern]

Repro

Suppose I have a component called MyComponent.

Using MyComponent like this works:

render() {
  return <MyComponent />;
}

but storing MyComponent in a variable and then trying to use it does not:

render() {
  var anAlias = MyComponent;
  return <anAlias />;
}

It results in the following error:

error TS2339: Property 'anAlias' does not exist on type 'JSX.IntrinsicElements'.

Workaround

Instead of using TSX, use React.createElement:

render() {
  var anAlias = MyComponent;
  return React.createElement(anAlias);
}

[vladima]

anAlias is an intrinsic JSX element since it starts with lowercase letter. Intrinsic elements are looked up on JSX.IntrinsicElements interface and in your case it presumably does not have member anAlias. Try making it upper-case so it will be treated as value-based element.

[RyanCavanaugh]

Vlad covered it -- this is the same behavior you'd see with the regular JSX transformer (lower-case identifiers are treated the same as div or span)

[rigdern]

Thanks. I was not aware of the distinction between intrinsic and value-based elements and I didn't know that the casing of the first letter was significant.