What is the best way to retrieve a value from an array of objects containing both objects and strings in TypeScript?

Question

What is the best way to retrieve a value from an array of objects containing both objects and strings in TypeScript?

Consider this scenario with an array:

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

The goal is to access the value of 'second', which is 'this type', in this manner:


const wantToGet = testData[0].second;

However, TypeScript throws an error stating:


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

It's worth noting that testData[0] always represents an object, not an array. Why is that?

typescript types typeerror

Answer 1

Answer №1

Typescript recognizes that testData is a list containing either an array of strings or an object with the shape

{properties: {number: number; name: string;}

. Because testData[0] can be one of these two possibilities, it must be narrowed down for safe usage.

Alternatively, you can do:

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

Answer 2

Typescript recognizes that testData is a list containing either an array of strings or an object with the shape

{properties: {number: number; name: string;}

. Because testData[0] can be one of these two possibilities, it must be narrowed down for safe usage.

Alternatively, you can do:

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

Answer 3

Answer №2

testData is determined to be of type ({ ... } | string[])[], similar to how

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

is inferred as (number | string)[]. To specify it as a tuple, you can utilize a const assertion,

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

However, this will make testData immutable (including the object and array inside). If mutability is needed, an explicit type annotation should be provided:

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

Alternatively, a helper function can be used 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

Answer 4

testData is determined to be of type ({ ... } | string[])[], similar to how

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

is inferred as (number | string)[]. To specify it as a tuple, you can utilize a const assertion,

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

However, this will make testData immutable (including the object and array inside). If mutability is needed, an explicit type annotation should be provided:

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

Alternatively, a helper function can be used 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

What is the best way to retrieve a value from an array of objects containing both objects and strings in TypeScript?

Answer №1

Answer №2

Similar questions

Encountering a Next.js event type issue within an arrow function

Deeply nested .map function to update state value

``Are you experiencing trouble with form fields not being marked as dirty when submitting? This issue can be solved with React-H

Encountering 'null' error in template with Angular 4.1.0 and strictNullChecks mode

Angular 6: Harnessing the Power of RouterLinks

The search for d.ts declaration files in the project by 'typeRoots' fails

Issue TS2769: No matching overload found for this call. The type 'string | null' cannot be assigned to type 'string | string[]'

Dismiss the necessity of imports in Angular

Using TypeOrm QueryBuilder to establish multiple relations with a single table

Step-by-step guide on implementing Form.create in TypeScript and Ant Design with function components

The Java value is not returned by the Observable<boolean> stream

Top method for managing dates in TypeScript interfaces received from the server

What specific element is being targeted when a directive injects a ViewContainerRef?

Is there a way to view the type signature of the resulting intersection type (type C = A & B) in IDE hints, rather than just seeing the components?

Strategies for modifying the title attribute within an <a> tag upon Angular click event

Receiving the [object HTMLInputElement] on the screen rather than a numerical value

Is there a way to tally up the overall count of digits in a number using TypeScript?

Beware: The use of anonymous arrow functions in Next.js can disrupt Fast Refresh and lead to the loss of local component state

Using Typescript to import Eslint with the `import/named` method

Using "array_agg" in a "having clause" with Sequelize