Variable type guard with Typescript

Question

I'm trying to create a higher order function that allows me to create a function which confirms a type via a type guard.

type Shape = Circle | Triangle | Rectangle
enum Type { Circle, Triangle, Rectangle }

interface Circle {
  type: Type.Circle;
  diameter: number;
}

interface Triangle {
  type: Type.Triangle;
  width: number;
}

interface Rectangle {
  type: Type.Rectangle;
  width: number;
  height: number;
}

const isShape = (condition: Type) => (shape: Shape): shape is ? => shape.type == condition;

const isCircle = isShape(Type.Circle);

In the above example, I want the isCircle function to return whether the type is Circle. The ? is a placeholder since I can't get it to work.

Related Mapping from discriminated union property to object type. In short, without restructuring your types, it won't be possible to give a signature to isShape that does what you want. — CRice
– CRice, Commented Oct 16, 2018 at 22:58
@CRice, how would the types have to be structured in order to achieve this? — Lennard Schutter
– Lennard Schutter, Commented Oct 17, 2018 at 1:27

Akshar Patel · Accepted Answer · 2018-10-17 01:34:14Z

2

To achieve your objective, here is what your isShape function should look like:

const isShape = <T extends Shape>(condition: Type) => {
  return function(shape: T): shape is T {
    return shape.type == condition;
  };
};

const isCircle = isShape<Circle>(Type.Circle);

edited Oct 17, 2018 at 1:34

answered Oct 16, 2018 at 22:41

Akshar Patel

5,8154 gold badges23 silver badges25 bronze badges

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

5 Comments

Matt McCutchen Over a year ago

This is wrong: it does not establish a relationship between condition and T.

Lennard Schutter Over a year ago

@Akshar Patel, unfortunately when this function is implemented Typescript will only tell that the type is Shape.

Akshar Patel Over a year ago

@LennardSchutter: How about now?

Lennard Schutter Over a year ago

@Akshar Patel, this works, amazing! I didn't realise I could pass the <Circle> to the function caller.

Lennard Schutter Over a year ago

@Akshar Patel, I ended up making it a little more generic.

const isType = <U extends { type: E }, E>() => <T extends U>(condition: E) =>   (obj: U): obj is T => obj.type == condition;

CRice · Accepted Answer · 2018-10-17 01:42:22Z

2

You need to provide a direct way for TypeScript to figure out what Shape is associated with a given Type. One way to do that is to explicitly provide a mapping between the two, which can then be used to replace your definition for Shape. So, for example:

// Instead of this:
// type Shape = Circle | Triangle | Rectangle

// Use this:
type TypeToShape = {
  [Type.Circle]: Circle,
  [Type.Triangle]: Triangle,
  [Type.Rectangle]: Rectangle,
}

// Circle | Triangle | Rectangle
type Shape = TypeToShape[keyof TypeToShape];

Then, given a specific Type, it's easy to map that to the Shape associated with it:

// Use the type map to tell typescript what shape goes with the Type K:
const isShape = <K extends Type>(condition: K) => (shape: Shape): shape is TypeToShapeMap[K] => shape.type == condition;

const isCircle = isShape(Type.Circle); // return type: shape is Circle
const isTriangle = isShape(Type.Triangle) // return type: shape is Triangle

answered Oct 17, 2018 at 1:42

CRice

32.6k5 gold badges63 silver badges75 bronze badges

2 Comments

Lennard Schutter Over a year ago

Thanks for your effort, @CRice. Although this works also, I find the other answer to be easier to implement and would not require a change to my current code.

Akshar Patel Over a year ago

@CRice: This is a really clean solution.

Collectives™ on Stack Overflow

Variable type guard with Typescript

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related