Unable to add elements to an array with a UnionType

Question

Unable to add elements to an array with a UnionType

I have been experimenting with UnionTypes in TypeScript and I had an idea for a scenario where they could be useful. However, I am puzzled by the error message that keeps popping up:

Argument of type '{ name: string; }' is not assignable to parameter of type 'string & { name: string; }'

While there are workarounds to make it work, I am more interested in understanding why it is not functioning as expected.

let newArray: string[] | { name: string }[] = new Array();

//just a boolean to know when is one type or the other
    if (isMultiple) {
      otherArray.forEach((item: { name: string }) => {
        newArray.push(item)
      })
    }
    else {
      otherArray.forEach((item: { name: string }) => {
        newArray.push(item.name)
      });
    }

    return newArray

javascript arrays typescript typing union-types

Answer 1

Answer №1

Having both types of arrays simultaneously is not possible. One approach is to define the array first and create it separately based on conditions.

let newArr: string[] | { name: string }[];

//boolean flag to differentiate between types
    if (isMultiple) {
      newArr = new Array< { name : string }>();
      otherArray.forEach((item: { name: string }) => {
        newArr.push(item)
      })
    }
    else {
      newArr = new Array<string>();
      otherArrayforEach((item: { name: string }) => {
        newArr.push(item.name)
      });
    }

    return newArr

Answer 2

Having both types of arrays simultaneously is not possible. One approach is to define the array first and create it separately based on conditions.

let newArr: string[] | { name: string }[];

//boolean flag to differentiate between types
    if (isMultiple) {
      newArr = new Array< { name : string }>();
      otherArray.forEach((item: { name: string }) => {
        newArr.push(item)
      })
    }
    else {
      newArr = new Array<string>();
      otherArrayforEach((item: { name: string }) => {
        newArr.push(item.name)
      });
    }

    return newArr

Answer 3

Answer №2

In order to avoid mixed arrays (

let newArray: (string | { name: string })[]

), you have the option of using

// a simple switch to determine the type
if (isMultiple) {
  const newArray: { name: string }[] = [];
  otherArray.forEach((item: { name: string }) => {
    newArray.push(item)
  });
  return newArray;
} else {
  const newArray: string[] = [];
  otherArray.forEach((item: { name: string }) => {
    newArray.push(item.name)
  });
  return newArray;
}

Answer 4

In order to avoid mixed arrays (

let newArray: (string | { name: string })[]

), you have the option of using

// a simple switch to determine the type
if (isMultiple) {
  const newArray: { name: string }[] = [];
  otherArray.forEach((item: { name: string }) => {
    newArray.push(item)
  });
  return newArray;
} else {
  const newArray: string[] = [];
  otherArray.forEach((item: { name: string }) => {
    newArray.push(item.name)
  });
  return newArray;
}

Unable to add elements to an array with a UnionType

Answer №1

Answer №2

Similar questions

Is there a way to dynamically integrate the Insert Column feature into the ContextMenu of a Syncfusion Treegrid?

Merge the elements of an array to form a clickable hyperlink

The JavaScript function you are trying to access is not defined, resulting in a

Having issues with @ts-ignore in Typescript on a let variable that is not reassigned?

Complete picture in a circular div with aspect ratio

Send form using AJAX with a callback function

Data vanishing in upcoming authentication session in test environment

The post feature is not delivering the object as expected

Step-by-step guide to implementing onClick functionality within a component

Incorporating Only XSD Files into an HTML Input Tag: A Simple Guide

What is the best way to divide a GraphQL schema to avoid circular dependencies?

Simple CSS for creating a "red alert badge" with a number count

Encountering a problem when making a HTTPS GET request to a REST API using

Managing fresh data entries in meteorology

The error encountered is an unhandled rejection with a message stating "TypeError: Cannot access property 'username' of null

Angular Azure Maps Animation Issue: Troubleshooting Guide

What is the best way to dynamically update or display unique CSS styles when a service is invoked or provides a response in AngularJS using JavaScript

Tips for transferring the data from one yform value to another field

Having trouble passing a JavaScript variable through AJAX requests

Having trouble sending a FormData object with Axios for a user uploaded file in a React, Node.JS project