Expanding Generic Interfaces in Typescript

Question

Expanding Generic Interfaces in Typescript

I am working on a project where I need to enhance a typescript type by adding a new property in order to extend a generic type. To achieve this, I plan to define a Confidence<any> type that has the following structure:

export interface Confidence<T> extends T {
   confidenceLevel: number
}

To utilize this new type, I can do the following:

const date: Confidence<Date> = new Date();
date.confidenceLevel = 0.9;

Although it seems challenging (and possibly not recommended), I have found an alternative approach:

export type Confidence<T> = T & {
   confidenceLevel: number
}

This second method achieves the desired outcome, but I feel uncertain about its validity. While I acknowledge that overriding properties of the generic type could present challenges, is there anything else I should be aware of? I am struggling to fully understand this concept - what would be the most effective way to create a type that simply adds a property?

typescript inheritance typescript-generics

Answer 1

Answer №1

There has been a persistent request for a feature, microsoft/TypeScript#2225, that aims to enable the usage of

interface Foo<T> extends T {...}

as you desire. Currently, this functionality is not yet implemented and may never be. Presently, interfaces can only extend object types with keys that are statically known. The unspecified generic type parameter T poses issues because the compiler cannot anticipate its key structure.

An intersection serves as a viable method to achieve what you're looking for, although it lacks a warning mechanism if your added property conflicts with an existing property in T. This approach has been put forward as a potential solution in the aforementioned feature request. Furthermore, the TypeScript library typings for Object.assign() utilize an intersection to represent the outcome of adding properties to an object. Hence, defining Confidence<T> like this:

type Confidence<T> = T & {
  confidenceLevel: number
}

enables easy creation of a function that produces such objects:

function makeConfidence<T>(x: T, confidenceLevel: number): Confidence<T> {
  return Object.assign(x, { confidenceLevel });
}

This function can then be used as shown below:

const x = makeConfidence(new Date(), 0.9); // x is a Confidence<Date>;
console.log(x.getFullYear()); // 2020
console.log(x.confidenceLevel); 0.9

All set! Hopefully, this information proves helpful. Best of luck!

Playground link to code

Answer 2

There has been a persistent request for a feature, microsoft/TypeScript#2225, that aims to enable the usage of

interface Foo<T> extends T {...}

as you desire. Currently, this functionality is not yet implemented and may never be. Presently, interfaces can only extend object types with keys that are statically known. The unspecified generic type parameter T poses issues because the compiler cannot anticipate its key structure.

An intersection serves as a viable method to achieve what you're looking for, although it lacks a warning mechanism if your added property conflicts with an existing property in T. This approach has been put forward as a potential solution in the aforementioned feature request. Furthermore, the TypeScript library typings for Object.assign() utilize an intersection to represent the outcome of adding properties to an object. Hence, defining Confidence<T> like this:

type Confidence<T> = T & {
  confidenceLevel: number
}

enables easy creation of a function that produces such objects:

function makeConfidence<T>(x: T, confidenceLevel: number): Confidence<T> {
  return Object.assign(x, { confidenceLevel });
}

This function can then be used as shown below:

const x = makeConfidence(new Date(), 0.9); // x is a Confidence<Date>;
console.log(x.getFullYear()); // 2020
console.log(x.confidenceLevel); 0.9

All set! Hopefully, this information proves helpful. Best of luck!

Playground link to code

Answer 3

Answer №2

Expanding on the solution provided in the response by jcalz:

To make the type T optional, you can define it as extending from Record<string, unknown> and setting its value to Record<string, unknown>.

type Confidence<
  T extends Record<string, unknown> = Record<string, unknown>
> = T & {
  confidenceLevel: number
};

This allows for usage without specifying a generic if necessary:

interface Bar {
  barLevel: number
};

const foo: Confidence = { confidenceLevel: 100 };
const bar: Confidence<Bar> = { confidenceLevel: 100, barLevel: 2 };

Answer 4

Expanding on the solution provided in the response by jcalz:

To make the type T optional, you can define it as extending from Record<string, unknown> and setting its value to Record<string, unknown>.

type Confidence<
  T extends Record<string, unknown> = Record<string, unknown>
> = T & {
  confidenceLevel: number
};

This allows for usage without specifying a generic if necessary:

interface Bar {
  barLevel: number
};

const foo: Confidence = { confidenceLevel: 100 };
const bar: Confidence<Bar> = { confidenceLevel: 100, barLevel: 2 };

Expanding Generic Interfaces in Typescript

Answer №1

Answer №2

Similar questions

What steps can I take to prevent receiving the error message "Certain components in XXX are not associated with the entity" in Strapi?

The services generated by OpenAPI Generator typescript-angular are experiencing failures

When set to synchronize:true in Typeorm, any changes to an entity will result in the many-to

The output of switchMap inner will generate an array similar to what forkJoin produces

The <router-outlet> in Angular is duplicating the parent component on the page

Clearing the filename in a file type input field using React

Exploring the Factory Design Pattern Together with Dependency Injection in Angular

problem with arranging sequences in angular highcharts

Connecting Ag Grid with modules

Angular issue: "anticipated to exit Angular zone, yet still found within"

Refreshing the page causes TypeScript Redux to lose its state

Discovering the steps to showcase _app.tsx within next.js 13 through module federation

Error! Unable to Inject ComponentFactoryResolver

Leverage Prisma's auto-generated types as the input type for functions

Using injected services within static methods may seem tricky at first, but once you

Tips for including multiple directives in a component

What is the prescribed interface or datatype for symbol type in TypeScript with JavaScript?

Troubleshooting Angular: Issues with Table Data Display and Source Map Error

Using TypeScript to Declare Third Party Modules in Quasar

Issue with triggering Observable during an Angular 2 HTTP call