Use conditional type in function

Question

I am trying to use conditional type to link two parameters in a function, but I couldn't sort out to link 2 parameters when defining a function. Below is the simplified sample or the live version.

type Circle = { type: "circle"; data: { radius: number } };

type Rect = { type: "rect"; data: { width: number; height: number } };

type DefinedShape = Circle | Rect;

type FilterShapeByType<Shape, Type> = Shape extends { type: Type }
  ? Shape
  : never;

type DrawShape = <T extends DefinedShape["type"]>(
  type: T,
  data: FilterShapeByType<DefinedShape, T>["data"]
) => void;

let drawShape1: DrawShape = () => {};
drawShape1("rect", { height: 12, width: 22 }); // pass
drawShape1("rect", { height: 12, width: 22, radius: 23 }); // failed, radius is not defined
drawShape1("circle", { radius: 12 }); // pass
drawShape1("circle", { radius: 12, len: 23 }); // failed, len is not defined

const drawShape2: DrawShape = (type, data) => {
  switch (type) {
    case "circle":
      console.log(data.radius); // failed, Property 'radius' does not exist on type '(FilterShapeByType<Circle, T> | FilterShapeByType<Rect, T>)["data"]'.
      break;
    case "rect":
      console.log(data.height, data.width);
      break;
  }
};

the original goal is to link the two parameters in DrawShape function, meaning when type is circle, the data should be {radius: number}. I use the conditional type FilterShapeByType to sort it out.

All good before I try to define a function drawShape2. I am expecting when I use switch for the type for circle, the typescript should smart enough to assume data should be the Circle['data'], however it didn't. Wondering is there easy to make it automatically?

Playground

typescriptlang.org/docs/handbook/…

Jared Smith
– Jared Smith

2021-03-22 11:42:00 +00:00
Commented Mar 22, 2021 at 11:42 — Jared Smith
– Jared Smith, Commented Mar 22, 2021 at 11:42

captain-yossarian from Ukraine · Accepted Answer · 2021-03-22 10:50:31Z

2

There is one trick. Don't tell anybody :D

Just use named tuples


  function drawShape2(...args: [type: 'circle', data: Circle['data']] | [type: 'rect', data: Rect['data']]) {
    switch (args[0]) {
      case "circle":
        const [type1, data1] = args;
        break;
      case "rect":
        const [type2, data2] = args
        break;
    }
  };

answered Mar 22, 2021 at 10:50

captain-yossarian from Ukraine

33.5k5 gold badges41 silver badges78 bronze badges

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

1 Comment

Ron Over a year ago

In my case there are many types, I think it will be verbose and duplicated. Anyway, It's a good tricky, learned, thank you!

Owl · Accepted Answer · 2021-03-22 11:31:01Z

2

I'm curious of why your code isn't working. Looks like it should work, but it doesn't! I might have missed something, or it's a limitation from TypeScript.

Either way, here's a workaround that I prefer (using type guard):

type Shapes = {
  circle: { radius: number },
  rect: { width: number; height: number }
}

type ShapeTypes = keyof Shapes;

type DrawShape = <T extends ShapeTypes>(type: T, data: Shapes[T]) => void;

const isShapeOf = <T extends ShapeTypes>(expected: T, type: string, data: any): data is Shapes[T] => {
  return expected === type;
}

const drawShape: DrawShape = (type, data) => {
  if (isShapeOf("circle", type, data)) {
    data.radius; // pass
  } else if (isShapeOf("rect", type, data)) {
    data.radius; // radius does not exist
    data.width; // pass
    data.height; // pass
  }
};

drawShape("rect", { height: 12, width: 22 }); // pass
drawShape("rect", { height: 12, width: 22, radius: 23 }); // failed, radius is not defined
drawShape("circle", { radius: 12 }); // pass
drawShape("circle", { radius: 12, len: 23 }); // failed, len is not defined

Typescript Playground

answered Mar 22, 2021 at 11:31

Owl

6,9033 gold badges21 silver badges33 bronze badges

1 Comment

Ron Over a year ago

Seems we have to put the type guard there, and it does the job. However, there is one flaw with this approach, when they are many types, the if else, else... statements become very annoying, and it will not warn me if I add one more type.

0Valt · Accepted Answer · 2021-03-23 07:42:27Z

The Why

That's not how the ~~force~~ TypeScript works.

Let's take a closer look at what the type of data is in the drawShape2 signature:

(parameter) data: (FilterShapeByType<Circle, T> | FilterShapeByType<Rect, T>)["data"]

What does it tell us? That the type of data depends on what T is resolved to. In your case, T is constrained to DefinedShape["type"], or, inlined, "circle" | "rect" (off-note: unless you want to confuse people, please, change the type to something more customary like kind).

Until you call the function with either "circle" or "rect" as type, T stays unresolved. With that said, let's test what is the actual type of data given the union "circle" | "rect":

type testFilter = FilterShapeByType<DefinedShape, "circle"|"rect">["data"];
// type testFilter = {
//     radius: number;
// } | {
//     width: number;
//     height: number;
// }

It should become obvious why you can't access either of the properties: because you can only access members without type guards if they are present on all constituents of the union (see discriminated unions). switch statement does not matter here as the compiler is unable to narrow the union due to unresolved T.

If you call the function, you will see there is no error:

drawShape2("circle", { radius:5 }) //OK, no error

The What

Now, what could be done to solve this?

There are several approaches, most are outlined in other answers, I would only like to mention that if you are in control of the public contract, use the DefinedShape directly since information necessary for narrowing is contained in type property:

const drawShape3 = (shape: DefinedShape) => {
  switch(shape.type) {
    case "circle": {
      console.log(shape.data.radius); //OK
      break;
    }
    case "rect": {
      console.log(shape.data.height, shape.data.width); //OK
      break
    }
  }
};

Collectives™ on Stack Overflow

Use conditional type in function

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related