Using JSX in TypeScript without React

Question

What is a simple way to have TypeScript recognize JSX (especially in VS Code) without having React as a dependency? If we have to use a custom JSX namespace and a custom renderer, then what is the expected shape of the contents of that namespace and the renderer?

As far as I know, JSX is just syntactic sugar that is transformed into function calls (e.g., React.createElement), so there should be a way to specify that a different function should be used for transforming the JSX.

Looking at the release docs for TypeScript 2.8, I see there are sections titled "Per-file JSX factories" and "Locally scoped JSX namespaces", but I don't see these sections in the official current TypeScript docs. Have these features been deprecated?

Possible duplicate of can i use jsx without React to inline html in script? — Bourbia Brahim
– Bourbia Brahim, Commented Jan 11, 2019 at 10:12
@Berr'ita: This is not a duplicate. I specifically indicated out I want to use TypeScript in VSCode (to retain the intellisense features). The other question talks about babel plugins and third-party packages, which I don't want — prmph
– prmph, Commented Jan 11, 2019 at 10:43

Estus Flask · Accepted Answer · 2019-01-11 11:01:20Z

4

jsx and jsxFactory compiler options are responsible for that.

TypeScript expects a function defined in jsxFactory to exist in module scope. Usually this requires to import React because jsxFactory defaults to React.createElement.

If the compiler is configured with:

...
"jsx": "react",
"jsxFactory": "h",
...

Then h function should exist. JSX-related types should be defined to make type checks work properly:

declare namespace JSX {
  interface Element {}
  interface ElementClass {
    render(): any;
  }
  interface IntrinsicElements {
    div: any;
    // ...
  }
}

const h = (Comp: any): any => console.log(`creating ${Comp} element`);

<div/>;

class FooComponent {
  render = () => null;
}

<FooComponent/>;

edited Jan 11, 2019 at 11:01

answered Jan 11, 2019 at 10:14

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

prmph Over a year ago

Thanks @estus: Does this mean that all components you define have to be added to the JSX.IntrinsicElements structure? Can you provide an example of defining a custom component that will be recognized by this scheme?

Estus Flask Over a year ago

Not exactly. IntrinsicElements are for HTML and SVG. You can use React's own types as starting point, github.com/DefinitelyTyped/DefinitelyTyped/blob/…

prmph Over a year ago

Can you actually provide a code snippet of a custom non-react component that is type-checked by TypeScript? It seems that is the best way to get at the problem I am having

prmph Over a year ago

Ok @estus, what about functional components? I've tried them and they mostly work, but sometimes there are some weird type errors. For example, const FComp = () => <div/> gives an error, but const FComp = () => {return <div/> } does not

prmph Over a year ago

Also @estus, evaluating <FComp /> by itself gives an error, but let elt = <FComp /> does not

|

Ola Næss Kaldestad · Accepted Answer · 2019-01-11 10:28:31Z

1

The Typescript compiler has flags that allow you to specify how TSX/JSX is handled.

Specifically, you have to specify "--jsx=React" and "--jsxFactory=someModule.yourJsxFactory", and in your tsx files, you supply your custom factory by importing "someModule", from which "yourJsxFactory" should be exported.

Read more about it at
Typescript (Compiler Options)
and
Typescript (JSX)

edited Jan 11, 2019 at 10:28

answered Jan 11, 2019 at 10:10

Ola Næss Kaldestad

1832 silver badges14 bronze badges

10 Comments

prmph Over a year ago

@Kaldestad: I have read those documents, and I still have specific questions. If you can provide a specific answer to my questions, I would appreciate that

Ola Næss Kaldestad Over a year ago

@prmph It's a bit weird that you have to specify "--jsx=React" when you specifically want jsx to be handled NOT by React, but that's the way the cookie crumbles

Ola Næss Kaldestad Over a year ago

@prmph I've added some further specification to my answer now

prmph Over a year ago

@ Kaldestad: Yes, the "jsx:"react" bit is confusing. Also, there is more to this than the docs explain. For example, what is the expected shape of the JSX.IntrinsicElements types?

Ola Næss Kaldestad Over a year ago

@prmph Maybe that's a bit unclear in the docs, I agree. I've found @types/react on github to be a good guide. In essence, it should provide type information for the "official" html elements. Or not, you can choose to omit it entirely as stated in the docs.

|

Collectives™ on Stack Overflow

Using JSX in TypeScript without React

2 Answers 2

7 Comments

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related