How to get a value of object in an array of object and string in TS?

Question

Let's say I have this array

const testData = [
  { properties: { number: 1, name: 'haha' } , second: 'this type'},
  ['one', 'two', 'three'],
];

I want to get the value of 'second' which is 'this type' like this:


const wantToGet = testData[0].second;

But the typescript generates an error saying


Property 'second' does not exist on type 'string[] | { properties: { number: number; name: string; }; second: string; }'.
Property 'second' does not exist on type 'string[]'

testData[0] is always an object, not an array. Why is that?

Federkun · Accepted Answer · 2022-11-03 21:40:59Z

2

What typescript knows is that testData is a list of either an array of strings or an object of shape {properties: {number: number; name: string;}. Because testData[0] can be either of the two, you need to narrow it down to use safely.

Or you can

const testData = [
  { properties: { number: 1, name: 'haha' } , second: 'this type'},
  ['one', 'two', 'three'],
] as const;

answered Nov 3, 2022 at 21:40

Federkun

37.2k8 gold badges82 silver badges93 bronze badges

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

Comments

k.tten · Accepted Answer · 2022-11-03 21:46:24Z

0

testData is inferred as ({ ... } | string[])[], just like how

const thing = [1, "2", 3, "4"];

is inferred as (number | string)[]. If you want it to be inferred as a tuple, you can use a const assertion,

const testData = [
  { properties: { number: 1, name: 'haha' } , second: 'this type'},
  ['one', 'two', 'three'],
] as const;

but this makes testData immutable (even the object and array inside are immutable). If you want to be able to mutate it, you should give it an explicit type annotation:

const testData: [{ properties: { ... } ... }, string[]] = [
  { properties: { number: 1, name: 'haha' } , second: 'this type'},
  ['one', 'two', 'three'],
];

Or you can use a helper function to infer it as a tuple:

function tuple<T extends readonly unknown[]>(args: [...T]) { return args }

const testData = tuple([
  { properties: { number: 1, name: 'haha' } , second: 'this type'},
  ['one', 'two', 'three'],
]);

Playground

answered Nov 3, 2022 at 21:46

k.tten

26.8k4 gold badges34 silver badges63 bronze badges

1 Comment

lemonshampoo Over a year ago

I don't need to change the data this time, so 'as const' will work. But thank you for the other ways!

Collectives™ on Stack Overflow

How to get a value of object in an array of object and string in TS?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest