The 'AppsList' generic type needs to have one type argument specified.ts(2314)

Consider the following interface that represents an array of objects.

export interface App {
    entry: object;
    content: {
        label: string;
        visible: boolean;
    };
    name: string;
    length: number;
}

export type AppsList<Response> = App[];

I am attempting to have AppsList extend Response since Response type is necessary in the code below.

However, I encounter the error message: Generic type 'AppsList' requires 1 type argument(s).ts(2314)

export function getLocalApps(userPrefsAppOrder: string): Promise<unknown> {
    return new Promise((resolve, reject) => {
        fetchLocalApps()
            .then((res: AppsList) => {
                resolve(orderApps(filterInternalApps(res.entry), userPrefsAppOrder));
            })
            .catch(e => reject(e));
    });
};

Answer №1

It appears that you are not utilizing the <Response> generic type parameter in your code, and you don't seem to be passing it in either. Therefore, it may be safe to remove that from your implementation.

export type AppsList = App[];

However, a new issue arises:

The 'entry' property is not found on the 'Response' type.

This error occurs because AppsList is declared as an array type indicated by the [] in App[].

This means that each element within AppsList should be of type App.

To access the 'entry' property, you need to first select an element from the array.

For example:

.then((res: AppsList) => {
  resolve(res[0].entry);
})

In most cases, you will want to retrieve more than just the first element from the array. Therefore, adjust the code accordingly to achieve this.

Playground


You mentioned wanting to extend Response with the AppList while still maintaining a type of App[]

An intersection operator & can be used to combine types. Here's an example:

export type AppsList = Response & App[];

Now you can treat AppsList as both an App[] and a Response:

.then((res: AppsList) => {
  res[0].entry // works as an array of type: App[]
  res.body // a property from the type: Response
  resolve(res[0].entry);
})

This approach may be unconventional as creating a value that adheres to this type could be challenging. It would be helpful to have more context about your objective to provide further guidance.

Playground

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

TypeScript throws an error if trying to access an Object variable using a String

While the code below is functioning as intended, I am encountering an error in the VS Code Typescript compiler stating that "Type 'String' cannot be used as an index type". Oddly enough, using a string literal instead of a variable like ...

What is the proper data structure for an array containing a generic interface?

How can I specify the correct type for routes array in order to prevent the error: TS2314: Generic type 'Route ' requires 1 type argument(s). View code in TypeScript playground interface Route<T> { path: string handler: () => T } ...

Prevent saving the file until all the categories have been chosen

We have recently updated our file list by adding a new file category column. Our aim now is to prevent users from saving the form until a category has been assigned to each file. However, I am unsure how to check for the presence of a value in each file ...

The issue of React TypeScript useContext not causing a re-render when there is a change

I have been attempting to modify an object using useContext, but it seems that the changes are not being reflected on the screen. Interestingly, if I click on another button, both buttons trigger their respective actions. The relevant code can be found bel ...

Issue TS2315: Type 'ElementRef' does not support generics

While attempting to integrate @angular/materials into my application, I encountered a successful compilation with the following error messages: webpack: Compiled successfully. ERROR in node_modules/@angular/material/button-toggle/typings/button-toggle.d.t ...

How to Use an Object Created from a Different Class in TypeScript

Scenario In the development process, I am using an auth.service.ts. This service is responsible for fetching user information from the database upon login. The retrieved data is then used to create a new user object. Here is a snippet of the code: user: ...

Leveraging Material UI and TypeScript for Effective Styling: Maximizing the Use of !

Currently, I am in the process of developing a React application and incorporating Material UI for my components. One query that has arisen is regarding how to apply an !important property to a style. My attempt at achieving this looked like: <Paper cl ...

JavaScript Class Emit Signal for establishing a sequence of interconnected events

My Vue project includes a JavaScript class specifically for mobile devices. I'm looking to have this class emit a signal once the property 'hasEnded' is set to True for my object. How can I achieve this and chain together other events based ...

fix IDE error when handling responses with async/await

I find myself facing a challenging scenario involving the use of promises (then|catch) for error handling, while also awaiting code cleanliness. Here's what I'm currently dealing with: let rules:Rules = await elb.describeRules(params).promise(). ...

Connect the names of the sheets with the data in the tables

I have a simple question: I want to connect specific sheet names in my workbook with a table that contains a range of dates. The sheet names should be something like "blablabla" + Table@1. Although I have attempted to design a solution, it doesn't se ...

Is Webpack CLI causing issues when trying to run it on a .ts file without giving any error

I am facing an issue with my webpack.config.js file that has a default entrypoint specified. Here is the snippet of the configuration: module.exports = { entry: { main: path.resolve('./src/main.ts'), }, module: { rules: [ { ...

Facing a challenge with handling HTTP data in a TypeScript-based Angular web application

I am currently working on developing a web application using Angular and the SpringMVC Framework. One of the tasks I'm facing is loading a list of users (referred to as "consulenti" in the code). While the backend HTTP request works fine, I encounter ...

Managing input and output using a collaborative service

I've been working on refactoring some code that contains a significant amount of duplicate methods between two components. Component A is a child of component B, and they can be separate instances as intended. The issue I'm facing revolves around ...

Specifying the data structure of a complex nested Map in TypeScript

Struggling to create a deeply nested (recursive) Map in Typescript generically. My attempt is to convert the provided Javascript example to Typescript: const map1 = new Map([ ['key1', 'value1'] ]) const map2 = new Map([ ['keyA& ...

What is the best way to show the previous month along with the year?

I need help with manipulating a date in my code. I have stored the date Nov. 1, 2020 in the variable fiscalYearStart and want to output Oct. 2020. However, when I wrote a function to achieve this, I encountered an error message: ERROR TypeError: fiscalYear ...

Tailored component properties for React applications

I am currently working on configuring discriminative component props. Check out my code snippet below: import React, { ReactNode } from 'react' type SelectionModalProps<T> = ( | { multiSelect: true onSubmit: (data: T[]) => ...

Is there a way to programmatically retrieve the 'title' attribute of a route as it updates during navigation?

Scenario and Issue I have set up various routes in my app-routing.module like this: // imports const routes: Routes = [ { path: 'home', title: 'Home Route', component: HomeComponent }, { path: 'other', title: 'Other ...

Trouble arises when trying to navigate to a new page from ion-tabs within Ionic 2

I recently developed a chat application that redirects users to a tabs page upon login. <ion-tabs tabsPlacement="top" color="header" tabsHighlight=true> <ion-tab [root]="tab1" tabTitle="Chats" tabIcon="chatbubbles"></ion-tab> <io ...

Issues arise with transferring React component between different projects

My goal is to develop a React component that serves as a navigation bar. This particular component is intended to be imported from a separate file into my App.js. Currently, the component is designed to simply display a 'Hello world' paragraph, ...

How to create a TypeScript generic function that takes a key of an object as a type argument and returns the corresponding value of that key in the object

My system includes various object types: type Slave = { myKey:string } type AnotherSlave = { anotherKey:string } In addition, there is a master type that contains some keys, with the object types mentioned above as the values for those keys: type Mas ...