1

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

Jonathan.Brink
  • 23,757
  • 20
  • 73
  • 115

0 Answers0