A TypeScript function designed to accept either an object or an array as input

Currently, I'm having trouble writing a function that is able to handle both arrays and objects without running into conflicts. How can I instruct Typescript to avoid searching for length if the input is an object, or for property foo if it's an array?

interface Stuff {
  list: [] | Obj;
}
interface Obj {
    foo: "bar"
}
function generateSomething(data:Stuff) {
    console.log(data.list.length) // Property 'length' does not exist on type 'Obj'
    console.log(data.list.foo) // Property 'foo' does not exist on type '[]'
}

Answer №1

If you want Typescript to understand the nature of the data at runtime, you can simply provide the necessary information.

function generateSomething(data:Stuff) {
    // if ("length" in data.list)
    // if (data.list instanceof Array)
    if (!("foo" in data.list)) {
        console.log(data.list.length);
    } else {
        console.log(data.list.foo);
    }
}

Check out this typescript playground for reference!

As pointed out by Ganesh in the comments, using Array.isArray(data.list) is also a valid approach.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There was a serious issue: The mark-compacts were not working effectively near the heap limit, resulting in allocation failure - the JavaScript heap ran out of memory during the

I recently set up a t2.micro server on AWS and encountered an issue when running our application with the command "sudo npm start". The error message I received was: "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript he ...

"HandsOnTable, showcasing its capability to effortlessly load data containing formulas

I am working with a HandsonTable that receives data in the form of an array of arrays. After applying some formulas and saving the data, I am now facing an issue while trying to load the data directly into the HandsonTable component in ReactJs. The problem ...

Sending logs from a NodeJS application to Datadog without relying on the Datadog Agent may be achieved by utilizing

Seeking a way to transfer logs from a Node.js app to Datadog without the requirement of installing the Datadog Agent on the machine. Are there other integration options or libraries that can accomplish this task? I aim to maintain efficient log monitorin ...

Leveraging the power of map in an Angular typescript file

I've been attempting to populate a Map in Angular by setting values dynamically. When certain buttons are clicked, the onClick function is invoked. typeArray: Map<number,string>; Rent(movieId: number){ this.typeArray.set(movieId,"Rental ...

How to initiate a refresh in a React.js component?

I created a basic todo app using React, TypeScript, and Node. Below is the main component: import * as React from "react" import {forwardRef, useCallback, useEffect} from "react" import {ITodo} from "../types/type.todo" import ...

Tips for managing a new page when a button is clicked in Puppeteer

I am currently utilizing puppeteer in a project aimed at testing a specific web page. This webpage contains numerous buttons that, when clicked, open a new tab within the browser. How can I effectively manage this using puppeteer? const puppeteer = requir ...

Access the CSV file using Office365 Excel via a scripting tool

Objective I want to open a CSV file using Office365's Excel without actually saving the file on the client's machine. Challenge The issue with saving raw data on the client's machine is that it leads to clutter with old Excel files accumu ...

How to access elements by their class name in Angular

Recently, I encountered a situation with this specific span element: <span *ngFor="let list of lists[0].question; let i = index" id="word{{ i }}" (click)="changestyle($event)" class="highlight"> {{ list}} < ...

Encountering Typescript issues while trying to access @angular/core packages

Recently, I made an update to my Ionic app from Angular 7 to Angular 8, and an odd error popped up: https://i.sstatic.net/icZOb.png The issue lies in the fact that I am unable to access any of the standard classes stored in the @angular/core module. This ...

A guide to mocking axios in React by leveraging the axios.create function

Currently, I am working on a React project where I am utilizing axios for handling http requests. To manage the axios configuration, I have set up a separate file with the following setup: import axios from 'axios' export default axios.create({ ...

What is the best way to format a string into a specific pattern within an Angular application

In my Angular component, I have 4 fields: customerName, startDate, and startTime. Additionally, I have a fourth field that is a textarea where the user can see the message that will be sent via email or SMS. Within my component, I have defined a string as ...

The Order ID field in the Serenity-Platform's Order Details tab is not registering orders

I've been working on replicating the functionality of Orders-Order detail in my own project. https://i.stack.imgur.com/Bt47B.png My custom module is called Contract and Contract Line item, which I'm using to achieve this. https://i.stack.imgur ...

Passing data from a child component to a parent component in Angular 6 using MatDialog and EventEmitter

Currently able to establish communication between two components but unsure of how to pass the user-selected value as an Object via event emitter from the MatDialog component to the parent component. I aim to transmit the selected option's value and t ...

An error occurred: The property 'toUpperCase' cannot be read of an undefined Observable in an uncaught TypeError

Encountering an issue during the development of a mobile app using the ionic framework for a movie application. After finding an example on Github, I attempted to integrate certain functions and designs into my project. The problem arises with the 'S ...

What are the advantages of using the fat arrow instead of straight assignment?

Here we have a code snippet sourced from the 30 seconds of code website. This example, intended for beginners, has left me feeling stumped. The question arises: const currentURL = () => window.location.href; Why complicate things when you could just ...

How can we seamlessly switch between video tags in ReactJS to prevent the dreaded loading black screen from appearing?

Context I have incorporated a video player represented by VideoJS in my project. This player obtains videoData via the socket event video_data from the server and then switches to the received video source. The server operates on-premise, housing all vid ...

Exploring arrays within objects with Angular

REACT: this.countries = this.api.fetchAllCountries(); this.countries.forEach(item => { this.countryData.push(item); }); VUE: <div v-for="country in countryData" @click="displayCountryInfo(country ...

Having trouble triggering the button with querySelector in Angular

I have a dynamic page where I need to click on a button. I tried the code below, but it is not working and not showing any alert. However, if we use the same code in the browser console, it executes and shows an alert. Can someone please suggest how to r ...

Using Cmd+Click in iTerm2 does not function properly when trying to navigate to TypeScript error messages

The appearance of the file name in the output is as follows: path/filename/ext(line,col) as opposed to the typical path/filename/ext:line This deviation causes iTerm2 to display an error message instead of opening the file: An application is not ass ...

Encountering a problem with updating values in local storage using ReactJS

My goal is to store values in local storage, but I am facing an issue where it saves an empty array in local storage the first time I click on Set Item. After the initial setup, the code works as expected. I am relatively new to React and TypeScript. Below ...