The property length is not available on a type that can be a string, a number, or an

This snippet defines the variable type

type imageTags: string | number | {
    tag_type: string;
    tag_name: string;
    tag_id: number;
    photo_id: number;
    confidence: number;
}[]

Here is how I attempt to access its properties.

    if (imageTags.length > 0) {
      return imageTags[0].tag_name === image_type;
    }

The variable can be a string, number, or array. So why am I encountering the error message Property 'length' does not exist on type 'string | number | { tag_type: string; tag_name: string; tag_id: number; photo_id: number; confidence: number; }[]'. Property 'length' does not exist on type 'number'.ts(2339)?

typescript

Answer №1

To ensure the validity of imageTags, first verify if its type is an Array before checking its length:

if (Array.isArray(imageTags) && imageTags.length) {
  return imageTags[0].tag_name === image_type;
}

Answer №2

imageTags can be declared as a string, a number, or even an array of objects. If you were expecting it to always be an array containing strings, numbers, and/or objects, then you should use parentheses in your declaration:

type imageTags: (string | number | {
    tag_type: string;
    tag_name: string;
    tag_id: number;
    photo_id: number;
    confidence: number;
})[]

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

Using Delay or Sleep function in NativeScript/Angular for executing tasks asynchronously

My Sleep/Delay function is giving me trouble. I attempted to utilize the delay function from 'rxjs/operators', but it seems to be failing. Below is my code snippet: sentence: string = "Hallo" wordToMorse(sentence: any) { for (var char ...

angulartypescriptnativescript

Creating a connection object for MySql2 in TypeScript within a class

I'm still a beginner when it comes to TypeScript, so I often stumble over simple things. Initially, I had no issues creating a database connection using the code snippet below that was not placed inside a class: const mysql = require('mysql2&apos ...

typescriptnode-mysql2

An issue has been detected by Zone.js where the ZoneAwarePromise `(window|global).Promise` has been unexpectedly replaced

I have recently integrated the Angular2 quickstart code into my existing webpack setup, but I seem to be facing an issue where something is interfering with the promise from zone.js, resulting in an error. Based on my research on Stack Overflow, it appears ...

javascriptangulartypescriptwebpack

Setting up TypeScript to function with Webpack's resolve.modules

Imagine having a webpack configuration that looks like this: resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'], modules: ['my_modules', 'node_modules'], }, You have a ...

typescriptwebpackmodulenode-modules

Using routing with modules instead of components in Angular 10+ involves configuring the routing paths within the module files

I recently tried implementing modules instead of components for routing in Angular 10, but encountered a white screen issue. Any assistance would be greatly appreciated. Here is the code snippet I've been working with: import { NgModule } from &apos ...

javascriptangulartypescript

Utilizing object as props in ReactJS with TypeScript

I'm new to working with ReactJS, and I made the decision to use typescript for my current project. The project is an application that fetches movies from an API and displays them. Take a look at the app: import React from 'react'; import &a ...

reactjstypescript

Identifying Typescript argument types

The given code is functional, but I am looking to refactor it for better clarity using Typescript syntax if possible. class Actions { actions: string[] } type Argument = object | Actions; export class GetFilesContext implements IExecutable { execute( ...

typescriptvariable-types

Utilizing a Link element in conjunction with ListItem and Typescript for enhanced functionality

I am currently using material-ui version 3.5.1 My goal is to have ListItem utilize the Link component in the following manner: <ListItem component={Link} to="/some/path"> <ListItemText primary="Text" /> </ListItem> However, when I tr ...

reactjstypescriptmaterial-ui

An exploration of distributing union types within conditional type arrays in TypeScript

One interesting challenge I am facing involves a conditional type that utilizes a generic type T in order to determine an Array<T> type. For example: type X<T> = T extends string ? Array<T> : never; The issue arises when I input a union ...

typescriptdiscriminated-union

What is the best method for enhancing Express types?

One of my files is named types/express.d.ts declare namespace Express { export interface Response { respondWith(data: any): Response; } } I also have this code snippet in app.js Express.response.respondWith = function(data) { return this.json( ...

typescriptexpress

What is the best way to focus on a particular version of TypeScript?

After upgrading my Angular 2 project to RC1 and the router to v3 alpha3, I encountered the following errors: node_modules/@angular/router/directives/router_outlet.d.ts(10,14): error TS1005: '=' expected. It appears to be a TypeScript version is ...

typescriptangularangular2-routingtypescript1.9

In Typescript, a function that is declared with a type other than 'void' or 'any' is required to have a return value

I'm a beginner in Angular2/Typescript and I am encountering an error while trying to compile my project: An error is showing: A function that has a declared type other than 'void' or 'any' must return a value. Here is the code sn ...

angulartypescript

Stop MatDialog from closing automatically when clicked outside while there are unsaved changes

Is there a way to prevent closing when there are pending changes without success? this.dialogRef.beforeClosed().subscribe(() => { this.dialogRef.close(false); //some code logic //... }); The setting disableClose on MatDialog must remain as false ...

javascriptangulartypescriptangular-materialdialog

Content is not displayed by Angular components

Currently working on a web application using Angular and I have set up a navbar with links to different components. However, when I click on a link in the navbar, the URL changes but the content of the components does not display. Any assistance would be g ...

angulartypescriptangular-ui-router

Using TypeScript with Vue and Pinia to access the store

Is it necessary to type the Store when importing it to TypeScript in a Pinia Vue project? // Component <p>{{ storeForm.firstName }}</p> // receiving an error "Property 'storeForm' does not exist on type" // Store ...

javascripttypescriptvue.jsimportpinia

Playwright failing to execute GraphQL tests due to TypeScript configuration problems

I'm facing an issue with my repo where I am running tests using Playwright against a graphQL URL. Despite configuring the tests, there is an error indicating that the environment variable defining the environment cannot be found. The repository in qu ...

javascripttypescripttypesgraphqlplaywright

Is it possible to utilize useRef to transfer a reference of an element to a child component?

When I want to mount something into the element with id tgmlviewer, I call it a viewer object. This process works smoothly when there is only one component of this kind. import React, { useEffect } from "react"; import { Viewer } from "../.. ...

reactjstypescriptuse-ref

What is the reason that (click) does not send my data within <button>, while (change) within <input> does in Angular and HTML?

I am facing an issue while trying to send data to my Glassfish RESTful server. The method is activated successfully when I use (change) inside the input tag, but it doesn't work when I try using (click) or (change) to activate the method. I attempted ...

htmlangulartypescripthttp

Exploring an Angular Real-World Example Application on Github - Resolving the Following Bug

my surroundings. export const environment = { production: false, api_url: 'localhost:3306/api' }; my personal server is at localhost:3306 (MAMP) The instructions provided are to edit src/environments/environment.ts in order to ch ...

mysqlnode.jsangulartypescriptangular-cli

Testing MatDialog functions in Angular: Learning how to open and close dialogues

I am currently facing an issue with testing the MatDialog open and close functions. No matter what I try, I cannot seem to successfully test either the open or close functions. I am wondering how I can mock these functions in order to properly test them. W ...

angulartypescriptunit-testingjestjsjasmine