The parameter type '{ src: string; thumb: string; }' cannot be assigned to the 'never' type in the argument

Sample Typescript Code:

I am experiencing issues with my code and cannot comprehend this error message- Argument of type '{ src: string; thumb: string; }' is not assignable to parameter of type 'never'

  _albums = [];

  constructor(
    private wowService: NgwWowService,
    private _lightbox: Lightbox
    ) {
    this.wowService.init();

    for (let i = 1; i <= 4; i++) {
      const src = 'assets/desktop/galeria/' + i + '.jpg';
      const thumb = 'assets/desktop/galeria/' + i + '.jpg';
      const album = {
         src: src,
         thumb: thumb
      };
      this._albums.push(album);
    }
  }

  open(index: number): void {
    // Open the lightbox
    this._lightbox.open(this._albums, index);
  }

  close(): void {
    // Close the lightbox programmatically
    this._lightbox.close();
  }

Answer №1

To make it work, make sure to input _albums. If you have already set _albums = [], typescript will interpret it as an never[]. So, when attempting to add an item to the array, you are essentially assigning a { src: string; thumb: string; } object to a never type.

The following code will solve the issue:

_albums:{ src: string; thumb: string; }[] = [];

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

Angular 2 RXJS allows for the creation of JSON objects through multiple calls

Feeling a bit perplexed, but here I go: I am dealing with information on two characters obtained from various endpoints. The data is not neatly organized from the backend, so instead of receiving structured data like this: character{ character1{ ...

Sharing a FormGroup between different components

For my Angular 2+ application utilizing reactive forms, I have a requirement to share the main FormGroup across multiple components. This will allow different sections of the form such as header and footer to be managed independently by separate components ...

Navigating using ViewChild in Ionic 2 Beta

I recently updated my Ionic 2 app to use Angular 2 RC1, which has been a great improvement. However, I am facing some challenges with the routing implementation. Despite following the update guide, I still encounter issues with my navigation component bein ...

When using the Ng --version command on a development package, it throws an error

I encounter an error with a development package when cloning a repository. I would greatly appreciate any advice on how to resolve this issue. https://i.stack.imgur.com/DBp5r.png ...

When two-dimensional arrays meet destructuring, it results in a type error

Can anyone clarify TypeScript behavior in this scenario? JavaScript const test1 = [ ['a', 'b'], ['c', 'd'], ]; const test2 = [ ...[ ['a', 'b'], ['c', ' ...

The PKIJS digital signature does not align with the verification process

Explore the code snippet below const data = await Deno.readFile("./README.md"); const certificate = (await loadPEM("./playground/domain.pem"))[0] as Certificate; const privateKey = (await loadPEM("./playground/domain-pk ...

Utilizing the useSearchParams() function to retrieve live data in Next.js

Is there anyone who has successfully migrated from the pages router to the app router in Next.js? I am facing an issue with dynamic data migration. In the pages router, dynamic data is retrieved on a page using useRouter().query, but in the app router, it ...

Enhancing the Look: A Guide to Angular Styling

As a newcomer to angular design and styling, I find myself facing a challenge in incorporating existing styles into my new project. My predecessor, who has since moved on from the project, had used certain styles that I need to adopt. Despite installing ui ...

Having trouble locating the error in my Angular and Spring Security application

I am currently working on a project that involves integrating Spring Security with an Angular client. I have encountered an issue where, despite checking for null values in the login form on the Angular side before sending it to the Java application, the J ...

Authenticating users with Facebook using Ionic, Angular, Capacitor, and Firebase, as well as implementing role-based authentication

I successfully implemented Facebook authentication in my Android app using Ionic, Angular, Capacitor, and Firebase. The authentication is fully functional. What I attempted: Implementing role-based authentication. My solution: Storing the user's Face ...

Promise<IDropdownOption[]> converted to <IDropdownOption[]>

I wrote a function to retrieve field values from my SPFx list: async getFieldOptions(){ const optionDrop: IDropdownOption[]= []; const variable: IEleccion = await sp.web.lists.getByTitle("Groups").fields.getByTitle("Sector").get ...

How can I store unique and only selected checkbox values in an array using Angular?

I need assistance with creating an array from three checkboxes. The array should only contain the values of the checked checkboxes and should not include duplicates. I have attempted to achieve this functionality, but the values are still being added rega ...

Setting up Angular Toolkit via npm installation

After successfully installing the UIKit npm package within an Angular 2 CLI project, what steps should I take to utilize it? I have also installed typings for UIKit (@types/uikit), but I am unsure of how to properly import the package into a controller i ...

Create annotations on top of PDFs and images

I am in need of a solution that will allow users to draw freely on top of images and PDFs. I am currently working with angular 8 and have discovered numerous third-party packages that can facilitate freehand drawing and annotation on images. However, when ...

Utilizing TypeScript to reference keys from one interface within another interface

I have two different interfaces with optional keys, Obj1 and Obj2, each having unique values: interface Obj1 { a?: string b?: string c?: number } interface Obj2 { a: boolean b: string c: number } In my scenario, Obj1 is used as an argument ...

What is causing my function to execute twice in all of my components?

One issue I am facing is that I have created three different components with routing. However, when I open these components, they seem to loop twice every time. What could be causing this behavior and how can I resolve it? For instance, in one of the comp ...

Issue with uploading video files using ng2-file-upload in Angular7 and ASP .Net Core 2.1

While working on my project, I encountered an issue with uploading video files using ng2-file-upload to the server. The photo upload functionality is working fine, but when attempting to upload a video file larger than 27MB, the process gets canceled autom ...

Apollo Client's useQuery function is causing unnecessary refetches when using Next.js' router.push method

Currently, I'm facing an issue where a query within a useQuery Apollo Client hook is being re-run unnecessarily every time Next.js's router.push function is triggered. The problem code snippet looks like this: const Parent = () => { useQuery ...

Error in Angular: Unable to Access Property '..' of null

Having an issue with my Angular project where I keep getting an error message saying "cannot read property of '...' of undefined" whenever I select an employee from the combo box. The '...' represents the index of the selected employee. ...

Tips for selecting the best className type for material-ui components

Currently, I am integrating material-ui into a react app that is built using typescript. Within the material-ui framework, there is a feature called withStyles which allows styles to be injected into a component through its className. However, I am facing ...