Type JSX elements based on createElement function #14729

ivogabe · 2017-03-19T13:58:56Z

TypeScript currently uses a JSX namespace to type the props of JSX elements. This is customisable by modifying JSX.IntrinsicElements, JSX.ElementClass. However, the type of an element is always JSX.Element.

Of course more interfaces could be added to the JSX namespace. However, I think that with less effort, the compiler could be made more flexible. I'd propose to check JSX elements based on a (virtual) call to JSX.createElement. For instance, the current behaviour can approximately be written like this:

namespace JSX {
  // intrinsic elements
  function createElement<K extends keyof JSX.IntrinsicElements>(tag: K, props: JSX.IntrinsicElements[K], children: JSX.Element[]): JSX.Element;
  // class and functional components
  function createElement<P>(component: (JSX.ElementClass & { new(): { props: P } }) | ((props: P) => JSX.Element), props: P, children: JSX.Element[]): JSX.Element;
}

Given that function signatures are well customisable with the use of generics for instance, most requests can be implemented this way. For instance, #13890 and #13618 would benefit from this change. Libraries that use JSX, but not on the React-way, will benefit from this too.

Proposed semantics

For a JSX element, a virtual call to JSX.createElement is constructed. It is passed three arguments:

Tag name (string) in case of an intrinsic argument (<div />). Otherwise, the identifier is passed (Foo for <Foo />).
An object containing the props.
An array containing the children.

This should be roughly the same as the JSX transform used in the emitter phase. One notable difference is the following: in case of no properties or no children, an empty object or an empty array should be passed, instead ignoring the argument. This makes it easier to write JSX.createElement for library authors.

Backwards compatibility

For backwards compatibility, one of the following approaches could be taken:

Use old logic if JSX.createElement does not exist.
If JSX.createElement does not exist, default it to (roughly) the definition above.

Error reporting

When type checking the generated function call, the checker can give error messages like "Argument of type .. " or "Supplied parameters do not match any signature of call target". These messages should be replaced when checking JSX elements.

The text was updated successfully, but these errors were encountered:

RyanCavanaugh · 2017-03-20T01:59:43Z

I think this is doable and could potentially cut out a lot of code from the compiler. When we added JSX support we didn't have spread types or keyof / T[k] so this was impossible. Behavior-wise I think this approach would allow all current behavior to be represented with the exception of data- and aria-, which would could special case to not present excess property errors.

The remaining difficulty is just technical - the overload resolution code is hardcoded in a lot of places with the assumption that it's operating over an actual argument list syntax tree rather than some abstract set of parameters.

niieani · 2017-03-22T18:51:33Z

Having this would allow one to utilize the concept of generalized JSX with TS. Currently it seems impossible, because the return type of any JSX expression is always a non-generic JSX.Element.

In fact, given this it would make sense to ditch the whole "JSX" global namespace and just use the declared type of the locally scoped jsxFactory (set in the tsconfig.json), so that the return type of a JSX expression could be different in every file, based on the implementation of the jsxFactory.

ivogabe · 2017-04-04T18:50:21Z

I think this is doable and could potentially cut out a lot of code from the compiler. When we added JSX support we didn't have spread types or keyof / T[k] so this was impossible.

That's exactly what I thought!

The remaining difficulty is just technical - the overload resolution code is hardcoded in a lot of places with the assumption that it's operating over an actual argument list syntax tree rather than some abstract set of parameters.

The compiler already handles different kinds of function calls. resolveSignature in checker.ts works with normal call expressions, but also tagged templates and decorators. Those last two don't have an explicit argument list in the source code, so I think that JSX components could be integrated there too? Actually, that function already handles JSX elements for the language service, when used with SFCs.

@niieani That's an interesting use case. I think that it would be useful in a lot of situations, other than the DOM, where some domain specific language is desired.

niieani · 2017-04-06T06:03:56Z

@ivogabe yeah, I especially like the example with ASTs, represented by JSX. So much more readable than declaring plain objects for AST.

ceymard · 2017-05-15T11:00:23Z

I'd like to ping this issue ; could it be possible that the whole jsx mechanic be simply a transform to a function call with its implied checking ?

This would allow for so much flexibility in library creation.

RyanCavanaugh · 2017-05-15T16:37:49Z

could it be possible that the whole jsx mechanic be simply a transform to a function call with its implied checking ?

