Utilizing TypeScript for Multidimensional Array Parameters

I'm currently working on JavaScript algorithms using TypeScript. Here are the functions I've created:

function steamrollArray(arr: any[]): any[] {
  return arr.reduce(
    (accum: any, val: any) =>
      Array.isArray(val) ? accum.concat(steamrollArray(val)) : accum.concat(val)
  , []);
}

However, I need the arguments to be flexible enough to accept multi-dimensional arrays, like in the examples below:

steamrollArray([[["a"]], [["b"]]]);
steamrollArray([1, [2], [3, [[4]]]]);
steamrollArray([1, [], [3, [[4]]]]);
steamrollArray([1, {}, [3, [[4]]]]);

What is the best way to define the arguments for this function?

I could potentially use Typescript types for this purpose as well, but it may not cover all scenarios. See more information here: typescript multidimensional array with different types.

typescriptmultidimensional-array

Answer №1

To handle both arrays and non-arrays, create a type that can encompass both possibilities. Here is an example:

type PossibleArray<T> = T | T[];

Next, adjust your function as follows:

function flattenArray<T>(arr: PossibleArray<T>[]): T[] {
    return arr.reduce(
        (accum: any, val: any) =>
             Array.isArray(val) ? accum.concat(flattenArray(val)) : accum.concat(val)
    , []);
}

By utilizing this approach, Typescript will accurately interpret the types and reflect your intended functionality.

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

Exploring an array within an object using Typescript and React

As a newcomer to TypeScript and React, I have a project where I need to extract data from a JSON file (back-end) and display it on cards (front-end). I am trying to pass props using cards?.items.map, but I'm uncertain about the correct way to access ...

reactjstypescript

Adding the expiry date/time to the verification email sent by AWS Cognito

After some investigation, I discovered that when a user creates an account on my website using AWS Cognito, the verification code remains valid for 24 hours. Utilizing the AWS CDK to deploy my stacks in the AWS environment, I encountered a challenge within ...

typescriptamazon-web-servicesamazon-cognitoaws-cdk

The configuration for CKEditor5's placeholder feature seems to be malfunctioning

I am currently experimenting with a customized version of CKEditor 5 known as BalloonBlockEditor. Below is the custom build output that I have created: /** * @license Copyright (c) 2014-2023, CKSource Holding sp. z o.o. All rights reserved. * For licens ...

javascriptreactjstypescriptnext.jsckeditor

The journey of communication: uncovering the essence of @input between parent and

I'm diving into Angular and currently working on the @Input phase. Within my main app, there's a child component. Inside app.component.ts, I've declared a test variable that I wish to pass from app.component.ts to child.component.ts. // ap ...

angulartypescriptinputangular7angular8

Sending data from child components to parent components in Angular

I'm facing an issue with retrieving data from a child array named store within user data returned by an API. When trying to access this child array in my view, it keeps returning undefined. Code export class TokoPage implements OnInit { store= nu ...

javascriptangulartypescript

What is the best way to exceed the capacity of a function in TypeScript by incorporating optional

I've been working on converting some code from JavaScript to TypeScript, and I have a specific requirement for the return type of a function. The function should return void if a callback parameter is provided, otherwise it should return Promise<o ...

typescript

When the state changes, the dialogue triggers an animation

Currently, I am utilizing Redux along with material-ui in my project. I have been experimenting with running a Dialog featuring <Slide direction="up"/> animation by leveraging the attribute called TransitionComponent. The state value emai ...

reactjstypescriptreduxmaterial-ui

"Implementing a date picker in your Ionic 5 app: A step-by-step

How can I integrate a date picker similar to the Angular Material Date picker into my Ionic 5 application? I prefer not to use the native ion-datetime component due to limitations such as incomplete calendar display and lack of support for alternative ca ...

angulartypescriptionic-framework

Is it possible to identify and differentiate objects based on their interface types in JavaScript/TypeScript?

Incorporating a library that defines the following interfaces: LocalUser { data { value: LocalDataValue }, ...various other methods etc... } RemoteUser { data { value: RemoteDataValue }, ...various other methods etc... } A User is then ...

typescript

The error message "better-sqlite3 TypeError: o.default is not a constructor" indicates that

As part of my vscode extension development in typescript, webpack, and better-sqlite3, I am attempting to create a database within the C:\Users\userName\AppData\Roaming\Code\User\globalStorage\ folder. However, when ...

typescriptsqlitebetter-sqlite3

AngularJS 2 TypeScript structure

My application includes a user service for managing user operations and an interface for the user object. user.service.ts import {Injectable} from 'angular2/core'; export interface User { name: string; email?: string; picture?: string; } ...

interfacetypescriptangular

TypeScript's function types

Regarding my previous inquiry: Transforming PropTypes compatibility into TypeScript If I have this specific function to pass: const displayIcon = () => <span class='material-icons'>account_circle</span> And, the displayIcon func ...

reactjstypescriptreact-native

What is the process for unsubscribing through an HTTP post request within an Angular application

There is a POST API set up through API Gateway on AWS, but it seems to be returning an infinite loop of arrays, as shown in the image below. How can I make it return just one array? Multiple requests Below is the code snippet: Angular import { Componen ...

angulartypescriptapisubscriptionunsubscribe

Having trouble with JSON parsing in Promise execution

I am in the process of developing a Promise with the objective of adding up any numbers discovered within an array or JSON object. The add() function is designed to receive a series of URLs as a string input and calculate the total sum of those URLs. Her ...

javascriptjsonparsingtypescript

Why styled-components namespace problem in React Rollup build?

I designed a "UI Library" to be utilized in various projects using ReactJS + TypeScript + styled-components and Rollup. However, I am currently encountering issues with conflicting classNames. I am aware that styled-components offers a plugin for creating ...

javascriptreactjstypescriptstyled-componentsrollupjs

Encountering an issue with Typescript Vue class-based components in Laravel Mix: issue arises when attempting to set property 'render' on an undefined object

I have been using Laravel Mix to compile my Vue components, incorporating TypeScript and class-based components. Each class is exported from the component, and every component is required by the context in the main application script. However, during rende ...

typescriptvue.jswebpackvuejs2laravel-mix

Determine the return type based on the input parameter and a mapping strategy

I am encountering an issue with the inferred returnType of the following types. The problem lies in the cityAttractions type, where it should ideally have a type error in its return statement for returning a string instead of an array of strings. Playgrou ...

typescript

Issue encountered: XHR error (404 Not Found) occurred following the installation of typescript-collection in Angular 2 final version

After setting up an Angular 2 project quickly, I added the typescript-collections package using the command: npm install typescript-collections --save However, upon launching my project, I encountered the following error: GET http://localhost:63342/IMA% ...

angulartypescriptnpminstallationhttp-status-code-404

Change the property value prior to running TypeScript validation

I possess the following object: const translations = { msg_hello: 'Hello', msg_bye: 'Bye' } In addition, I have a function that is structured as such: const generateTranslation = (partialKey: string): keyof typeof translations ...

typescripttype-inferencetypescript-generics

Easy-to-use blog featuring Next.js 13 and app router - MDX or other options available

Currently in the process of transitioning a Gatsby website to Next.js (v13.4) and utilizing the new App Router. However, I'm facing some challenges when it comes to migrating the blog section over because there isn't much accurate guidance availa ...

typescriptnext.jsnext.js13