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.
The way React's forwardRef
is implemented in TypeScript has some annoying limitations. The biggest is that it disables inference on generic components.
A common use case for a generic component is a Table
:
tsx
constTable = <T ,>(props : {data :T [];renderRow : (row :T ) =>React .ReactNode ;}) => {return (<table ><tbody >{props .data .map ((item ,index ) => (<props .renderRow key ={index } {...item } />))}</tbody ></table >);};
Here, when we pass in an array of something to data
, it will then infer that type in the argument passed to the renderRow
function.
tsx
<Table // 1. Data is a string here...data ={["a", "b"]}// 2. So ends up inferring as a string in renderRow.renderRow ={(row ) => {return <tr >{row }</tr >;}}/>;<Table // 3. Data is a number here...data ={[1, 2]}// 4. So ends up inferring as a number in renderRow.renderRow ={(row ) => {return <tr >{row }</tr >;}}/>;
This is really helpful, because it means that without any extra annotations, we can get type inference on the renderRow
function.
forwardRef
The issue comes in when we try to add a ref
to our Table
component:
tsx
constTable = <T ,>(props : {data :T [];renderRow : (row :T ) =>React .ReactNode ;},ref :React .ForwardedRef <HTMLTableElement >) => {return (<table ref ={ref }><tbody >{props .data .map ((item ,index ) => (<props .renderRow key ={index } {...item } />))}</tbody ></table >);};constForwardReffedTable =React .forwardRef (Table );
This all looks fine so far, but when we use our ForwardReffedTable
component, the inference we saw before no longer works.
tsx
<ForwardReffedTable // 1. Data is a string here...data ={["a", "b"]}// 2. But ends up being inferred as unknown.renderRow ={(row ) => {return <tr />;}}/>;<ForwardReffedTable // 3. Data is a number here...data ={[1, 2]}// 4. But still ends up being inferred as unknown.renderRow ={(row ) => {return <tr />;}}/>;
This is extremely frustrating. But, it can be fixed.
We can redefine forwardRef
using a different type definition, and it'll start working.
Here's the new definition:
tsx
functionfixedForwardRef <T ,P = {}>(render : (props :P ,ref :React .Ref <T >) =>React .ReactNode ): (props :P &React .RefAttributes <T >) =>React .ReactNode {returnReact .forwardRef (render ) as any;}
We can change our definition to use fixedForwardRef
:
tsx
constForwardReffedTable =fixedForwardRef (Table );
Suddenly, it just starts working:
tsx
<ForwardReffedTable data ={["a", "b"]}renderRow ={(row ) => {return <tr />;}}/>;<ForwardReffedTable data ={[1, 2]}renderRow ={(row ) => {return <tr />;}}/>;
This is my recommended solution - redefine forwardRef
to a new function with a different type that actually works.
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.