No. Two reasons and there may be more:

In React properties like data-foo and aria-bar are special, but we'd incorrectly flag these as errors
We wouldn't detect excess properties if there was a spread [1]

[1]

interface Point {
    x: number;
    y: number;
}

var m: Point;
var j: Point = { z: 10, ...m }; // Not an error due to spread

niieani · 2017-05-16T08:48:19Z

@RyanCavanaugh The first could be fixed via other types of constructs that could be added to the language:

WithDomProperties<Point> -- adds typing data-* and aria-* to the type

Second we could think about. Maybe the spreads in JSX would behave differently?

There's probably something we could do. In any case, this would massively simplify the API and allow for custom JSX applications as I've mentioned in the comment above.

amir-arad · 2017-06-29T07:25:39Z

AFAIK it's not just data-* and area-*, it's *-*.

class Foo extends React.Component<{a:string}>{}

//This works:
<Foo b-3="bar" a="ggg"/>

joewood · 2017-12-12T19:14:07Z

@RyanCavanaugh now that the second point has been fixed, can this be revisited?

interface Point {
    x: number;
    y: number;
}

var m: Point;
var j: Point = { z: 10, ...m }; // NOW ERRORS

jchitel · 2018-02-06T00:39:49Z

Another problem to consider here is how to deal with backwards compatibility, particularly around the DefinitelyTyped definitions for React, which would have to be updated to support this.

Existing types that depend on the JSX namespace would no longer work because the compiler wouldn't look there anymore. The most graceful way I can see to handle that would be to modify the React definitions so that the JSX namespace definitions are dependent on (or at least structurally equivalent to) whatever types are used for React.createElement, and deprecate the JSX namespace.

For non-React use cases, this will probably just have to be a breaking change, with a suggested migration pattern. If someone is already using the JSX namespace for typing JSX, all they need to do is add a jsxFactory function (which they probably already have) and tie their JSX types to it.

I agree that having this would improve the flexibility of JSX-in-TS considerably, but the migration for existing code will probably be quite painful.

mhegazy · 2018-02-13T06:10:50Z

should be covered by #21699

* feat: setup TS for stories * fix: eslint was ignore .storybook * feat: add TS to storybook * refactor: move stories to TS (WIP) * refactor: move more stories to TS (WIP) * refactor: src changes for TS move over I think these were TS problems that were missed. * fix: ContactShadows story * refactor: move more stories to TS * refactor: add MapControls.tsx after raising issues in three Two errors linked to three.js: mrdoob/three.js#21058 mrdoob/three.js#21059 * fix: TS errors for passing refs & children * refactor: add more stories (WIP) * fix: useContextBridge TS to accept array of children fixed using DefinitelyTyped/DefinitelyTyped#44572 (comment) because microsoft/TypeScript#14729 * refactor: convert more stories to TS also useGLTF does not need to declare it's type * chore: update storybook * fix: revert useTexture accidentally committed a WIP change * refactor: move stories to TS (WIP) * refactor: revert useGLTF story * Minor type fixes * chore: update react-three-fiber to latest Required for Types * refactor: move stories to TS * fix: shaderMaterial on init returns void, not null * refactor: remove unnecessary type in useFBX * refactor: type Environment stronger there was issues with useAsset not understanding it's types.... * Fixes CSB CI (#230) Co-authored-by: Gianmarco Simone <gianmarcosimone89@gmail.com>

* feat: setup TS for stories * fix: eslint was ignore .storybook * feat: add TS to storybook * refactor: move stories to TS (WIP) * refactor: move more stories to TS (WIP) * refactor: src changes for TS move over I think these were TS problems that were missed. * fix: ContactShadows story * refactor: move more stories to TS * refactor: add MapControls.tsx after raising issues in three Two errors linked to three.js: mrdoob/three.js#21058 mrdoob/three.js#21059 * fix: TS errors for passing refs & children * refactor: add more stories (WIP) * fix: useContextBridge TS to accept array of children fixed using DefinitelyTyped/DefinitelyTyped#44572 (comment) because microsoft/TypeScript#14729 * refactor: convert more stories to TS also useGLTF does not need to declare it's type * chore: update storybook * fix: revert useTexture accidentally committed a WIP change * refactor: move stories to TS (WIP) * refactor: revert useGLTF story * Minor type fixes * chore: update react-three-fiber to latest Required for Types * refactor: move stories to TS * fix: shaderMaterial on init returns void, not null * refactor: remove unnecessary type in useFBX * refactor: type Environment stronger there was issues with useAsset not understanding it's types.... * Fixes CSB CI (#230) Co-authored-by: Gianmarco Simone <gianmarcosimone89@gmail.com> Co-authored-by: Josh <37798644+joshuaellis@users.noreply.github.com>

