As a contrived example, define a few components:
Lettuce.tsx:
import { createElement, FC } from 'react';
export interface LettuceProps {}
export const Lettuce: FC<LettuceProps> = () => <h4 style={{ color: 'green' }}>Lettuce</h4>;
Tomato.tsx:
import { createElement, FC } from 'react';
export interface TomatoProps {}
export const Tomato: FC<TomatoProps> = () => <h4 style={{ color: 'red' }}>Tomato</h4>;
Tiger.tsx:
import { createElement, FC } from 'react';
export interface TigerProps {}
export const Tomato: FC<TigerProps> = () => <h4 style={{ color: 'orange' }}>Tiger</h4>;
Salad.tsx:
import { createElement, FC, ReactNode } from 'react';
export interface SaladProps {
ingredients?: ReactNode[];
}
export const Salad: FC<SaladProps> = (props) => (
<div>
<h2>Salad</h2>
{props.ingredients}
</div>
);
Is there a way to have this usage be flagged by the compiler? (a salad cannot contain a tiger):
const SaladInvalid = () => (
<Salad ingredients={[<Lettuce />, <Tomato />, <Tomato />, <Tiger />]} />
);
More generally, is there a way to strictly type "slot" props with TypeScript?
Note: this question is similar to this one regarding props.children