Access typescript uniontype inside array type

Question

I'm actually not event sure how to phrase the question correctly. From a code generator I get the following interface as an input for an API request:

interface foo {
  bar: ('foo' | 'bar')[] 
}

To access this I can create aliases like type xy = foo['bar']. But I actually have no idea how to get a type that includes the union inside an array. I want to have a type type union = 'foo' | 'bar' by referencing the interface.

I already tried to use index anotation like type union = foo['bar'][string] or type union = foo['bar'][number] but that throws an error.

sno2 · Accepted Answer · 2022-03-20 13:30:02Z

2

You can do this by accessing the bar property via interface property access notation: foo["bar"], then access the item union by indexing with number to get the type of the items. Here is the full code:

interface foo {
  bar: ('foo' | 'bar')[] 
}

type FooBarItem = foo["bar"][number];
//   ^? "bar" | "foo"

TypeScript Playground Link

answered Mar 20, 2022 at 13:30

sno2

4,3832 gold badges21 silver badges42 bronze badges

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

Comments

DaSch · Accepted Answer · 2022-03-20 14:05:14Z

0

Well, actually the issue I had was a bit different and is missing in my example.

If you have

interface Foo {
  bar?: ('foo' | 'bar')[] 
}

Then type BarOrFoo = Foo['bar'][number]; // "bar" | "foo" will not work.

But instead the following works

type BarOrFoo = Exclude<Foo['bar'], undefined>[number]

answered Mar 20, 2022 at 14:05

DaSch

9411 gold badge6 silver badges22 bronze badges

1 Comment

jsejcksn Over a year ago

New question information belongs in the question content.

jsejcksn · Accepted Answer · 2022-03-20 15:01:32Z

-1

Update based on new information you presented:

Because the property is optional, you can use the type utility NonNullable<Type> to exclude null and undefined from its union. Then, you can use an indexed access type (number in this case to access elements in an array, which are indexed by number keys).

TS Playground

interface Foo {
  bar?: ('foo' | 'bar')[];
}

type BarOrFoo = NonNullable<Foo['bar']>[number]; // "bar" | "foo"

edited Mar 20, 2022 at 15:01

answered Mar 20, 2022 at 13:30

jsejcksn

34.6k5 gold badges55 silver badges79 bronze badges

Collectives™ on Stack Overflow

Access typescript uniontype inside array type

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related