2

I've run into an issue with typing React components that I've never run into before. I've simplified the issue below.

interface Circle {
  kind?: "circle";
  radius: number;
}
 
interface Square {
  kind: "square";
  sideLength: number;
}
 
type Shape = Circle | Square;

const shape: Shape = {
  sideLength: 7,
  radius: 7,
};

Link to TypeScript Playground containing the above

In the example above, I'd expect the shape variable declaration to throw an error in TypeScript as neither a Circle nor a Square have both a sideLength and a radius. The defined object is neither a Circle nor a Square, so in my eyes it shouldn't be a valid shape.

Is it possible to define the types in such a way that the following items will be valid or errors (as labelled).

// Valid
const shape: Shape = {
  kind: 'circle',
  radius: 7,
};

// Valid
const shape: Shape = {
  radius: 7,
};

// Valid
const shape: Shape = {
  kind: 'square',
  sideLength: 7,
};

// Error
const shape: Shape = {
  sideLength: 7,
  radius: 7,
};

// Error
const shape: Shape = {
  sideLength: 7,
};

// Error
const shape: Shape = {
  kind: 'square',
  radius: 7,
};

// Error
const shape: Shape = {
  kind: 'circle',
  sideLength: 7,
};

EDIT:

For further clarification, in my use-case kind is optional on a Circle. For those familiar with React the actual problem I'm trying to solve is around the as property exposed by styled-components. I want a component to accept an optional as prop which will allow the user to change the component (by-default a button) to a link (a). If the user specifies as="a" then I want TypeScript to compalin if the user then tries to use button-specific props on what is now a link (disabled, for example). The as prop is optional as I don't want all implementors to be required to pass it. In my simplified example above as is analagous to kind, hence why kind is optional.

joshfarrant
  • 1,089
  • 1
  • 14
  • 27
  • 2
    *"The defined object is neither a Circle nor a Square, so in my eyes it shouldn't be a valid shape."* Remember that subtypes are still valid examples of their supertype. Your `shape` **is** a valid shape, because it's a valid `Circle`, because it has a `radius: number` property and no `kind` property (so the `kind` property isn't incompatible with `Circle`). It *also* has an additional property, but that just makes it a subtype, not an invalid `Circle`. I'm intrigued, though, that excess property checks for object literals (which are enabled in your playground) are defeated here. – T.J. Crowder Aug 18 '21 at 15:30
  • 1
    Why do you define `kind` in circle as optional? with your type `const shape: Shape = {radius: 7};` is valid circle. why? because it has all mandatory props (kind is optional) – Alireza Ahmadi Aug 18 '21 at 15:31
  • 3
    If you make `kind` required in `Circle`, the problem goes away, because `shape` is no longer a valid `Shape` (it's neither a `Square` nor a `Circle`): [playground](https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgMLCggNig3gKGWQGtQATALmQCIENsJqBuQ5KOM4AVwGcqQuAWwBG0FgF9C+UJFiIUAZQCOXOFDytSISjR4q1jFkR7AyEADIQQAczAALfkNFQJUsAE8ADortxvyAF40ehxkAB9kZVV1FnwEAHsQHjBkHl9vKgV0lCCCY1MLK1sHZAB2ABpWdk5eKgr8cRYgA) – T.J. Crowder Aug 18 '21 at 15:32
  • Shape would be best defined by having an area. And then square and circle can implement their own calculation. I ported once the [go interface example](https://gobyexample.com/interfaces) that is about shapes in a [blog post](https://dev.to/codingsafari/interfaces-in-typescript-3eh). – The Fool Aug 18 '21 at 15:38
  • It's unclear why you're making kind optional in Circle. What @T.J.Crowder said. As it stands `{sideLength: 7, radius: 7}` can be a `Circle`. Are you asking why additional properties are allowed since it does not meet the definition of a `Square`? – Ruan Mendes Aug 18 '21 at 15:41
  • Just as a response to the comments above - I've updated my question to add a bit more context around why I want `kind` to be optional. – joshfarrant Aug 18 '21 at 16:10
  • 1
    Please see [the answer](https://stackoverflow.com/a/46370791/2887218) to the other question for more information. If you want you can use `ExclusifyUnion` to transform unions of object types with known keys into a new union where the members of the union are mutually exclusive. If I use that for your example, it becomes [this code](https://tsplay.dev/mZaveN). Good luck! – jcalz Aug 18 '21 at 18:56
  • I've tested it and I believe @jcalz 's comment above is the correct solution. Once I've confirmed that it is I'll add another answer with their solution and accept it, unless you want to do that first @jcalz? – joshfarrant Aug 19 '21 at 07:44
  • This question has been closed as a duplicate of [TypeScript a | b allows combination of both](https://stackoverflow.com/questions/46370222/typescript-a-b-allows-combination-of-both) so I don't think SO will allow another answer to be posted here. You could post an answer on the other question, but if it's essentially the same as the one there, it wouldn't be necessary. – jcalz Aug 19 '21 at 12:15

1 Answers1

1

Note that you have defined kind property as an optional property, so if you create a shape object with only radius property is still valid circle:

Look at this object

const shape: Shape = {
  sideLength: 7,
  radius: 7,
};

This is valid circle with one extra property.

So to raise an error in some case you've said, you should make kind property as a required property:

interface Circle {
  kind: "circle";
  radius: number;
}
 
interface Square {
  kind: "square";
  sideLength: number;
}
 
type Shape = Circle | Square;

const shape2: Shape = {
  radius: 7,//Error
};

PlaygroundLink

Alireza Ahmadi
  • 8,579
  • 5
  • 15
  • 42
  • 1
    *"This is valid circle with one extra property."* True, though as I said in the comments, TypeScript's usual excess property checks for object literals would disallow that if it were `shape: Circle` instead of `shape: Shape` (even though it's a valid `Circle`). – T.J. Crowder Aug 18 '21 at 15:46
  • Thank you for your reply. I've just updated the question in response to this and some of the comments elaborating on why (in my use-case) I would like `kind` to be optional. – joshfarrant Aug 18 '21 at 16:09