Extensible generic type/interface in Typescript

Question

Extensible generic type/interface in Typescript

Looking to create a versatile base interface or type that can adapt its properties based on the generic object it receives. It might look something like this:

interface BaseObject<Extension extends object = {}>{
   a: string;
   b: string;
   {...Extension} <<< This syntax works in regular objects, but not in this context
} 

const sample:BaseObject<{x: number}> = {
    a: '123',
    b: '123',
    x: 123 <<<< Enforcing a type check here
}

Any ideas on how to implement this?

typescript generics

Answer 1

Answer №1

To achieve this, simply expand the interface.

interface EnhancedObject extends BaseObject {
  y: number;
}

const data: EnhancedObject = {
  a: 'abc',
  b: 'def',
  x: 456,
};

Answer 2

To achieve this, simply expand the interface.

interface EnhancedObject extends BaseObject {
  y: number;
}

const data: EnhancedObject = {
  a: 'abc',
  b: 'def',
  x: 456,
};

Answer 3

Answer №2

To achieve this functionality, one approach is to utilize mapped types with an Extension. TypeScript does have limitations when it comes to declaring types that use mapped types alongside property types or in an interface declaration. However, you can still create a type that combines the properties of Extension with the base properties by using an intersection, even though the syntax may seem a bit unusual:

type BaseObject<
  Extension extends object = {},
  All = Extension & { a: string; b: string }
> = {
  [K in keyof All]: All[K];
};

It's worth noting that the second generic property isn't strictly required. Alternatively, you could write it in the following manner:

type BaseObject<Extension extends object = {}> = {
  [K in keyof (Extension & { a: string; b: string })]: (Extension & {
    a: string;
    b: string;
  })[K];
};

Answer 4

To achieve this functionality, one approach is to utilize mapped types with an Extension. TypeScript does have limitations when it comes to declaring types that use mapped types alongside property types or in an interface declaration. However, you can still create a type that combines the properties of Extension with the base properties by using an intersection, even though the syntax may seem a bit unusual:

type BaseObject<
  Extension extends object = {},
  All = Extension & { a: string; b: string }
> = {
  [K in keyof All]: All[K];
};

It's worth noting that the second generic property isn't strictly required. Alternatively, you could write it in the following manner:

type BaseObject<Extension extends object = {}> = {
  [K in keyof (Extension & { a: string; b: string })]: (Extension & {
    a: string;
    b: string;
  })[K];
};

Extensible generic type/interface in Typescript

Answer №1

Answer №2

Similar questions

Creating a service in AngularJS 1.8 with ES6 modules that acts as a bridge to a class based API interface

Return the reference to an injected service class from the location where it was implemented

Angular 14 encountered an unexpected issue: There was an unhandled exception with the script file node_modules/tinymce/themes/modern/theme.min.js missing

The password encryption method with "bcrypt" gives an undefined result

What exactly does the context parameter represent in the createEmbeddedView() method in Angular?

An effective way to define the type of a string property in a React component using Typescript

Failure to Execute Angular HttpClient Request

Setting default selections for mat-select component in Angular 6

What is the method for deducing the names that have been announced in a related array attribute

Mongodb Dynamic Variable Matching

Ways to sign up for the activeDate variable in MatCalendar so you can display the month and year labels of the current active date in the

Angular - Automatically update array list once a new object is added

Expanding the range of colors in the palette leads to the error message: "Object is possibly 'undefined'. TS2532"

Cypress error: Unable to access 'uid' property as it is undefined

How can I achieve this using JavaScript?

I am experiencing issues with the customsort function when trying to sort a column of

The authService is facing dependency resolution issues with the jwtService, causing a roadblock in the application's functionality

Oops! The last loader did not provide a Buffer or String as expected

Directive for displaying multiple rows in an Angular table using material design

Link the chosen selection from a dropdown menu to a TypeScript object in Angular 2