Filter sum types based on property | TypeScript Community | Page 1

grave pendant May 28, 2023, 11:12 AM

#

type Candy =
  | { name: "Skittles"; type: "Regular" | "Tropical" }
  | { name: "Black Licorice"; qty: number }
  | { name: "Runts"; isBanana: boolean };

Is there anyway to construct a type that accepts a sum type of that nature and allows you to filter based on a property, in this case name, so only include Skittles and Runts?

round blade May 28, 2023, 11:21 AM

#

a sum type?

#

you mean a union?

#

type Filter<Object extends Record<PropertyKey, any>, FilterKey extends keyof Object, AcceptedValue> =
  Object extends any
  ? Object[FilterKey] extends AcceptedValue
    ? Object
    : never
  : never;

type Candy =
  | { name: "Skittles"; type: "Regular" | "Tropical" }
  | { name: "Black Licorice"; qty: number }
  | { name: "Runts"; isBanana: boolean };

type FilteredCandy = Filter<Candy, "name", "Runts" |  "Skittles">;
declare const fc: FilteredCandy;
fc.name;
// ^?

#

!ts

quick dockBOT May 28, 2023, 11:22 AM

#

type Filter<Object extends Record<PropertyKey, any>, FilterKey extends keyof Object, AcceptedValue> =
  Object extends any
  ? Object[FilterKey] extends AcceptedValue
    ? Object
    : never
  : never;

type Candy =
  | { name: "Skittles"; type: "Regular" | "Tropical" }
  | { name: "Black Licorice"; qty: number }
  | { name: "Runts"; isBanana: boolean };

type FilteredCandy = Filter<Candy, "name", "Runts" |  "Skittles">;
declare const fc: FilteredCandy;
fc.name;
// ^? - (property) name: "Runts" | "Skittles"

grave pendant May 28, 2023, 11:23 AM

#

round blade you mean a union?

yes, my bad

#

Pog I thought I would have to change how i stored the data this is amazing

#

Thank you

#

!close

round blade May 28, 2023, 11:24 AM

#

grave pendant Pog I thought I would have to change how i stored the data this is amazing

no, that's one of the point of union types, the order does not matter, it's a logical "OR"

#

also it's conditional types 101

#

here is the doc if you're interested

#

https://www.typescriptlang.org/docs/handbook/2/conditional-types.html

Documentation - Conditional Types

Create types which act like if statements in the type system.

#

the only "trick" here was that you had an union, so you had to use distributive conditional types (the extra Object extends any ? : never wrapping the whole type)

#

@grave pendant

marble veldt May 28, 2023, 11:31 AM

#

you can also do this with a plain Extract

quick dockBOT May 28, 2023, 11:31 AM

#

That_Guy977#5882

Playground Link

Preview:```ts
type Candy =
| {name: "Skittles"; type: "Regular" | "Tropical"}
| {name: "Black Licorice"; qty: number}
| {name: "Runts"; isBanana: boolean}

type Filtered = Extract<
Candy,
{name: "Skittles" | "Runts"}

// ^?
type FilteredName = Filtered["name"]
...```

round blade May 28, 2023, 11:33 AM

#

Extract is just a shorthand, but it's always nice to know how it works under the hood

marble veldt May 28, 2023, 11:37 AM

#

sure but it's more powerful and flexible for this kind of thing, why not just recommend that as the primary solution

#Filter sum types based on property