TypeScript not seeing defined types using a type that references multiple types

Question

I have a type defined that looks like this:

export type MediaProps = ImageMediaProps | OembedProps;

Then have the types it's referencing defined as the following above that code:

type SharedMediaProps = {
  /** Media type */
  type: "image" | "oembed";
  /** Media source URL */
  src: string;
};

type ImageMediaProps = SharedMediaProps & {
  /** Image alternate text */
  alt: string;
  /** Image width */
  width: number;
  /** Image height */
  height: number;
};

type OembedProps = SharedMediaProps & {
  /** Enable video autoplay */
  autoplay?: boolean;
  /** Enable video loop */
  loop?: boolean;
  /** Allow fullscreen */
  allowFullscreen?: boolean;
  /** Allow picture-in-picture */
  allowPictureInPicture?: boolean;
  /** oEmbed title */
  title?: string;
};

Then in my React component, I have:

export function Media({
  type,
  title,
  width,
  height,
  src,
  autoplay = false,
  loop = false,
  allowFullscreen = true,
  allowPictureInPicture = true,
}: MediaProps) {

but I'm getting notices saying title, width, height, autoplay, loop, allowFullscreen, allowPictureInPicture aren't defined.

For example, the specific notice I'm getting is:

Property 'allowFullscreen' does not exist on type 'MediaProps'.ts(2339)

It's also happening on other components I've created.

I don't see allowFullscreen anywhere in your type definitions — Tobias S.
– Tobias S., Commented Apr 20, 2022 at 14:38
Or OembedProps at all. Please give a minimal reproducible example. — jonrsharpe
– jonrsharpe, Commented Apr 20, 2022 at 14:39
Whoops, sorry about that. I've updated it, didn't get the full copy and paste. @TobiasS. — Ben Marshall
– Ben Marshall, Commented Apr 20, 2022 at 14:42

coglialoro · Accepted Answer · 2022-04-20 15:02:51Z

2

First, move the type property into the not shared props, so it can be used to discrimitate the type:

type SharedMediaProps = {
   /** Media source URL */
   src: string;
};

type ImageMediaProps = SharedMediaProps & {
   /** Media type */
   type: "image";
   /** Image alternate text */
   alt: string;
   /** Image width */
   width: number;
   /** Image height */
   height: number;
};

type OembedProps = SharedMediaProps & {
   /** Media type */
   type: "oembed";
   /** Enable video autoplay */
   autoplay?: boolean;
   /** Enable video loop */
   loop?: boolean;
   /** Allow fullscreen */
   allowFullscreen?: boolean;
   /** Allow picture-in-picture */
   allowPictureInPicture?: boolean;
   /** oEmbed title */
   title?: string;
};

Then define MediaProps as union of those types:

type MediaProps = ImageMediaProps | OembedProps;

After all this you still can't deconstruct the property in the paramenter because you have to discriminate the type first:

export function Media(props: MediaProps) {
   if(props.type === "image") {
      const {alt, width, height} = props;
   } else {
      const {autoplay, loop, allowFullscreen, allowPictureInPicture, title} = props;
   }
}

Demo: https://tsplay.dev/NBkVnm

answered Apr 20, 2022 at 15:02

coglialoro

7731 gold badge6 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben Marshall Over a year ago

Beautiful, even better, thanks!

Matthew Thurston · Accepted Answer · 2022-04-20 14:53:51Z

1

I believe you'll need to use an intersection type on your MediaProps assignment.

export type MediaProps = ImageMediaProps & OembedProps;

answered Apr 20, 2022 at 14:53

Matthew Thurston

7605 silver badges22 bronze badges

3 Comments

Ben Marshall Over a year ago

Bingo! That did it, thanks!

coglialoro Over a year ago

But this way MediaProps has ALWAYS both the attributes of ImageMediaProps and OembedProps types. Don't you want to have ONLY the ImageMediaProps when type is image and ONLY the OembedProps when the type is oembed? if so check my answer

Matthew Thurston Over a year ago

I think what you're proposing is a better solution @coglialoro but itself is outside the scope of the original ask and requires refactoring export function Media arguments

Collectives™ on Stack Overflow

TypeScript not seeing defined types using a type that references multiple types

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related