How To Strongly Type process.env
Learn how to strongly type process.env in TypeScript by either augmenting global type or validating it at runtime with t3-env.
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:
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 strongly type process.env in TypeScript by either augmenting global type or validating it at runtime with t3-env.
Discover when it's appropriate to use TypeScript's any
type despite its risks. Learn about legitimate cases where any
is necessary.
Learn why TypeScript's types don't exist at runtime. Discover how TypeScript compiles down to JavaScript and how it differs from other strongly-typed languages.
Improve React TypeScript performance by replacing type & with interface extends. Boost IDE and tsc speed significantly.
In this book teaser, we discuss deriving vs decoupling your types: when building relationships between your types or segregating them makes sense.
Learn how TypeScript's new utility type, NoInfer, can improve inference behavior by controlling where types are inferred in generic functions.