* change: move components into core folder * feat: add import types web & native index points to web to avoid breaking changes(?) but also cause that's a good default. * refactor: rollup so it looks for ts not tsx * refactor: move Html & Loader to web folder, make folders for native & web index points to web * Fixes CSB CI (#230) * [Feature] move stories to TS (#223) (#231) * feat: setup TS for stories * fix: eslint was ignore .storybook * feat: add TS to storybook * refactor: move stories to TS (WIP) * refactor: move more stories to TS (WIP) * refactor: src changes for TS move over I think these were TS problems that were missed. * fix: ContactShadows story * refactor: move more stories to TS * refactor: add MapControls.tsx after raising issues in three Two errors linked to three.js: mrdoob/three.js#21058 mrdoob/three.js#21059 * fix: TS errors for passing refs & children * refactor: add more stories (WIP) * fix: useContextBridge TS to accept array of children fixed using DefinitelyTyped/DefinitelyTyped#44572 (comment) because microsoft/TypeScript#14729 * refactor: convert more stories to TS also useGLTF does not need to declare it's type * chore: update storybook * fix: revert useTexture accidentally committed a WIP change * refactor: move stories to TS (WIP) * refactor: revert useGLTF story * Minor type fixes * chore: update react-three-fiber to latest Required for Types * refactor: move stories to TS * fix: shaderMaterial on init returns void, not null * refactor: remove unnecessary type in useFBX * refactor: type Environment stronger there was issues with useAsset not understanding it's types.... * Fixes CSB CI (#230) Co-authored-by: Gianmarco Simone <gianmarcosimone89@gmail.com> Co-authored-by: Josh <37798644+joshuaellis@users.noreply.github.com> * 2.2.16 * chore: add templates (#232) * chore: add react-dom as optional peer depency if you're using react-native you don't need it. * docs: update readme * fix: fix storybook imports that should have been done before my bad. Co-authored-by: Gianmarco <gianmarcosimone89@gmail.com>

