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

Switching from dark mode to light mode when reloading or navigating to a new page

Distinguishing between type assertion of a returned value and defining the return type of a function

The process of modifying all interface values in typescript

Encountering a ReferenceError while attempting to implement logic on a newly created page

Angular 2 validation issue not functioning as anticipated

Is it possible to create an observable with RXJS that emits only when the number of items currently emitted by the source observables matches?

Is it possible to determine the function type of a pointer to a member function?

navigating through different pages on a react-native application

Instructions for including a class are ineffective

Creating mock objects with Jest

Tips for monitoring the loading of data in TypeScript with observers?

What is the correct way to include a JSON file in TypeScript?

A guide on logging errors triggered within reducers

In React and TypeScript, when I pass a state as a prop, the data fails to render

MUI Autocomplete refuses to accept a value

Having trouble connecting 'chartData' to a 'div' in Angular 2 because it is not recognized as a valid property?

What are the benefits of pairing Observables with async/await for asynchronous operations?

Declaring Objects and Relationships in Angular Models

Guide on linking enum values with types in TypeScript

What is the correct way to assign multiple types to a single entity in TypeScript?