Type JSX elements based on createElement function
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: ```typescript 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: 1. Tag name (string) in case of an intrinsic argument (`<div />`). Otherwise, the identifier is passed (`Foo` for `<Foo />`). 2. An object containing the props. 3. An a
Posted by ivogabe on Mar 19, 2017, 1:58 PM
Tags
Related issues
Raise real-world problems, find people facing the same issue, and discuss solutions.4,500 issues0 comments
github (EdTech)
Message limit 10000 team edition
[NEW] Data Tiering - Valkey as general data store not just in-memory data store
Info: No releases on google play for now
proposal: spec: sum types based on general interfaces
Users can't use IdPs outside of the ones enumerated by RPs
CLIP Training Code
Implement a Set primitive to complement Dictionary and Array
better documentation of reborrowing
Type JSX elements based on createElement function
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: ```typescript 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: 1. Tag name (string) in case of an intrinsic argument (`<div />`). Otherwise, the identifier is passed (`Foo` for `<Foo />`). 2. An object containing the props. 3. An a
Comments (0)
No comments yet. Start the discussion.