Merely using Array.isArray check is insufficient to prompt the TypeScript compiler about a potential array value

I have a method where the type can be an array, but I need to verify that it is not an array before accessing the argument.

However, despite my check, I am still encountering the following error (excerpt) on line this.setState({ cuisine });:

The type 'readonly SelectOption[]' does not contain the properties 'value' and 'label' as required by type 'SelectOption'

When I hover over cuisine in the error message, VS Code indicates that its type is 

SelectOption | readonly SelectOption[]

Here is the sample code snippet:

interface SelectOption {
  value: number | string;
  label: string
}

private onCuisineChange(cuisine: ValueType<SelectOption>): void {
    if (Array.isArray(cuisine) && cuisine.length > 1)  {
        throw new Error(`Expected cuisine to be an object, but got ${cuisine}`);
    }

    if (cuisine) {
        this.setState({ cuisine });
    } else {

    }
}

This is using TypeScript version 3.5.3

typescript

Answer №1

When it comes to TypeScript, the type inference is spot on in this scenario. Not only does it check for arrays, but also includes a condition like && cuisine.length > 1. This means that an exception will only be thrown if the array cuisine actually has more than one element.

Even though the lower if statement may still run with an empty array or an array containing just one element, hence the type 

SelectOption | readonly SelectOption[]
.

However, as of version 3.5.1, there is an open issue regarding TypeScript#17002 (thanks @SeanVieira) which talks about how Array.isArray doesn't properly narrow down readonly arrays. One workaround suggested is to add an overload in your project declarations to help TypeScript correctly narrow readonly arrays:

Referencing 

declare global {
    interface ArrayConstructor {
        isArray(arg: ReadonlyArray<any> | any): arg is ReadonlyArray<any>
    }
}

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

TypeError thrown by Mapbox markers

