Typescript narrow down type based on class property (from .filter, .find, etc.)

user_12397250 0
Viewed 239

I want to narrow down type based on the class property when calling array .filter or .find

class Square {
    type: "square";

    constructor() {
        this.type = "square";
    }
}

class Circle {
    type: "circle";

    constructor() {
        this.type = "circle";
    }
}

const objects = [
    new Circle(),
    new Square(),
    new Circle(),
    new Square(),
];

// I want `circles` to be Circle[], not (Circle | Square)[]
const circles = objects.filter(o => o.type === "circle");

// I want `square` to be Square | undefined, not Circle | Square | undefined
const square = objects.find(o => o.type === "square");

Is this possible in Typescript?

TS Playground

typescript
1 Answers

You can do this with type guard functions. Here's an example with the type guard functions defined ahead of time:

function isSquare(obj: {type: string}): obj is Square {
    return obj.type === "square";
}

function isCircle(obj: {type: string}): obj is Circle {
    return obj.type === "circle";
}

// ...

// I want circles to be Circle[]
const circles = objects.filter(isCircle);

// I want square to be Square | undefined
const square = objects.find(isSquare);

Playground link

...but they can also be inline:

// I want circles to be Circle[]
const circles = objects.filter((obj): obj is Circle => obj.type === "circle");

// I want square to be Square | undefined
const square = objects.find((obj): obj is Square => obj.type === "square");

Playground link

user_1572470
Related