"Manipulating values in an array with a union type: a guide to setting and

Question

"Manipulating values in an array with a union type: a guide to setting and

I am currently working on creating an array that can have two different value types:

type Loading = {
    loading: true
}

type Loaded = {
    loading: false,
    date: string,
    value: number,
}

type Items = Loading | Loaded

const items: Items[] = []

Everything is going smoothly so far, but now I want to retrieve a value using the .find method:

const firstLoaded = items.find(({ loading }) => !loading)

The variable firstLoaded should be of type Loaded|undefined - how can I specify this in TypeScript?

console.log(firstLoaded?.date) // doesn't work

Another question arises: how can I change a value from Loading to Loaded within the array?

const firstUnloaded = items.find(({ loading }) => loading) 
firstUnloaded.loading = false // doesn't work

Playground

typescript

Answer 1

Answer №1

If you're facing the first question, consider implementing type guards as a possible solution:

function checkIfLoaded(item: Items): item is Loaded {
  return (item as Loaded).loading === false;
}

if (checkIfLoaded(item)) {
   console.log(firstLoaded.date) // This should produce the desired result
}

Now onto the second inquiry, it's not as straightforward to convert directly. A better approach would be to replace the array element with another element by assigning it like this:

items[index] = transformToLoaded(items[index])

Answer 2

If you're facing the first question, consider implementing type guards as a possible solution:

function checkIfLoaded(item: Items): item is Loaded {
  return (item as Loaded).loading === false;
}

if (checkIfLoaded(item)) {
   console.log(firstLoaded.date) // This should produce the desired result
}

Now onto the second inquiry, it's not as straightforward to convert directly. A better approach would be to replace the array element with another element by assigning it like this:

items[index] = transformToLoaded(items[index])

"Manipulating values in an array with a union type: a guide to setting and

Answer №1

Similar questions

Create Office Script calculations with quotations included

I'm curious about the origins of the "readme" field within the artifact registry file

Why is it necessary for the required type of a function parameter to be able to be assigned to

Ways to verify if TypeScript declaration files successfully compile with local JavaScript library

Having trouble establishing a connection with mongoose and typescript

Error in AngularX TS: Trying to invoke a type that does not have a callable signature

Show data based on the chosen destination

Accessing Child Properties in Parent Component using Typescript

Obtaining a value from within an Angular 'then' block

Exploring Observable Functionality in Angular 6

Typescript: requirement appears to be unmet

Unable to retrieve this information using $http callback

Assign the primeng dropdown's value to the model in a reactive form

Issue Establishing Connection Between Skill and Virtual Assistant Via Botskills Connect

FInding the inner value of a Vuetify chip

How can I ensure that PrimeNG is functioning properly?

Storing the compiled TypeScript file in the source file's directory with the TypeScript compiler

AmCharts stacked bar chart - dynamically adjust value visibility (adjust transparency) based on user interaction

Enhance the express Response type and then export my updated type as a distinct module

Require assistance with Dhtmlx and Wijmo grid context menus, as well as touch events, specifically when utilized on an iPhone's Safari browser