TypeScript function that takes an object or an array

Question

I am trying write a function that can take an array or an object but running into these conflicts. How do I tell TS specifically not to look for length if something is an object or a property foo if its an array?

interface Stuff {
  list: [] | Obj;
}
interface Obj {
    foo: "bar"
}
function generateSomething(data:Stuff) {
    console.log(data.list.length) // Property 'length' does not exist on type 'Obj'
    console.log(data.list.foo) // Property 'foo' does not exist on type '[]'
}

you can use that variable type is array or string or object with typeof VARIABLE — SefaUn
– SefaUn, Commented Apr 10, 2021 at 15:31
You can't use your data variable until you're 100% certain it's either an array or an object, because otherwise Typescript can't guarantee type saftey. — toastrackengima
– toastrackengima, Commented Apr 10, 2021 at 15:32
You could use Array.isArray( data.list ) in an if statement to distinguish between the two. — Anson Miu
– Anson Miu, Commented Apr 10, 2021 at 15:32
Side note: the type [] is specifically the empty tuple type; an array which definitely has length 0. Presumably in practice you'd want something more useful like string[] (a synonym for Array<string>). — jcalz
– jcalz, Commented Apr 10, 2021 at 17:38

Jeff Bowman · Accepted Answer · 2021-04-10 15:32:17Z

2

You just need to help Typescript understand at runtime which it is.

function generateSomething(data:Stuff) {
    // if ("length" in data.list)
    // if (data.list instanceof Array)
    if (!("foo" in data.list)) {
        console.log(data.list.length);
    } else {
        console.log(data.list.foo);
    }
}

typescript playground

As Ganesh pointed out in the comments, Array.isArray(data.list) works too.

answered Apr 10, 2021 at 15:32

Jeff Bowman

96.2k19 gold badges227 silver badges266 bronze badges

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

Collectives™ on Stack Overflow

TypeScript function that takes an object or an array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related