"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

The 'path' property is not found on the 'ValidationError' type when using express-validator version 7.0.1

What is the best way to implement a Promise Function within a For loop?

Generate a fresh class instance in Typescript by using an existing class instance as the base

When the child component's form is marked as dirty, the parent component can access it

How to utilize the async pipe on an observable<Object> and connect it to a local variable in the HTML using Angular

Fill out FormBuilder using data from a service within Angular2

Cleaning up HTML strings in Angular may strip off attribute formatting

A step-by-step guide on accessing the data from an uploaded JSON file in a React application

Is it possible that using npm link could be the root cause of the "module not

The expandable column headers in Primeng are mysteriously missing

Unexpected TypeError when using Response.send()

Replace the default Material UI 5.0 typography theme with custom fonts on a global scale

The alignment of the first and second steps in Intro.js and Intro.js-react is off

How can I modify my Axios Post request to receive a 201 status code in order to successfully save the data?

The issue with ng-select arises when the placeholder option is selected, as it incorrectly sends "NULL" instead of an empty string

The young one emerges within the SecurePath component temporarily

Passing a method from a component to a service in Angular 9

Encountering an issue when trying to download a PDF from an Angular 6 frontend using a Spring Boot API - receiving an error related to

Pressing a button that appears multiple times and is also embedded within layers

When utilizing Typescript to develop a form, it is essential to ensure that the operand of a 'delete' operator is optional, as indicated by error code ts(279