reactjs - Cómo asegurar que un componente de React tenga la propiedad 'key' en TypeScript

¿Cómo puedo escribir una variable de TypeScript para que requiera un componente con la key establecida?

Quiero algo así:

const foo: ReactElementWithKey = <div key="some key"></div> 
// all ok

const bar: ReactElementWithKey = <div></div> 
// no `key` - typescript should show an error

¿Cómo debería definir el ReactElementWithKey?

He intentado algo como:

type ReactElementWithKey = React.ReactElement<{ key: React.Key }>;

Pero no funciona: los componentes sin key son aceptados sin problemas.

Respuesta #1

Una cosa que podrías intentar es usar una versión personalizada del componente <div>, así:

import React from 'react';

// required non-null key prop
interface WithKeyProps {
    key: React.Key;
}

// custom div wrapper
const DivWithKey = (props: React.HTMLAttributes<HTMLDivElement> & WithKeyProps) => {
    return (
        <div {...props}>
            {props.children}
        </div>
    );
}

const foo = <DivWithKey key='' />;
// all ok
const bar = <DivWithKey />;
// no `key` - typescript shows an error

Enlace del parque

El problema es que esto es solo para <div>s, así que esto podría no funcionar del todo.

Respuesta #2

No puedes.

Primero, todos los componentes de React renderizados son solo del tipo JSX.Element. Toda la información de tipo sobre lo que se renderizó se pierde al renderizar. Por lo tanto, no puedes tipar una variable para que solo acepte algunos componentes de React renderizados.

En segundo lugar, key es una propiedad reservada por React. Cada componente la acepta opcionalmente.

No estoy seguro exactamente de lo que estás intentando hacer, pero probablemente haya una mejor manera.