#Hello! I'm new to typescript. Help with Unions!

20 messages · Page 1 of 1 (latest)

blissful nymph
# 
interface CircleButtonBaseProps {
  title?: string;
}
interface CircleButtonWithIcon extends CircleButtonBaseProps {
  IconComponent?: never;
  Icon: React.ReactNode;
}
interface CircleButtonWithIconComponent extends CircleButtonBaseProps {
  IconComponent: React.ElementType;
  Icon?: never;
}
type CircleButtonProps = CircleButtonWithIcon | CircleButtonWithIconComponent;

The expectation is that if I create a <CircleButton ..> with both Icon and IconComponent I should get an error or warning, but I get neither. I'm not sure how to fix it or if what I'm trying to do is possible. CircleButton 's props should accept either an Icon or IconComponent, but not both

#

Hello! I'm new to typescript. Help with Unions!

final timber
#

Can you show an example for where you expect an error?

#

What are you coding where you expect an error that isn't being flagged?

#

You can see here an error is flagged using your code:

clear cedarBOT
#
Robo Zoom#0922
Playground Link

Preview:ts interface CircleButtonBaseProps { title?: string } interface CircleButtonWithIcon extends CircleButtonBaseProps { IconComponent?: never Icon: 1 } interface CircleButtonWithIconComponent extends CircleButtonBaseProps { IconComponent: 2 Icon?: never ...

You can choose specific lines to embed by selecting them before copying the link.
blissful nymph
#

I removed some props in my example

image.png
#

There's also no warning or anything with the compiler

image.png
blissful nymph
#

I would usually see a red line under the problematic line in my IDE, and the error would appear in the compiler as well

final timber
#

That's not typescript

#

You're now looking at how the templating language maps to an object

#

That is framework dependent

#

In this case, react checks that the right inputs are there, but it's not necessarily checking that the right combination of inputs are aligned with a type that you enforce somewhere down stream

#

just that each input is internally valid for its type

dire moat
#

that is typescript though?

#

@blissful nymph are you sure your parameters are correct?

clear cedarBOT
#
n_n#2622
Playground Link

Preview:```ts
...
const test = (
<CircleButton
Icon={1}
IconComponent={2}

</CircleButton>
)
...```

dire moat
#

!ts

#

dang, i forgot bot doesn't like tsx