* [Feature] move stories to TS (#223) (#231) * feat: setup TS for stories * fix: eslint was ignore .storybook * feat: add TS to storybook * refactor: move stories to TS (WIP) * refactor: move more stories to TS (WIP) * refactor: src changes for TS move over I think these were TS problems that were missed. * fix: ContactShadows story * refactor: move more stories to TS * refactor: add MapControls.tsx after raising issues in three Two errors linked to three.js: mrdoob/three.js#21058 mrdoob/three.js#21059 * fix: TS errors for passing refs & children * refactor: add more stories (WIP) * fix: useContextBridge TS to accept array of children fixed using DefinitelyTyped/DefinitelyTyped#44572 (comment) because microsoft/TypeScript#14729 * refactor: convert more stories to TS also useGLTF does not need to declare it's type * chore: update storybook * fix: revert useTexture accidentally committed a WIP change * refactor: move stories to TS (WIP) * refactor: revert useGLTF story * Minor type fixes * chore: update react-three-fiber to latest Required for Types * refactor: move stories to TS * fix: shaderMaterial on init returns void, not null * refactor: remove unnecessary type in useFBX * refactor: type Environment stronger there was issues with useAsset not understanding it's types.... * Fixes CSB CI (#230) Co-authored-by: Gianmarco Simone <gianmarcosimone89@gmail.com> Co-authored-by: Josh <37798644+joshuaellis@users.noreply.github.com> * 2.2.16 * chore: add templates (#232) * chore: add react-dom as optional peer depency if you're using react-native you don't need it. * docs: update readme * fix: fix storybook imports that should have been done before * BREAKING CHANGE: refactor internal to solve react-native imports my bad. Co-authored-by: Gianmarco <gianmarcosimone89@gmail.com> * 2.3.0-beta.0 * fix: edit transformOutputPath to remove .ts from files * 2.3.0-beta.1 * fix: useAnimations ref type & chore: add storybook entry for useAnimations * Added THREE.Group to useAnimations types * Small refactor * Added useAnimations story * Clean up storybook * Fix null ref typing on useAnimations * Forgot to change typing on useAnimations api * chore: add storybook entry to README Co-authored-by: Josh Ellis <joshua.ellis18@gmail.com> * [fix] Blob is undefined when using SSR (#239) * fix: #233 Blob is undefined in SSR * refactor: it appears Billboard is fixed Looks like Typescript does not suck. * 2.3.0-beta.2 * fix: create polyfill for atob * 2.3.0-beta.3 * chore: update readme in response to #240 * fix: #242 Frustum has incorrect spelling in softshadows (#243) * fix: suggestion for fixing #242 * refactor: default should be other way round * chore: update readme with correct spelling * 2.3.0-beta.4 * feat: Add MeshoptDecoder support to useGLTF (#246) * Add MeshoptDecoder support to useGLTF * chore: move center Co-authored-by: Josh Ellis <joshua.ellis18@gmail.com> * 2.3.0-beta.5 * feat: #181 – adding points to line (#247) * feat: re-create geometry on new points * refactor: useMemo the geometry instead of useEffect * 2.3.0-beta.6 * 3.0.0-beta.1 * 3.0.0-beta.2 * feat: update troika with new features (#255) * 3.0.0-beta.3 * feat: add ability to add custom scene as prop (#256) * feat: add ability to add custom scene as prop * docs: update Environment with new feats * 3.0.0-beta.4 * refactor: shuffle imports for beta * 3.0.0-beta.5 * docs: clearly specify name of package & old has been deprecated * BREAKING CHANGE: Upgrade Three.js to r125 (#262) * chore: update Three.js dependency * refactor: remove subdivision modifier * fix: remove use of FaceNormalsHelper as it no longer exists in Three * fix: update typings for THREE * fix: update modifiers to work without THREE.Geometry * docs: update README * chore: add Three.js peer dependency * fix: change install instructions to use yarn instead of npm (#265) * repurpose reflector, make it capable to blur (#260) * repurpose reflector, make it capable to blur * refactor: move materials out to reduce noise & fix types * refactor: merge beta * fix: add child propType * refactor: update reflector story & fix children type * changes * fix: shuffle types so reflectorProps come from what the material expects * docs Co-authored-by: Josh Ellis <joshua.ellis18@gmail.com> * chore: add workflows to beta release * BREAKING CHANGE force build * 3.0.0-beta.6 Co-authored-by: Gianmarco Simone <gianmarcosimone89@gmail.com> Co-authored-by: Tanner Hartwig <tanner.hartwig57@gmail.com> Co-authored-by: Matt Rossman <rossman@gatech.edu> Co-authored-by: Renaud Rohlinger <renaud.rohlinger@gmail.com> Co-authored-by: Jure Triglav <juretriglav@gmail.com> Co-authored-by: Jason Bixon <jbixon13@gmail.com> Co-authored-by: Paul Henschel <drcmda@gmail.com>

danielo515 · 2021-03-23T14:49:18Z

Hey.
I really need to be able to specify which component types are valid, so I can ensure at compile time that my components are being used as I intend them to be used.
Is this really impossible with TS?

trusktr · 2021-03-24T02:11:55Z

It is not possible yet.

danielo515 · 2021-03-24T07:04:28Z

So how do you type them when, for example, you need to iterate the children array and access the props? TS will not understand that the children has that props. This is key to produce high quality components that are type safe, is it at least on the roadmap?

* feat: setup TS for stories * fix: eslint was ignore .storybook * feat: add TS to storybook * refactor: move stories to TS (WIP) * refactor: move more stories to TS (WIP) * refactor: src changes for TS move over I think these were TS problems that were missed. * fix: ContactShadows story * refactor: move more stories to TS * refactor: add MapControls.tsx after raising issues in three Two errors linked to three.js: mrdoob/three.js#21058 mrdoob/three.js#21059 * fix: TS errors for passing refs & children * refactor: add more stories (WIP) * fix: useContextBridge TS to accept array of children fixed using DefinitelyTyped/DefinitelyTyped#44572 (comment) because microsoft/TypeScript#14729 * refactor: convert more stories to TS also useGLTF does not need to declare it's type * chore: update storybook * fix: revert useTexture accidentally committed a WIP change * refactor: move stories to TS (WIP) * refactor: revert useGLTF story * Minor type fixes * chore: update react-three-fiber to latest Required for Types * refactor: move stories to TS * fix: shaderMaterial on init returns void, not null * refactor: remove unnecessary type in useFBX * refactor: type Environment stronger there was issues with useAsset not understanding it's types.... * Fixes CSB CI (#230) Co-authored-by: Gianmarco Simone <gianmarcosimone89@gmail.com>

* feat: setup TS for stories * fix: eslint was ignore .storybook * feat: add TS to storybook * refactor: move stories to TS (WIP) * refactor: move more stories to TS (WIP) * refactor: src changes for TS move over I think these were TS problems that were missed. * fix: ContactShadows story * refactor: move more stories to TS * refactor: add MapControls.tsx after raising issues in three Two errors linked to three.js: mrdoob/three.js#21058 mrdoob/three.js#21059 * fix: TS errors for passing refs & children * refactor: add more stories (WIP) * fix: useContextBridge TS to accept array of children fixed using DefinitelyTyped/DefinitelyTyped#44572 (comment) because microsoft/TypeScript#14729 * refactor: convert more stories to TS also useGLTF does not need to declare it's type * chore: update storybook * fix: revert useTexture accidentally committed a WIP change * refactor: move stories to TS (WIP) * refactor: revert useGLTF story * Minor type fixes * chore: update react-three-fiber to latest Required for Types * refactor: move stories to TS * fix: shaderMaterial on init returns void, not null * refactor: remove unnecessary type in useFBX * refactor: type Environment stronger there was issues with useAsset not understanding it's types.... * Fixes CSB CI (#230) Co-authored-by: Gianmarco Simone <gianmarcosimone89@gmail.com> Co-authored-by: Josh <37798644+joshuaellis@users.noreply.github.com>

* change: move components into core folder * feat: add import types web & native index points to web to avoid breaking changes(?) but also cause that's a good default. * refactor: rollup so it looks for ts not tsx * refactor: move Html & Loader to web folder, make folders for native & web index points to web * Fixes CSB CI (#230) * [Feature] move stories to TS (#223) (#231) * feat: setup TS for stories * fix: eslint was ignore .storybook * feat: add TS to storybook * refactor: move stories to TS (WIP) * refactor: move more stories to TS (WIP) * refactor: src changes for TS move over I think these were TS problems that were missed. * fix: ContactShadows story * refactor: move more stories to TS * refactor: add MapControls.tsx after raising issues in three Two errors linked to three.js: mrdoob/three.js#21058 mrdoob/three.js#21059 * fix: TS errors for passing refs & children * refactor: add more stories (WIP) * fix: useContextBridge TS to accept array of children fixed using DefinitelyTyped/DefinitelyTyped#44572 (comment) because microsoft/TypeScript#14729 * refactor: convert more stories to TS also useGLTF does not need to declare it's type * chore: update storybook * fix: revert useTexture accidentally committed a WIP change * refactor: move stories to TS (WIP) * refactor: revert useGLTF story * Minor type fixes * chore: update react-three-fiber to latest Required for Types * refactor: move stories to TS * fix: shaderMaterial on init returns void, not null * refactor: remove unnecessary type in useFBX * refactor: type Environment stronger there was issues with useAsset not understanding it's types.... * Fixes CSB CI (#230) Co-authored-by: Gianmarco Simone <gianmarcosimone89@gmail.com> Co-authored-by: Josh <37798644+joshuaellis@users.noreply.github.com> * 2.2.16 * chore: add templates (#232) * chore: add react-dom as optional peer depency if you're using react-native you don't need it. * docs: update readme * fix: fix storybook imports that should have been done before my bad. Co-authored-by: Gianmarco <gianmarcosimone89@gmail.com>

* [Feature] move stories to TS (#223) (#231) * feat: setup TS for stories * fix: eslint was ignore .storybook * feat: add TS to storybook * refactor: move stories to TS (WIP) * refactor: move more stories to TS (WIP) * refactor: src changes for TS move over I think these were TS problems that were missed. * fix: ContactShadows story * refactor: move more stories to TS * refactor: add MapControls.tsx after raising issues in three Two errors linked to three.js: mrdoob/three.js#21058 mrdoob/three.js#21059 * fix: TS errors for passing refs & children * refactor: add more stories (WIP) * fix: useContextBridge TS to accept array of children fixed using DefinitelyTyped/DefinitelyTyped#44572 (comment) because microsoft/TypeScript#14729 * refactor: convert more stories to TS also useGLTF does not need to declare it's type * chore: update storybook * fix: revert useTexture accidentally committed a WIP change * refactor: move stories to TS (WIP) * refactor: revert useGLTF story * Minor type fixes * chore: update react-three-fiber to latest Required for Types * refactor: move stories to TS * fix: shaderMaterial on init returns void, not null * refactor: remove unnecessary type in useFBX * refactor: type Environment stronger there was issues with useAsset not understanding it's types.... * Fixes CSB CI (#230) Co-authored-by: Gianmarco Simone <gianmarcosimone89@gmail.com> Co-authored-by: Josh <37798644+joshuaellis@users.noreply.github.com> * 2.2.16 * chore: add templates (#232) * chore: add react-dom as optional peer depency if you're using react-native you don't need it. * docs: update readme * fix: fix storybook imports that should have been done before * BREAKING CHANGE: refactor internal to solve react-native imports my bad. Co-authored-by: Gianmarco <gianmarcosimone89@gmail.com> * 2.3.0-beta.0 * fix: edit transformOutputPath to remove .ts from files * 2.3.0-beta.1 * fix: useAnimations ref type & chore: add storybook entry for useAnimations * Added THREE.Group to useAnimations types * Small refactor * Added useAnimations story * Clean up storybook * Fix null ref typing on useAnimations * Forgot to change typing on useAnimations api * chore: add storybook entry to README Co-authored-by: Josh Ellis <joshua.ellis18@gmail.com> * [fix] Blob is undefined when using SSR (#239) * fix: #233 Blob is undefined in SSR * refactor: it appears Billboard is fixed Looks like Typescript does not suck. * 2.3.0-beta.2 * fix: create polyfill for atob * 2.3.0-beta.3 * chore: update readme in response to #240 * fix: #242 Frustum has incorrect spelling in softshadows (#243) * fix: suggestion for fixing #242 * refactor: default should be other way round * chore: update readme with correct spelling * 2.3.0-beta.4 * feat: Add MeshoptDecoder support to useGLTF (#246) * Add MeshoptDecoder support to useGLTF * chore: move center Co-authored-by: Josh Ellis <joshua.ellis18@gmail.com> * 2.3.0-beta.5 * feat: #181 – adding points to line (#247) * feat: re-create geometry on new points * refactor: useMemo the geometry instead of useEffect * 2.3.0-beta.6 * 3.0.0-beta.1 * 3.0.0-beta.2 * feat: update troika with new features (#255) * 3.0.0-beta.3 * feat: add ability to add custom scene as prop (#256) * feat: add ability to add custom scene as prop * docs: update Environment with new feats * 3.0.0-beta.4 * refactor: shuffle imports for beta * 3.0.0-beta.5 * docs: clearly specify name of package & old has been deprecated * BREAKING CHANGE: Upgrade Three.js to r125 (#262) * chore: update Three.js dependency * refactor: remove subdivision modifier * fix: remove use of FaceNormalsHelper as it no longer exists in Three * fix: update typings for THREE * fix: update modifiers to work without THREE.Geometry * docs: update README * chore: add Three.js peer dependency * fix: change install instructions to use yarn instead of npm (#265) * repurpose reflector, make it capable to blur (#260) * repurpose reflector, make it capable to blur * refactor: move materials out to reduce noise & fix types * refactor: merge beta * fix: add child propType * refactor: update reflector story & fix children type * changes * fix: shuffle types so reflectorProps come from what the material expects * docs Co-authored-by: Josh Ellis <joshua.ellis18@gmail.com> * chore: add workflows to beta release * BREAKING CHANGE force build * 3.0.0-beta.6 Co-authored-by: Gianmarco Simone <gianmarcosimone89@gmail.com> Co-authored-by: Tanner Hartwig <tanner.hartwig57@gmail.com> Co-authored-by: Matt Rossman <rossman@gatech.edu> Co-authored-by: Renaud Rohlinger <renaud.rohlinger@gmail.com> Co-authored-by: Jure Triglav <juretriglav@gmail.com> Co-authored-by: Jason Bixon <jbixon13@gmail.com> Co-authored-by: Paul Henschel <drcmda@gmail.com>

trusktr · 2021-12-04T02:16:47Z

@WilliamPeralta This is not a help channel for JSX component generics. This topic is specifically about the return type of JSX expressions.

I would kindly recommend to delete the post so it isn't distracting, and ask in the appropriate channels (StackOverflow, Discord, etc). You'll get way better help that way.

polkovnikov-ph · 2021-12-06T19:06:34Z

Joe, it's directly related. If JSX was typed as all other function calls, TS would be able to infer generic parameters. It's not only a return type problem, it's all about JSX being typed incorrectly.

…

On Sat, Dec 4, 2021, 05:17 Joe Pea ***@***.***> wrote: @WilliamPeralta <https://github.com/WilliamPeralta> This is not a help channel for JSX component generics. This topic is specifically about the return type of JSX expressions. I would kindly recommend to delete the post so it isn't distracting, and ask in the appropriate channels (StackOverflow, Discord, etc). You'll get *way better* help that way. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#14729 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAWYQIIMDDKEXRQUUFQTIVLUPF22DANCNFSM4DEG63DQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

trusktr · 2021-12-08T18:41:28Z

I'm all for proper types everywhere, but this issue is about the return types. Once those are in place, this opens room for the generics to be improved.

@RyanCavanaugh As you fear the performance of JSX return types, what about a compromise? Either:

enable with an option that defaults to disabled?
allow return types only for top level result of a JSX expression so at least something like const div = <div>...</div> regardless of what children the div has.

At least allow us to try the feature in a nightly release and see if it does as poorly as you say. Let us measure it!

weswigham · 2021-12-08T18:55:31Z

We kinda did with experimental builds, that's why we know the perf is so bad.

trusktr · 2021-12-08T19:19:12Z

Is it worse than nested function calls like h('div', h('p'))?

weswigham · 2021-12-08T20:04:54Z

No but yes. No, it's pretty much that exactly (slight note: class/function components are essentially two calls of cost per tag, rather than one), yes, because people don't chain generic functions 100 levels deep in practice (convention simply dictates you use a temporary variable after a few levels of nesting), but do chain jsx tags 100 levels deep.

niieani · 2021-12-16T06:08:48Z

@weswigham would it much of a burden for your team if this were to land behind a flag? Most uses might not need generic JSX, but there are plenty of niche uses that would greatly benefit from this, and 100-level deep nesting of any kind can (and should) be avoided in well crafted code anyway.

trusktr · 2021-12-18T03:53:14Z

What about return types, without inference of generics?

ConnorJamesLow · 2022-02-18T19:32:34Z

@RyanCavanaugh As you fear the performance of JSX return types, what about a compromise? Either:

enable with an option that defaults to disabled?

allow return types only for top level result of a JSX expression so at least something like const div = <div>...</div> regardless of what children the div has.

I'm voting for that second option.

flying-sheep · 2022-06-16T12:30:54Z

Any idea how to get JSX typing per file when using jsx: "react-jsx"?

Before I could just use #22207:

things.ts

namespace mything {
    export namespace JSX {
        type Element = ...
    }
}
export function mything(...) {...}

app.ts

/** @jsx mything */
import { mything } from './things'

const a = <a/>

What can I do now?

/edit: figured it out:

jsx-runtime.ts

export namespace JSX {
    type Element = ...
}
export function jsx(...) {...}

app.ts

/** @jsxImportSource . */

const a = <a/>

RyanCavanaugh added Help Wanted In Discussion Suggestion and removed Help Wanted labels Mar 22, 2017

yuit mentioned this issue Apr 12, 2017

[Master] Type checking JSX children #15160

Merged

jugglingcats mentioned this issue Apr 19, 2017

Suggestion: Allow intrinsic elements to vary by component #15266

Closed

RyanCavanaugh mentioned this issue May 24, 2017

#13890 Implementing JSX.ElementType support #13891

Closed

mhegazy mentioned this issue Jun 13, 2017

Type inference fails for generic React props with JSX syntax, works with regular syntax #16499

Closed

jchitel mentioned this issue Jan 5, 2018

Type inference of React component type props is not working correctly #21039

Closed

mhegazy assigned weswigham May 5, 2018

mhegazy added this to the TypeScript 3.0 milestone May 5, 2018

mhegazy modified the milestones: TypeScript 3.0, TypeScript 3.1 Jul 2, 2018

RyanCavanaugh modified the milestones: TypeScript 3.1, TypeScript 3.2 Aug 23, 2018

DanielRosenwasser modified the milestones: TypeScript 3.2, TypeScript 3.3 Oct 30, 2018

pelotom mentioned this issue Dec 9, 2018

Excess property checking on nested objects doesn't work in JSX as of TS 3.2 #28926

Open

Jessidhia mentioned this issue Dec 11, 2018

Proposal: stronger JSX types through conditional types #28954

Open

5 tasks

gsimone mentioned this issue Jan 15, 2021

[Feature] move stories to TS (#223) pmndrs/drei#231

Merged

RyanCavanaugh mentioned this issue Feb 17, 2021

Calling a function using JSX is producing different typed results vs calling it using raw JS #42836

Closed

scottwillmoore mentioned this issue Apr 17, 2021

Slow Performance with Type Inference on JSX Element #43717

Open

fabiancook mentioned this issue May 9, 2021

Locally scoped & typed jsxFactory #44018

Open

5 tasks

scarlettperry mentioned this issue Sep 7, 2021

core: revamp card header lyft/clutch#1717

Merged

This comment has been minimized.

Sign in to view

RyanCavanaugh mentioned this issue Dec 3, 2021

Bug: Valid programs with JSX fail to typecheck when JSX is de-sugared #46988

Closed

RyanCavanaugh mentioned this issue Mar 21, 2022

Have JSX transformer respect return type of createElement #48365

Closed

4 tasks

Lusito mentioned this issue Jul 25, 2022

Return Type Break Changes Broke My Project Lusito/tsx-dom#15

Open

Type JSX elements based on createElement function #14729

Type JSX elements based on createElement function #14729

ivogabe commented Mar 19, 2017

RyanCavanaugh commented Mar 20, 2017

niieani commented Mar 22, 2017 •

edited

ivogabe commented Apr 4, 2017

niieani commented Apr 6, 2017

ceymard commented May 15, 2017

RyanCavanaugh commented May 15, 2017

niieani commented May 16, 2017 •

edited

amir-arad commented Jun 29, 2017

joewood commented Dec 12, 2017

jchitel commented Feb 6, 2018

mhegazy commented Feb 13, 2018

danielo515 commented Mar 23, 2021

trusktr commented Mar 24, 2021

danielo515 commented Mar 24, 2021

This comment has been minimized.

trusktr commented Dec 4, 2021

polkovnikov-ph commented Dec 6, 2021

trusktr commented Dec 8, 2021 •

edited

weswigham commented Dec 8, 2021

trusktr commented Dec 8, 2021

weswigham commented Dec 8, 2021 •

edited

niieani commented Dec 16, 2021

trusktr commented Dec 18, 2021 •

edited

ConnorJamesLow commented Feb 18, 2022

flying-sheep commented Jun 16, 2022 •

edited

Type JSX elements based on createElement function #14729

Type JSX elements based on createElement function #14729

Comments

ivogabe commented Mar 19, 2017

Proposed semantics

Backwards compatibility

Error reporting

RyanCavanaugh commented Mar 20, 2017

niieani commented Mar 22, 2017 • edited

ivogabe commented Apr 4, 2017

niieani commented Apr 6, 2017

ceymard commented May 15, 2017

RyanCavanaugh commented May 15, 2017

niieani commented May 16, 2017 • edited

amir-arad commented Jun 29, 2017

joewood commented Dec 12, 2017

jchitel commented Feb 6, 2018

mhegazy commented Feb 13, 2018

danielo515 commented Mar 23, 2021

trusktr commented Mar 24, 2021

danielo515 commented Mar 24, 2021

This comment has been minimized.

trusktr commented Dec 4, 2021

polkovnikov-ph commented Dec 6, 2021

trusktr commented Dec 8, 2021 • edited

weswigham commented Dec 8, 2021

trusktr commented Dec 8, 2021

weswigham commented Dec 8, 2021 • edited

niieani commented Dec 16, 2021

trusktr commented Dec 18, 2021 • edited

ConnorJamesLow commented Feb 18, 2022

flying-sheep commented Jun 16, 2022 • edited

niieani commented Mar 22, 2017 •

edited

niieani commented May 16, 2017 •

edited

trusktr commented Dec 8, 2021 •

edited

weswigham commented Dec 8, 2021 •

edited

trusktr commented Dec 18, 2021 •

edited

flying-sheep commented Jun 16, 2022 •

edited