Add TypeScript To An Existing React Project
Learn how to add TypeScript to your existing React project in a few simple steps.
JSX.IntrinsicElements
is a type in TypeScript's global scope that defines which native JSX elements are in scope, and what props they require.
tsx
declareglobal {namespaceJSX {interfaceIntrinsicElements {"my-custom-element": {id : string;};}}}<Property 'id' is missing in type '{}' but required in type '{ id: string; }'.2741Property 'id' is missing in type '{}' but required in type '{ id: string; }'./>; my-custom-element
In the example above, we:
declare global
.JSX
namespace.IntrinsicElements
interface.The property that we define on the IntrinsicElements
interface is the name of the element we want to define. The value of the property is the props that the element accepts.
This works because interfaces in the same scope merge their declarations. This means that the IntrinsicElements
interface we define will merge with the one that TypeScript already knows about.
If you try to use an element that isn't defined on JSX.IntrinsicElements
, you'll get an error:
Property 'X' does not exist on type 'JSX.IntrinsicElements'.
tsx
constComponent = () => {return <Property 'i-am-not-defined' does not exist on type 'JSX.IntrinsicElements'.2339Property 'i-am-not-defined' does not exist on type 'JSX.IntrinsicElements'.i-am-not-defined />;};
Mostly, you won't modify JSX.InstrinsicElements
yourself. Instead, the framework you're using will define the elements for you.
For instance, React uses JSX.IntrinsicElements
to define the props for native HTML elements.
Pressing cmd-click
on a JSX element in VSCode will take you to the definition of the element - and the definition is pretty enormous:
ts
declare global {namespace JSX {interface IntrinsicElements {a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>,HTMLAnchorElement>;abbr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>,HTMLElement>;address: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>,HTMLElement>;// ... hundreds more}}}
Fundamentally, this is doing exactly the same thing as our code above. The name of the property is the name of the element, and the value is the props that the element accepts.
React.DetailedHTMLProps
is just a utility type that creates the types that a
, abbr
, and address
accept.
Share this article with your friends
Learn how to add TypeScript to your existing React project in a few simple steps.
Learn the essential TypeScript configuration options and create a concise tsconfig.json file for your projects with this helpful cheatsheet.
Big projects like Svelte and Drizzle are not abandoning TypeScript, despite some recent claims.
Learn different ways to pass a component as a prop in React: passing JSX, using React.ComponentType, and using React.ElementType.
Learn about TypeScript performance and how it affects code type-checking speed, autocomplete, and build times in your editor.
When typing React props in a TypeScript app, using interfaces is recommended, especially when dealing with complex intersections of props.