Looking to incorporate markers into my map using Mapbox. Below is the Angular TypeScript code I am working with: export class MappViewComponent implements OnInit { map: mapboxgl.Map; lat = 41.1293; lng = -8.4464; style = "mapbox://styles/mapb ...

javascriptangulartypescriptmapbox-gl-js

Update a specific element within Angular framework

Just starting out with angular and facing a seemingly simple issue that I can't seem to solve despite trying various solutions found on SO. I have created a login component where upon submission, the user is redirected to their profile page. While I a ...

javascriptangulartypescriptangular-components

Building a React Typescript service with axios functionality

When creating a service and calling it from the required functional component, there are two different approaches you can take. 1. export const userProfileService = { ResetPassword: async (userId: string) => { var response = await http.get ...

javascriptreactjstypescriptreact-hooksjavascript-objects

What is the best way to establish the primary color for the entire app?

Is there a way to easily set the color for @react-native-material/core's theme? I managed to change the color but I don't want to have to do it individually for each component. ...

typescriptreact-nativematerial-ui

Angular 5 error handler does not support service calls

My HTTP calls are placed inside a service, as they should be. Within that service, I inject another service for handling error notifications. In an interesting turn of events, I noticed that when I place the notification call inside the catchError pipe, e ...

angulartypescriptrxjs

Use an observable stream instead of nesting promise.all to aggregate data from an array

In our Angular application, we have a method that combines the results of 3 APIs into a single list. loadPlaces$ = this.actions$.pipe( ofType(PlaceActionTypes.LOAD_PLACES), switchMap((action: LoadPlaces) => from(this.service.findAreas()). ...

angulartypescriptrxjs

Retrieving information from a Kendo grid cell

I am working on a web application that utilizes Kendo Grid. How can I retrieve the values of the "Ticket No" from the selected checkboxes? https://i.stack.imgur.com/aPOje.png This is my code: var grid = $("#poGrid").data("kendoGrid"); grid.items().filte ...

jquerycheckboxtypescriptkendo-grid

Please provide TypeScript code for a React wrapper function that augments a component's props with two additional functions

During the course of my project, I implemented a function wrapping React component to incorporate undo/redo functionality using keyboard shortcuts Ctrl+Z and Shift+Ctrl+Z. Here is an example: import React from 'react'; interface WithUndoRedoProp ...

javascriptreactjstypescript

Can inner function calls be mimicked?

Consider this scenario where a module is defined as follows: // utils.ts function innerFunction() { return 28; } function testing() { return innerFunction(); } export {testing} To write a unit test for the testing function and mock the return value ...

javascripttypescriptjestjs

Best practices for safely handling dynamic keys in Typescript

I am searching for a secure method to create keyed objects in this manner: interface Types { RED: 'RED'; BLUE: 'BLUE'; GREEN: 'GREEN'; } type TypeKeys = keyof Types; const COLORS: Types = { RED: 'RED', B ...

reactjstypescriptobjectkeytype-safety

What causes npm start to fail in Angular 6 after incorporating social login functionality?

I am currently working on integrating Social Login functionality into my app. I have attempted to incorporate the following: npm install --save angular-6-social-login-fixed npm install --save angular-6-social-login npm install --save angular-6-social-log ...

angulartypescriptangular6

Incorporate a JavaScript script into an Angular 9 application

I have been experiencing issues trying to add a script.js file to angular.json and use it in one component. Adding a script tag directly to my HTML file is not the ideal solution. Can someone suggest an alternative approach or point out what I may be missi ...

javascriptangulartypescripttags

Troubleshooting a Missing Angular (8) Pipe Error in Your Ionic 4 Application

Despite seeing similar questions posted here, none have provided a solution to my issue. I believe I am implementing it correctly, but clearly something is not right. In the app I'm developing with Ionic 4, I need to add a key to a URL in a gallery. ...

angulartypescriptionic-framework

Extracting data from an array using Angular

Currently, I am developing an Angular application that involves handling an array structured like the one below. [ { Code: "123", Details:[ { Id: "1", Name: "Gary" }, { ...

javascriptangulartypescriptangular8

Is there a way to use dot notation in TypeScript for a string data type?

I'm currently in the process of developing a function API with a specific format: createRoute('customers.view', { customerId: 1 }); // returns `/customers/1` However, I am facing challenges when it comes to typing the first argument. This ...

typescript

NestJS does not recognize TypeORM .env configuration in production build

Currently, I am developing a NestJS application that interacts with a postgres database using TypeORM. During the development phase (npm run start:debug), everything functions perfectly. However, when I proceed to build the application with npm run build a ...

typescriptenvironment-variablesnestjstypeorm

Is it advisable to prevent Set and Map from having unspecified generics in TypeScript?

Upon reviewing some old code that I wrote, I realized that I had neglected to specify a generic type for a Set. The type was set as Set<unknown>. Strangely, despite this, I found that I could still utilize all the methods of the Set without encounter ...

javascripttypescript

Using WebdriverIO with Angular to create end-to-end tests in TypeScript that involve importing classes leads to an error stating "Cannot use import statement outside a module."

I am facing an issue while trying to set up a suite of end-to-end tests using wdio. Some of the tests utilize utility classes written in TypeScript. During the compilation of the test, I encountered the following error: Spec file(s): D:\TEMP\xx& ...

angulartypescriptwdio-jasminewdio-v6

Tips for quietly printing a PDF document in reactjs?

const pdfURL = "anotherurl.com/document.pdf"; const handleDirectPrint = (e: React.FormEvent) => { e.preventDefault(); const newWin: Window | null = window.open(pdfURL); if (newWin) { newWin.onload = () => ...

javascriptreactjstypescript

Transform a literal string type definition into a string value (similar to the typeof operator), or is it the other way around in TypeScript?

Is there a way to retrieve the string value of a string literal type without having to define it twice, similar to the typeof operator in C#? myStringLiteral: 'STRING TYPE'; myString: string = typeof(myStringLiteral); // I want myString to be e ...

stringtypescripttypesconstants