Using Typescript generics to enhance arrays

Question

Using Typescript generics to enhance arrays

I am looking to extend a generic list of Array that has been previously extended from my class. How can I accomplish this in the correct way?

export interface DeliveryMethod {
  readonly id: string;
  readonly company: string;
  readonly cost: number;
  readonly threshold: number;
  readonly intervals: Array<Interval>;
  readonly paymentMethods: Array<PaymentMethod>;
}

export interface Delivery {
  selected: SelectedDelivery;
  available: { [key : string] : Array<T extends DeliveryMethod>;};
}

The error 'Cannot find name 'T'.ts(2304)' is showing up.

available: { [key : string] : Array<T extends DeliveryMethod>; };

One solution could look like this:

const Delivery = {
   selected :{/*data inside*/},
   available:{
      pickup: [<Pickup>{},<Pickup>{}],
      courier: [<Courier>{},<Courier>{}]  
   }
}

javascript typescript

Answer 1

Answer №1

The response by @aopanasenko is satisfactory. To further enhance it, I propose a solution for addressing the issue of multiple specifications.

If the characteristics of the available are limited and remain constant, one approach is to explicitly list them within the Delivery interface:

interface Delivery<T extends DeliveryMethod, U extends DeliveryMethod> {
  available: { [key : string] : Array<T | U>};
};

This allows you to define the delivery object as follows:

const delivery: Delivery<Pickup, Courier>

In situations where the properties may not be known in advance, a method to associate property names with TypeScript types is necessary. For this purpose, an available object can be utilized for mapping:

interface Delivery {
  available: { [key: string]: Array<DeliveryMethod> | null };
};

const delivery: Delivery = {
  available: {}
}

const available: {
  pickup: Pickup[] | null,
  courier: Courier[] | null
} = {
  pickup: null,
  courier: null
};

delivery.available = { ...delivery.available, ...available };

This approach ensures proper type validation. The inclusion of | null serves as an example and can be omitted if necessary.

Answer 2

The response by @aopanasenko is satisfactory. To further enhance it, I propose a solution for addressing the issue of multiple specifications.

If the characteristics of the available are limited and remain constant, one approach is to explicitly list them within the Delivery interface:

interface Delivery<T extends DeliveryMethod, U extends DeliveryMethod> {
  available: { [key : string] : Array<T | U>};
};

This allows you to define the delivery object as follows:

const delivery: Delivery<Pickup, Courier>

In situations where the properties may not be known in advance, a method to associate property names with TypeScript types is necessary. For this purpose, an available object can be utilized for mapping:

interface Delivery {
  available: { [key: string]: Array<DeliveryMethod> | null };
};

const delivery: Delivery = {
  available: {}
}

const available: {
  pickup: Pickup[] | null,
  courier: Courier[] | null
} = {
  pickup: null,
  courier: null
};

delivery.available = { ...delivery.available, ...available };

This approach ensures proper type validation. The inclusion of | null serves as an example and can be omitted if necessary.

Answer 3

Answer №2

Update

According to @AndreaSimoneCosta's suggestion in the comment, the code snippet below should work:

export interface DeliveryMethod {
  readonly id: string;
  readonly company: string;
  readonly cost: number;
  readonly threshold: number;
  readonly intervals: Array<Interval>;
  readonly paymentMethods: Array<PaymentMethod>;
};

export interface Delivery<T extends DeliveryMethod = DeliveryMethod> {
  selected: SelectedDelivery;
  available: { 
    [key : string] : Array<T>
  };
};

It is important to define the generic type parameter list within angle brackets after the name of the Delivery interface:

export interface DeliveryMethod {
  readonly id: string;
  readonly company: string;
  readonly cost: number;
  readonly threshold: number;
  readonly intervals: Array<Interval>;
  readonly paymentMethods: Array<PaymentMethod>;
};

export interface Delivery<T extends DeliveryMethod> {
  selected: SelectedDelivery;
  available: { 
    [key : string] : Array<T>
  };
};

Answer 4

Update

According to @AndreaSimoneCosta's suggestion in the comment, the code snippet below should work:

export interface DeliveryMethod {
  readonly id: string;
  readonly company: string;
  readonly cost: number;
  readonly threshold: number;
  readonly intervals: Array<Interval>;
  readonly paymentMethods: Array<PaymentMethod>;
};

export interface Delivery<T extends DeliveryMethod = DeliveryMethod> {
  selected: SelectedDelivery;
  available: { 
    [key : string] : Array<T>
  };
};

It is important to define the generic type parameter list within angle brackets after the name of the Delivery interface:

export interface DeliveryMethod {
  readonly id: string;
  readonly company: string;
  readonly cost: number;
  readonly threshold: number;
  readonly intervals: Array<Interval>;
  readonly paymentMethods: Array<PaymentMethod>;
};

export interface Delivery<T extends DeliveryMethod> {
  selected: SelectedDelivery;
  available: { 
    [key : string] : Array<T>
  };
};

Using Typescript generics to enhance arrays

Answer №1

Answer №2

Similar questions

What is the best way to execute a specific set of unit tests in Gulp-Angular using Karma?

Does the webpack style loader load only application-specific CSS, or is it designed to handle all CSS files?

Removing leading zeros from numeric strings in JSON data

monitor the location of a div within a textarea

What is the proper way to display the initial content of the menu?

Does LABJS include a feature for executing a callback function in the event of a timeout during loading?

Can you explain how to achieve auto-assigning arrays in JavaScript similar to the PHP feature?

Adjusting characteristics in Angular dynamically through JSON

what sets apart parseint from minus

Tips for stopping the submission of a form

Retrieving component attributes using jQuery or alternate event handlers

What steps should be taken to fix the error "Warning: Encountered multiple children with the same key" in React.js?

Can anyone explain why the Splice function is removing the element at index 1 instead of index 0 as I specified?

Is my understanding of HTML and JavaScript code accurate?

Effortless method to handle package.json configurations

The "rest" variable is automatically assigned the type of "any" because it lacks a specified type and is used within its own initializer

The index.js file from Heroku NodeJS is being delivered as a response instead of being run

Dropdown Placement Based on Button Click

Transform the object into a function that returns the object while still maintaining the casting

Potential issue with Lodash's _.once function: the possibility of a race condition