Detect if union type argument is array or array of arrays in TypeScript

Question

I have an interface called Bounds, and a Sprite class with a field bounds of type Bounds[][]. The Sprite's constructor has a union type argument of Bounds[]|Bounds[][]. If the argument is type Bounds[], I want to simply wrap it in an array:

class Sprite {
    constructor(bounds: Bounds[]|Bounds[][]) {
        if (!bounds) {
            this.bounds = [[ /* some default value */ ]];
        } else {
            if (!bounds.length) {
                throw new Error('Argument \'bounds\' must not be empty.');
            }

            if (!Array.isArray(bounds[0])) {
                this.bounds = [bounds];
            } else {
                this.bounds = bounds;
            }
        }
    }

    bounds: Bounds[][];
}

This code works, but the TypeScript compiler is giving me these errors for the second and third assignments, respectively:

Type '(Bounds[] | Bounds[][])[]' is not assignable to type 'Bounds[][]'.
  Type 'Bounds[] | Bounds[][]' is not assignable to type 'Bounds[]'.
    Type 'Bounds[][]' is not assignable to type 'Bounds[]'.
      Type 'Bounds[]' is not assignable to type 'Bounds'.
        Property 'x' is missing in type 'Bounds[]'.

Type 'Bounds[] | Bounds[][]' is not assignable to type 'Bounds[][]'.
  Type 'Bounds[]' is not assignable to type 'Bounds[][]'.
    Type 'Bounds' is not assignable to type 'Bounds[]'.
      Property 'length' is missing in type 'Bounds'.

How do I either explicitly tell the compiler "at this point, bounds is type Bounds[] or type Bounds[][]" or use the proper if-statements so that the compiler will arrive at this conclusion on its own?

Titian Cernicova-Dragomir · Accepted Answer · 2018-09-20 21:07:58Z

2

If you want to help the compiler along with the reasoning, you can use a custom type guard:

const isArrayOfArrays = <T>(b: T[] | T[][]):b is T[][] => Array.isArray(b[0]);
class Sprite {
    constructor(bounds: Bounds[]|Bounds[][]) {
        if (!bounds) {
            this.bounds = [[ /* some default value */ ]];
        } else {
            if (!bounds.length) {
                throw new Error('Argument \'bounds\' must not be empty.');
            }
            if (!isArrayOfArrays(bounds)) {
                this.bounds = [bounds];
            } else {
                this.bounds = bounds;
            }
        }
    }

    bounds: Bounds[][];
}

The type guard is reusable for any such case.

The lazy way to do it is to just use a type assertion and tell the compiler what you know about the types:

class Sprite {
    constructor(bounds: Bounds[] | Bounds[][]) {
        if (!bounds) {
            this.bounds = [[ /* some default value */]];
        } else {
            if (!bounds.length) {
                throw new Error('Argument \'bounds\' must not be empty.');
            }
            if (!Array.isArray(bounds[0])) {
                this.bounds = [bounds as Bounds[]];
            } else {
                this.bounds = bounds as Bounds[][];
            }
        }
    }

    bounds: Bounds[][];
}

answered Sep 20, 2018 at 21:07

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

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

3 Comments

dx_over_dt Over a year ago

That's exactly what I needed, twice over. I'm very new to TypeScript and did not know of the as and is keywords, nor how to define/use type guards.

dx_over_dt Over a year ago

Is there a conventional place to globally store type guards so that I don't need to call import { isArrayOfArrays } from './type-guards; in every file that uses it? Type guards seem like a good case for the global scope.

Titian Cernicova-Dragomir Over a year ago

@dfoverdx I am not aware of any such conventions.. typeguards are just util functions... whatever you do with those do with type guards :)

Collectives™ on Stack Overflow

Detect if union type argument is array or array of arrays in TypeScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related